Basic Routing in JavaScript

Routing Using Express and EJS

While working on my latest single page JavaScript application this week, I ran in to the need for a way to handle client-side routing. While there are many routing frameworks that exist for this purpose, I decided on using Express server since I had some familiarity with it and because of the extensive documentation available for it.

Routing refers to the way in which client requests to particular endpoints are handled in an application. It’s how we are able to go from one view on a website to another, depending on what URL we type in to the browser. The route definition is comprised of a path and a HTTP request method and takes the following basic structure:

app.METHOD(PATH, HANDLER)

where the handler is the function that gets executed when there is a route match.

If we wanted to define a home route for our app at the path of ‘/’, we could write a simple route such as the one below:

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

Before we go any further, let’s take a step back and look into what Express is and how to set it up.

Express Server

So what exactly is Express? Express is a web application framework for Node.js that allows us to structure and organize our web applications easily and efficiently. In order to install Express globally, we run the following command: npm install express — save .

Within our project, we would then create a server.js file, wherein which we initialize the Express server and configure our routes. A basic example of this is:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Home Page')
});

app.get('/log', (req, res) => {
  res.send('Log Page')
})

app.listen(3000, () => console.log('Server Started'))

The above code sets up and initializes the Express server and defines two routes: the home page at ‘/’ and a log page at ‘/log’. We can then spin up our server by running node server.js . If we then go to localhost:3000, we should be taken to the home page (which at the moment just displays “Home Page”). If we go to localhost:3000/log, we should see “Log Page”.

Using EJS for Templating

Next, we’ll want to set up a template engine to use with Express, which allows us to use static template files in our application. When the application is run, the template engine then transforms the template into an HTML file, which is what the client sees on their screen. There are various template engines compatible with Express, and for this project, I’ve chosen to use EJS. EJS lets us generate HTML markup using vanilla JavaScript.

To install EJS, run npm install ejs — save . We will then have to set our view engine to EJS in our server.js file:

app.set('view engine', 'ejs');

To make sure our template files render correctly, we’ll then need to create a views directory within our project — this is where we’ll hold our template files.

For styling, we’ll want to create a public folder in our root directory and then place our stylesheet(s) in that folder. Don’t forget to link the stylesheet to your EJS template by placing the link element in the head.

To render our views with the HTML markup, we can use the render method in our controller action. Within our server.js file, we would replace the code we had written with the following:

app.get('/', (req, res) => {
   res.render('home')
});

This tells our application to render the ‘home’ template when it receives a GET request to ‘/’.

Wrapping Up

And that’s it!

Here is how my server.js file looks like:

const express = require('express');
const app = express();
// sets the view engine to EJS
app.set('view engine', 'ejs');
// directs Express to the public folder for 
stylesheets
app.use(express.static("public"));
// controller actions
app.get('/', (req, res) => {
   res.render('home')
});
app.get('/log', (req, res) => {
   res.render('log')
})
app.listen(3000, () => console.log('Server Started'))