Home » Node.js15 August 2017

Node.js & Express: Routing & Single Page Application (SPA)

This article shows how you can use routing in Node.js and Express Framework to create a Single Page Application (SPA) or website. Basically, we will be using Routing to include different HTML files.

Express Framework supports different HTTP request methods like GET, POST, PUT, DELETE, etc. Detailed guide on Express Routing is present here.

To create a Single Page Application/Website, we will only be including certain HTML files. So, we will only use the GET method in this article.

I suppose, you have already installed Express module. If not, you may refer to my previous article on Introduction & Hello World module using Node.js & Express.

Below, is the code showing a simple example of using basic routing feature in Express. GET HTTP method is used to include different HTML files. In the response, sendFile method is used to deliver the HTML files to the browser. The application server listens to port 3000.

app.js

Here’s the sample of index.html, about.html and contact.html files:

index.html

about.html

contact.html

Now, go to your node project directory and run the following command in terminal/command-prompt:

After this, you can open the following URLs in your browser:

http://127.0.0.1:3000 will show content of index.html file.
http://127.0.0.1:3000/about will show content of about.html file.
http://127.0.0.1:3000/contact will show content of contact.html file.

Any other parameters in the URL will show content not found message.
http://127.0.0.1:8081/xyz will show message “Cannot GET /xyz”.

Hope this helps. Thanks.

Node.js

Get New Post by Email

Find me on

FacebookTwitterGoogle+LinkedInRSS Feed
  • Shepherd

    This solution doesn’t work as a SPA. If you add links to html pages that lead to each other then the browser will refresh the page and it shouldn’t in the SPA approach.