To use this feature, we will create another folder layouts within the views folder. We can do so by using the Pug reusable layout feature.

It might benefit the maintainability of our code if we can remove this duplication of template code. Basically, the navigation bar is present in both templates even though it is practically the same. You may have noticed that we are repeating a bunch of template code in the above code. Whenever the user submits the form, we push a new product to the products array. Second is the POST method handler for adding a new product. In this case, we render the add-product template. One of them is a GET method handler for displaying the Add Product page.

To do so, we can execute the below command: $ npm install express pug body-parserīelow is the package.json for our example application. NodeJS Express Pug InstallationĪs a first step to using Pug in our Express app, we need to install the necessary packages. In this post, we will look at Pug and how we can use it with NodeJS and Express. Some of the most popular templating engines are:Įach of the engines has its own philosophy for defining the placeholders. In other words, a templating engine performs on-the-fly generation of HTML that is sent to the client. Basically, the engine replaces the placeholders or snippets with actual HTML content. When a request is processed by our application, the templating engine kicks into action. At the heart of a templating engine, there is an HTML template with placeholders for dynamic data. Templating engines help make our web applications dynamic in terms of data. If you are new to Express, check out this post on getting started with ExpressJS. In this post, we will learn how to perform templating in NodeJS using the Express Pug view engine. Templating engines is a great way to support this feature. Background: HD188553, NASA/JPL-Caltechįollowing the parameterized route the guardian.It is a common requirement to render dynamic content into our HTML page. The following code sets up a simple HTTP server with Express.js.Ĭonsole.log(`Server started at port $`) It will be created after the author and license fields are over. If you want some other name, like app.js, you can do the naming here. Now there is one field called entry point where you can give a name to your main file (.

Inside /node-project, we will create the package.json file for our Node.js + Express.js application typing the below command.įill the name, version, description and other such fields with your own values. Create a working directory for your project, say, /node-project.

Send data to pug template express