How to make a basic website with Node, Express, and Pug

  1. Create a new folder, and go into it.

  2. Initialize a new Node project within the folder.

  3. Fill out the info it asks you for. In most cases, the defaults will be fine. This will create a package.json file in the folder.

  4. We are going to install a package called Express. It lets us get websites up and running quickly and easily.

  5. Additionally, we are going to install Pug, an HTML template language.

  6. Install nodemon, a program that watches your Node application during development, and restarts the server any time there are changes.

  7. In your package.json, replace the contents of "scripts" with these commands.

  8. Make a new file called server.js, and paste in the following code:

  9. Make a new folder called views, and within it make a new file called index.pug. In that file, paste the following code:

  10. Start up your server with

  11. In your browser, go to http://localhost:3000 to view your site. Try making changes to server.js and reloading the webpage to see it change.

  12. All of the above steps are hard to remember, and don’t give you a ton of functionality out of the box. Let’s use the default Express Generator to make a better web app, much more quickly. First, install Express Generator with

  13. Next, create a new project with the generator.

  14. cd into the newly create folder, npm install inside of it, then open the folder in Sublime Text or similar and look around. What parts are similar and what parts are different from the simple app you made?

  15. Start the server, and visit it at http://localhost:3000

  16. Next steps — Try adding functionality to the site:

  • Add CSS stylesheets to layout and style the page
  • Pass useful data from the server to the client (not just a static “Hello there!”)
  • Add client-side Javascript to add dynamic elements to the page (D3.js is a great way to make data visualizations)
  • Integrate on the server and client to pass data back and forth and between clients