Implementing Simple SPA Routing Using Vanilla JavaScript

Praveen Kumar Saini — Wed, 21 Aug 2019 16:42:59 +0000

In this article, I am going to implement SPA routing using Vanilla JavaScript.
So, the main motive behind this article to get an understanding of how SPA routing works. Before we get into this we need to understand the main components of routing i.e Web History and Location API.

History and Location Object

Let’s first talk about window.history. History contains all the browser history you can simply access it by typing history and then you’ll get the whole history object and the variety of method’s it has.

window’s history object

And another one that we are going to use is window.location. It contains all the information about the current location such as origin, pathname, etc. If you type location in your terminal then you got the whole location object.

window’s location object

Let’s start Routing

So, first of all, we need to make an index.html. It contains all the markup for our app. For this right, we just need to make a div of the id *of **root*.

index.html

Now, we are done with that make our page. That is going to render in root area.

Our three different components

Now, we make our three different pages let’s import them in our index.html’s head **section. Now we have to use a server to serve these pages so in this I am going to use **live-server. If you have live-server it’s well and good just go to the folder directory and run live-server otherwise install it using npm i -g live-server.
Now, it’s time to make our main JavaScript file that contains all our routing logic.
Let's make a file called app.js.
Then first we have to decide our routes and page specific to that particular route and put them in an object.

    const routes = {
      '/' : home,
      '/contact': contact,
      '/about': about
    };

Our next work is to render a page when the index initially loaded. For that first, we have to select the root div and then use innerHTML method to add the content to the element according to the path.

    const rootDiv = document.getElementById('root');
    rootDiv.innerHTML = routes[window.location.pathname];

Here window.location.pathname will give the current path and when the page is loaded the current path is going to ‘/’. But our work is not done here yet. Now, we also have to make the route for ‘/about’ and ‘/contact’ page. For that, we are going to create a simple navigation menu.

Simple navigation for navigating through sections.

Now, we are going to make a function that helps us to navigate through section it takes a path and then uses history.pushState() method that takes three parameters i.e state, title, and the route to push and to push the current route into history object so we can also navigate through the browser backward and forward button and then render the section according to the current path.

onNavigate Method

Now, just call this **onNavigate **method on the **onClick **event of our navigation menu’s a tag. We just need to do this.

    <a href="#" onclick="onNavigate('/about'); return false;">About</a>
    // repeat for other routes also.

Congrats you just make your own router and when you pressing browser’s forward and backword button you see that the route actually changes but wait for your page is not changing. So, this is because when the browser call’s it’s pushState() method than another method is also called i.e window.onpopstate it’s a simple function where you can customize it according to your need. So, whenever the pushState is called we are going to render our section. For that all we need to apply this.

    window.onpopstate = () => {
      rootDiv.innerHTML = routes[window.location.pathname]
    }

Congrats you finally have done with it.

If you want to follow the code. Check out GitHub repo from here.
If you want to connect with me check out my Twitter and Github.

Create full-stack boilerplate using reenode.

Praveen Kumar Saini — Mon, 12 Aug 2019 18:21:29 +0000

Problems with creating fullstack boilerplate:

Creating a starter kit for full-stack applications need a lot of effort and sometimes it becomes a headache. A small mistake in the initialization of the starter project can break your whole code and then you see a huge pile of console errors.

When I was learning to create full-stack applications then every time I code application from sketch and repeat that huge pile of code again and again that becomes a headache for me sometimes and if I did something wrong in setup of the application, my whole application got breaks.

Making mistake can be one reason but the main reason is that its very time consuming like every time you need to install packages, configure webpack, babel, eslint, prettier, etc and sometimes that makes me sick. Then I created some boilerplate like simple-react-boilerplate, MERN-boilerplate, react-redux-ssr and when I need to create a project I simply clone that repository and start working.
But still, the problem is that there are different repositories for every purpose i.e sometimes I don't need node but sometimes I do.

So, that's why I create reenode, a CLI for generating boilerplates with all the necessary minimal configuration to code a full-stack applications.

What is actually `reenode` is ?

reenode is a simple CLI that generates starter code for full-stack applications without all pain that you'll have when you write that from scratch. reenode also have custom options for creating different boilerplates. The best part is that it's time-saving and your starter code will be ready in just a couple of minutes.

How to use it?

For that first you need to install it globally by just typing:

npm install -g reenode or yarn add global reenode.

That's so simple. 😃

reenode provides create command to create a project. For that you just need to run:

reenode create project-name

After that terminal prompt will ask some questions:

That's all you need to do. 🚀

You can get help typing reenode --help and version of CLI by reenode --version.

Checkout the whole documentation of reenode from here:

NPM Link: https://www.npmjs.com/package/reenode

Github Link: https://github.com/praveen-me/reenode

REQUEST: If you feel issue using it then please comment down here or you can add issue at reenode's GitHub repo.

Follow me on Twitter and Github.

DEV Community: Praveen Kumar Saini