Skip to main content

Vanilla JS Single Page Application Routes | # or URL - #88


Published: March 26, 2022 | DevDrawer


Estimated Reading Time
1 minutes
Video Duration
33:38 minutes

One of the most asked code questions during a front-end interview is "Can you create a single page application with routes, without a framework?" In this tutorial, I show you how to create a custom routing system for your single page application using either the hash or URL method...without a framework.

This tutorial shows you how to build a Single Page App using vanilla JavaScript. I show you how to implement client-side routing both ways (hash or URL) in an easy-to-use format that can be replicated for any project.

So, let's get started with our Single Page Application.

00:00 Intro

01:07 Creating our index.html

04:55 URL-based routing

17:13 Potential issues with URL routing

21:08 Setting titles and meta description

25:25 Add hashed HTML URLs

26:57 Hash-based routing

32:05 Testing both methods

View on GitHub: https://github.com/thedevdrawer/spa-routing

Join this channel to get access to perks:

https://www.youtube.com/channel/UCcr8eSk5xCfn3AbYy8WOWzg/join

Become a Patreon to show support and get exclusive access to content: https://www.patreon.com/devdrawer