Pug template rendering
Voila ✨ now you’re having fun with Pug aren’t you :)) 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
PUG TEMPLATE RENDERING CODE
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
PUG TEMPLATE RENDERING INSTALL
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. Inside the src folder create a new index.pug file and then create a simple layout inside it.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. Npm i -D pug pug-loader html-webpack-pluginĢ. pug module : read pug files pug-loader: returns the file’s content as template function so we can interpolate data in our template html-webpack-plugin: will get the index.pug file from src folder and using the other two loaders will emit a new index.html file in the dist folder.Create a file: index.pug with some dummy data.Install pug, pug-loader, html-webpack-plugin.Next let’s make webpack to read pug files and to load them in the distribution folder. Even if we don’t need it for this short tutorial, it’s good to know how you can do it. With this, we defined an entry and output point for our application, the port for the development server and we created a simple boilerplate to figure it out whether we run the the webpack command in production or development mode. In order to do this differentiation between production and development, then we must write in the following way const path = require('path') const config = If we want to run the webpack command both in development mode and production mode using our scripts then we must create a separate config object with the common configuration and then based on the arguments of the webpack command we will add diferent rules.