Build a Single Page Application with JavaScript (No Frameworks)

View the Code & GitHub Repository:

In today's video I'll be showing you how to build a Single Page App using JavaScript without the need for any front-end frameworks. We'll be implementing client-side routing ourselves from the ground up.

This is perfect for any small-to-medium sized website or app.

LINK TO PART 2 📺:

🏷️ THE ULTIMATE JAVASCRIPT DOM CRASH COURSE 👇

Support me on Patreon:

Follow me on Twitter @dcodeyt!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript #webapp

[alexandre]

The reason why i don't use framework like React and others is because i was waiting for this kind of tutorial to understand how it works under the hood.Thank you very much

[ryugavegeta]

These JS projects which you have uploaded is art.People dont watch this stuff thinking they would be reinventing the wheel but actually we are just trying to customize the rims. If that makes sense these projects teach you everything from scratch i.e debugging, internal working which many people are unable to understand .Kudos to you mate.

[TomasMisura]

This tutorial is one of the most useful for those who wants to do front-end development for his living as this is one the common question during interviews meaning how to make single page web app using javascript with no framework.

[GamesForDays]

As a student working on creating an SPA for the first time, this was extremely helpful and straightforward. Allowed me to understand what I was working on while giving me a foundation of what the JavaScript was doing, helping me follow what I was making and actually understand the code!

You're a lifesaver!

[psychonighty]

I am a full stack web developer for 4 and a half years now and been doing project throughout the entire time. I can tell you from everything that I learned, this is by far one of the best and most simplefied explanation, I wish I learned Javascript this way when I just started as it would save me so much time and help me understand the main ground and the "how" and not the "why".

Great video and straight to the point

[CalifornianViking]

Bravo!
I just love this video. It is clean and using the tools the way they were intended to be used without loading unnecessary frameworks and modules.
All real web browsers now support ES6. There is no need to use all these tools that dumb JavaScript down to the lowest common denominator.
Thanks!

[dcode-software]

**IMPORTANT:** Use port 3000 over 5060

As many have pointed out in the comments, it's recommended you go with a port number other than 5060 as referenced in this video.

[sethyta]

*here are the basic points*:

# Server:
Restrict responses:
- return requested file for static/* requests
- return index.html for everything else

# Browser
1) Override default navigation behavior:
- Single click handler "up high" on the body.
- If the event target is "one of the navigation links": prevent default and push history.
2) Listen for history changes:
- Create a lookup table that couples routes with markup.
- When the route changes, find a best match in the table and dump its markup into the dom.

*congratulations* you just saved 40 minutes of your time.

[netty]

in case other people have issues...I was only able to see the app running on port 3000 not 5060 (not sure why), so just change 5060 to 3000 in server.js

[dcode-software]

If you enjoyed remember to Like and Subscribe for more web development projects and tutorials! 🙂

[tmibtruemakers]

That was so much value in 30 minutes for someone that understands basic js but not it's practical use. Thanks a lot

[gregoryam]

While I have dabbled in web development for a while now (10+ years). I've been looking for a way to create Single Page Applications for an idea that came to me and couldn't find an easy-to-follow tutorial that used only Vanilla JS.

A lot of them used React or another Frontend and Backend Framework that was a bit too confusing for me to follow.

I've been searching the internet for the last few days for a tutorial and just came across this video! Honestly, I can now say "I have finally found a tutorial that matches exactly what I need".

Thank you, Dom.
Your tutorials are awesome!

P.S. I've just watched 3 of them because I genuinely enjoy your teaching style.

Edit: If there isn't a tutorial already on your channel (besides your PWA tutorial). I think you should create one for creating a PWA + SPA, allowing for offline caching and installability for a Single Page Application.

[dcode-software]

❗PART 2 OF THIS VIDEO ❗

🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇

[fabian]

I don’t usually leave comments, but this is exactly what I was looking for. Very easy to follow, thank you!

[sirnawaz]

I really loved this small demonstration of the building blocks for single-page applications. I got some basic ideas as to how frameworks like React, Vue and Angular actually work under the hood.

[andy.]

The last and elegant step you should make is to use HTML template elements instead of returning strings containing HTML code, because using templates you're able to edit page layout with support of all these cool editor features (at least to speed up process and avoid syntactic mistakes).

[TomHermans]

Awesome tutorial. Gives a very clear under the hood look on how these things actually work, with plain vanilla JS and without becoming confused by framework specific methods. Subscribed to the channel.

[jogoeire]

I'd better amend my comment. It's a great tutorial. Yes the first 11.30 mins are setting up Express Framework routing to serve the HTML... but then it gets down to business and explains the client-side part really clearly -- better than other material ive read. I can see how the first 11 mins are useful for context. Watch this tutorial

[kosmotion]

5:28 For the ones who get confused why their npm is not working! you have to install node js to your pc or mac, and after that, you may need few extensions. you can search other tutorials if you still dunno what to do. Just type to youtube Install NodeJs to VScode and you will find solutions.

[robwatson]

"No frameworks"... installs npm with express. Perhaps the "server side" could have been separated a bit better so it's clear that's all you were doing.

After watching the entire video, though, it was really interesting. I particularly like the data-link and global click handler, I use that frequently for all sorts of interactions with dynamic html.