Made with: Node and Express

Source Files Live Demo

Source Files | Live Demo

Before we go to our example site, let’s talk about Express:

Express is a web framework usually paired with Node. It is a light weight tool that makes it easy to build dynamic web applications.

Since Express is made with JavaScript, you can install it directly from NPM. Once you install it, you can build your first Express aplication: a simple Hello World! message displayed when you access the / route, or the root of your website (usually that will be your home page):

Open your text editor and create a file called app.js (make sure that during your installation you set the entry point in your package.json as app.js instead of index.js).

Then type the following:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => 
  console.log(`Example app listening at http://localhost:${port}`)
) 

The first two lines indicate that you want to import Express and that you will assign it to a variable called app.

The port is where you will see your application at work: http://localhost:3000

Then, you will tell the program that when you go to the home page via your root / route, you want it to send the phrase Hello World! to the browser.

Finally, you instruct the app to listen for changes in port 3000.

Once all that is set up, save the file, go to your command line, and type:

node app.js 

Then, navigate to http://localhost:3000, and you should see this in the browser:

Hello World!

Now, let’s say that instead of sending just text you want to send an HTML snippet, for example:

app.get('/', (req, res) => 
  res.send(
    '<h1>Hello World!</h1><p>This is my new website.</p>'
  )
)

Save your work, run node app.js again and refresh your browser. You should see someting like this:

Hello World!

This is my new website.

Sending a bunch of loose HTML is not very common, though. Most of the time you would like to send a proper HTML document. You just have to place the previous code in an index.html file, save the file in the views folder (Express will find it) and use the render method instead of send:

app.get('/', (req, res) => res.render('index'))

The result will be the same as before:

Hello World!

This is my new website.

But you can go a step further, and ask Express to insert variables to your websites! Here is where the dynamic nature of Express starts to shine. You can use any templating engine, for example Pug, and create an index.pug file that looks like this:

block content
    h1 Hello World!
    p My name is ${name}!

Then, just pass an object with the variable name with your render method, like this:

app.get('/', (req, res) => res.render('index', { name, 'Joe'}))

And your website will display:

Hello World!

My name is Joe!

There are many other things that you can do with Express, like grabbing parameters from the URL and passing them to your templates. We will see that in action in our demo site below.

Demo

This is a basic dynamic site made with ExpressJS.

It has an /index, /contact and /about pages, each of them rendered by a basic Express route, and three car-specific pages rendered with Express dynamic routes using parameters taken from the URL.

The aim is not to make a pretty site but just show the basic functionality that Express gives you to build a back-end dynamic site.

The site’s home page will present you with a choice of links for three car brands. When you click on those links you are taken to a special page of the individual car brand that you selected and will see a bulleted list with three popular models from that brand.

Even though the pages look very simple, this is not a static site. The pages are generated on the fly by Express the moment you click on a link.

If you want to clone this example go here:

If you want to play around with the site, you can use the embedded page below:

Demo hosted in Codesandbox