Adding Client Side URL Params - Build a Single Page Application with JavaScript (No Frameworks)

View the Code & GitHub Repository:

In today's video we'll be picking up where we left off from the last one on building a Single Page App using JavaScript. This one involves adding client-side URL parameters.

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

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

[netlity]

Very nice tutorial both part 1 and 2! I have understood quite well. I have a few questions though:
1. How to add a loading progress in case a view takes longer to be loaded
2. How to load a view which has some custom scripts and CSS files links in it

Answers to these two questions will be much appreciated @dcode

[AyushSinghxda]

After all these years of SPA, it finally makes sense how things work under the hood. Great work!

[flexDevelop]

This is probably the most well done/explained video tutorial about SPA I've found in 2020. It's worth to mention the difference of how JS is processed on frontend JS files when compared with the server.js file (stuff such as require, etc). It would be also cool if you could do PWA integration (storage/websql).
Keep up with the awesome work!

[slackergeek]

These 2 videos were great. I would love to see a continuation with the following: 1) pulling the HTML from there server using Fetch and a loading overlay and 2) rendering a 404 view for invalid routes. Or at the very least redirect back to Dashboard when the route is invalid.

[amirhosseinveysi]

Changed my life sir, tnx for making this video

[ginanjarseladipura]

this tutorial should have thousands of likes. thank you for doing this!

[atleast_me]

Long live js king 👑. This is the ultimate explained video I've found on YouTube

[ThaRealIansanity]

This is great! I've been learing react but for academic reasons I was working on a static site with alpinejs that uses the fetch api with laravel sanctum. After several frustrating days I managed a successful login but it is still just a static site. I think with all I learned from you I can move forward and make it an actual SPA. Thank you!

[Rm-eyxe]

Don't worry you still explained it well, Thank you very much for this great tutorial!

[Jangeroo]

Really really great video. Also a great reminder to finally learn regex, it’s nothing but gibberish to me

[kamoroso]

For the pathToRegex function, you could use named capture groups to avoid having to extract the names again from the path in getParams.

[braddockbrawler]

A third part would be nice, in which you connect to mysql, create posts, save posts and delete posts.

[socialpeople]

Fantastic tutorial! Very good explanation, good design and valuable material. Thank you!

[vernatley]

Great video and excellent teacher, for understanding how react works under the hood you leaves me feeling a little wiser. Ive one problem after following along. Dont want to just use your free code to understand why and how the problem exists. Everything is working exactly how should do apart from sometimes or mostly all times when traversing between links, the page is refreshing. Anyone?

[yumdiddlyum]

Great tutorial! The regex stuff is a bit over my head currently but you explained everything else clearly enough that I got a good overall idea of how it all works. Thanks for the video!

[brandonjaus]

Wow this was great! Thanks for the quality tutorial man; absolutely eye opening.

[robwatson]

Now this has some clever stuff in it. I've always wondered but never actually looked into a client side routing engine before. Really good informative video and a nice solution.

I didn't quite understand why right at the end you threw in that [location.pathname]? Seemed a bit rushed for no reason.

[amguruprasath]

Man we need a full-fledged framework tutorial

[blarvinius]

Very clear and thorough. Thanks! (You move rather quick, so it might be nice to have your mouse cursor highlighted...)

[jeffreyclaybrook]

I'm trying to loop through an array of restaurant menu items (Posts) and dynamically generate a unique item details page (PostView) for each item rather than manually creating a PostView file for each item and was wondering if you could point me in the right direction for learning how to best implement this. This begs the question -- have you considered making a part 3 to this series of tutorials?