#Pug template images how to#
#Pug template images install#
#Pug template images code#

#Pug template images code#

Pug template engine allows us to write code that can be converted into HTML code. In this tutorial, we will explore using an HTML template engine, Pug, which works very well with Node.js. Here we could use HTML or any front end framework of your choice. > start /Users/mac/Documents/newProject > nodemon app.js 2.0.3 to restart at any time, enter `rs` watching path(s): *.* watching extensions: js,mjs,json starting `node app.js` Listen on port 3000 Adding the PUG template engine Here is the output you should be expecting since we introduced Nodemon. When we use start, we can gracefully omit run command in the command line interface and Nodejs will understand. Let’s go back to the package.json file and change the key from app to start. It is highly recommended to use start because someone who will clone your repository will not struggle to go through your code to find the entry point, since npm start is a standard. When Node observe start, it will automatically execute the value associated with it, in my case nodemon app.js. Use of start as a key for our entry point of the application can simplify our lives. To execute our Node application using Nodemon, you type in the command line:įrom now going on, all you can do is to save all your changes and let Nodemon takes care of restarting the web server for you. You can name your key value to anything, in my case I named it app. Once done installing, go to the package.json file and add the following under script: Nodemon automates the process of restarting our Node project each time we save changes. It is not an efficient way to develop Node applications because each time we make changes, we have to stop the webserver, save changes, and execute the same command. We executed node app.js in the terminal to get this output.

The web server const express = require('express') const app = express() app.listen(3000, () => console.log(“Listening on port 3000”)) In this file, we create an HTTP server and it listens on port 3000. We are ready to start! Let’s create the app.js file in the root folder. Express is a middleware web framework that handle routes, requests and responses. The dependencies we just installed serve different purposes.

#Pug template images install#

Let’s install Nodejs and other dependencies we need in the project, once it is done running it adds node modules folder and package-lock.json file: Every dependency you add in this project will show in the package.json file. You have successfully created a package.json file, located in the root folder of your project, for project identification and contain dependencies we will install add. package name: (newproject) version: (1.0.0) description: entry point: (index.js) app.js test command: git repository: keywords: author: license: (ISC) The dependencies However you can specify all the fields, read more about the content of the package.json fields here to make informed changes.

By running the code below, we initiate our project by creating a package.json file.Īs shown below, I did not change anything except entry point, I changed from index.js (default) to app.js. I recommend using the terminal in vsCode because it is easier to access, you do not need to enter the path directory. Open the folder newProject in Visual Studio Code (VSCode). Use the IDE of your choice, in my case I am using Visual Studio Code. Start by creating a folder in a directory of your choice using the terminal. In addition to the prerequisite mentioned above, you must be familiar with JavaScript. Click here to get Nodejs if you do not have one. To get hands on experience with this article you need to have:

#Pug template images how to#

At the end of this tutorial, you would have created an single web page and learn how to use the technologies mentioned above. We will create a Node application from scratch, set up Nodejs, express, and a pug template engine. In this tutorial, I will explain how to use a pug template and NodeJS to build a web page. Image by Free-Photos from Pixabay Introduction