![]() ![]() We’ll create a route so it renders our template like so : app.get("/", (req,res) => is a fun language to learn Now that we have our template ready, next thing to do is actually pass these arguments to the. So how the heck do we pass those arguments ? ![]() INDENTATION IS IMPORTANT, anyway so let’s see what does this mean exactly, think of Pug files as html files but with variables and stuff, because that’s literally what a template is, it helps us pass arguments and do programming stuff inside the file, so this tells us that the title tag in our file equals a variable called title and then we see an h1 tag but the value of the text to it equals a variable called message pug extension says that this is a pug file so it has a tiny bit different syntax than html BUT TRUST ME it’s just as easy So in your views directory create a new file and name it home.pug now this. pug files to use for rendering templates and by default it’ll look inside a directory called views so please go ahead and make that directory as we’ll create our first template This is extremely simple but just cared to to have it in a separate section you knowĪdd this to your express code after requiring Pug itself app.set('view engine', 'pug') this will tell express to look out for. ![]() We’ll also need nodemon to save time so npm i -save-dev nodemon Then just install Pug using npm npm i pug Initialize a new project with the defaults using npm init -y Make a new directory and navigate into it with mkdir express_templates & cd express_templates Honestly there are plenty of choices and among them areĪnd many others you can look at here, for this tutorial i picked the easiest option which is Pug, it has great features and the template language itself is easy peasy □ squeezyĪs per every node / express project the steps are simple So it allows us to pass arguments to pre-defined templates of our own, it also supports logic like conditionals, filtering and all that stuff so you have great control over the data ![]() This approach makes it easier to design an HTML page. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. So what the □ is a template engne anyway ? And what problems does it solve me ? So according to the express.js documentationĪ template engine enables you to use static template files in your application. ![]()
0 Comments
Leave a Reply. |