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

View the Code & GitHub Repository:
dcode.domenade...
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:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
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

[@netlity5532]

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

[@मेबीराज]

Did you find any answer to 2nd question?

[@chubbyBunny94]

i think these are pretty straight forward questions but yo, you've got chat GPT

[@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!

[@dcode-software]

Appreciate that! Yes I've got a video on PWA but it could be an idea to combine the two 🤔

[@fellipelorram4341]

Definitely should do it

[@AyushSinghxda]

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

[@braddockbrawler]

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

[@braddockbrawler]

1 month, no answer. This channel must be dead. Too bad, i liked it.

[@slackergeek2007]

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.

[@RashidAli-oc1sr]

Watch first part he told us about 404

[@atleast_me]

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

[@Jangeroo]

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

[@amirhosseinveysi9546]

Changed my life sir, tnx for making this video

[@ginanjarseladipura3980]

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

[@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!

[@kamoroso94]

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

[@Rm-ey8xe]

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

[@vernatley221]

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?

[@gustavoexel]

Great video series, tks!!! One question: why don't we consider building the URLs with queries as "/posts?id=2&dcode=35" instead of "/posts/2/35" ? It'd be much clearer and easy to parse! Is there a definite reason why it's best not to use queries on SPA URLs?

[@blarvinius]

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

[@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!

[@dcode-software]

Appreciate it! Thanks Kayla great to see you enjoyed

[@netlity5532]

@@dcode-software 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

[@fomofonk]

Very informative videos (both 1 & 2)! I do have 1 question (and it might be a stupid one), how do you go about adding an actual post (like the ones shown at the beginning of this video)? (please excuse the beginner in me!)

[@socialpeople6615]

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

[@brandonjaus494]

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

[@amguruprasath8037]

Man we need a full-fledged framework tutorial

[@dcode-software]

Now that could quite possibly be re-inventing the wheel! Haha

[@arshiagholami7611]

@@dcode-software I see nothing wrong here

[@robwatson826]

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.

[@compsguru]

Thanks for the tutorial , the first video was great . I just wish you didn;t get into the Regex area of it because it felt too advanced for the kind of people (me included) who are just starting off .

[@koitaki]

"Some people, when confronted with a problem, think ‘I know, I’ll use regular expressions.’ Now they have two problems." - Jamie Zawinski But for those confused, Dom has a good video on RegEx at kzbin.info/www/bejne/d6PbgK2bdrSBfsk

[@2005Azm]

Simply awesome !

[@KostasOreopoulos]

With a few tweaks it can be made easier to understand and more compact we have as in the code const pathToRegexForValues = (path) => new RegExp('^' + path.replace(/\//g, '\\/').replace(/:\w+/g, '(.+)') + '$'); and we can define const pathToRegexForKeys = (path) => new RegExp('^' + path.replace(/\//g, '\\/').replace(/:\w+/g, ':(.+)') + '$'); which does almost the same but leaves out the : from the regExpression with the intention to capture just the name So now when we match we have return { route: route, matchedParamValues: location.pathname.match( pathToRegexForValues(route.path) ), // this is the same matchedParamKeys: route.path.match(pathToRegexForKeys(route.path)), // here we go the path we are looking for '/posts/:id' and extract everything after the : // for each occurence of : }; Everything else is the same. Now we go to the getParams function and we will have values = match.matchedParamsValues.slice(1) ; // since we renamed result to matchedParamValues keys = match.matchedParamsKeys.slice(1) ; and everything else stays the same.

[@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?

[@wewiwowo42]

Thoroughly enjoyed this video and found it very helpful thankyou. I did get stuck however with the pathToRegex. I get the following error when I try to go to localhost:5500/posts/2 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. did anyone come across this ISSUE SORTED ALL GOOD

[@daredevil_37]

getting the same error, how did you manage to solve it?

[@rogerchan548]

Having th same issue. How did you solve it?

[@Alex-bc3xe]

Indeed now it makes sense ...

[@tangkasr2132]

Hi and thanks for the great vid! I learned a lot in this tutorial :) But I have one problem with my code. If i try to access to the /posts/:id route in my browser search bar I get a MIME Type error. If I am accessing it via link tag in my html it works totally fine. What could be a potential mistake I did?

[@AleksandarIvanov69]

So you if got an array of posts, you use this to populated the data from the array into the Post view, matching the post by id ?

[@dcode-software]

Yep, pretty much!

[@vuejs1]

What patterns are you using in this vid?

[@russianstan]

Thanks! It's just amazing!

[@dcode-software]

All good!

[@netlity5532]

@@dcode-software 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

[@vladosononame6376]

this video is piece of gold in sea of internet shit, works fine! good foundation!

[@nicolaschvostal]

Why switching between dashboard posts and settings does not work for me, the dashboard will show, but when I press posts or settings it will show cannot get / posts or / settings. Thank you for support.

[@Mickey_McD]

How might you extends your framework to handle form input when each view could have its own form? Maybe each post could allow for a user to add a comment?

[@relaxingmusic6280]

Maybe use Ajax🤔

[@aguileraq]

Great video. I really hope you can complement this SPA with firebase auth, it will be great. Thanks!!

[@arqasr]

Hi, I love the two SPA videos, but I get stock. How I access the individual posts having a link on the Posts page? Do I need to create an individual file for each post? how?

[@05060024]

Hi. I'm getting a strange behavior. If I insert a link inside the HTML returned by PostView.js, clicking on it shows the post as expected. However, if I enter the same URL localhost:5060/posts/23/4 in the address bar and hit enter, I still get one post displayed, but without any styling. When I look at the index.css returned in the Dev Tools, it has the contents that we put in index.html, instead. Any idea why this is happening?

[@wewiwowo42]

Hello I have this exact issue Did you figure it out?

[@wewiwowo42]

In dev tools as well as the index.html being loaded into the index.css the JS folder is not being laoded at all?

[@wewiwowo42]

Hey buddy I fixed this issue in the end. It was due to the folder path syntax. instead of using just static/css/index.css for the href in the style sheet. re. begin the file path with ../ example

[@shvrolet]

i have one question. when i go /post/2 that's work but when i refresh the page all css is gone.Why that's happening?

[@ГеоргиЧавдаров-в7з]

You are awesome! You are master!

[@Thanveershah]

Is it a good practice to use SPA in Vanilla JS ? Looks so much complicated

[@dcode-software]

For small projects, possibly - it's up to you. This is more for learning purposes 😁

[@netlity5532]

@@dcode-software 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

[@chimsgraphic]

Great video. How do I consumean api and pass to the view?

[@erfelipe]

Thanks

[@_.sunnyraj._]

Please make a video on passport login using node

[@romuloalves9349]

Ótimo vídeo parabéns 👏.

[@urekmazino2086]

Anyone else has the .matchAll(...).map() is not a function

[@youmee8956]

Would i get request and response (req, res) in routes path?

[@rangabharath4253]

awesome

[@iglesiasleonardo1742]

What if you need integration with a database? How will you manage both client and server-side? It can't be an app if it does not have any dynamic content

[@hartono9583]

need tutorial how to run js script and fetch api in page example product.html ?

[@amezan7777]

HI, great video! But I didn't understand how to add posts. Could you explain? Thanks :)

[@braswelljr]

finally

[@maheshYchhetri]

My page getting error when change route to /about and reload the page How can i fix this?

[@olutolamoses4416]

I am having issues accessing the view pages In the dom. please assist

[@mr.o5577]

Hi Dom sorry to bother mate but I have a bit of an issue, can you help? I built a SPA just like yours but now I face the deployment problem, now, how can I deploy a SPA just like the one you build on netlify or heroku? My problem is that the app has a backend where the routes are and the app needs it in order to hit the routes, i deployed all the files to netlify and heroku but no good, what to do? If anyone besides Dom in here knows please help me I am at lost.

[@Jangeroo]

What the router misses tho: route /posts/:id fully blocks /posts/:id/addComment

[@amguruprasath8037]

how many more videos in this series?

[@dcode-software]

As for right now, this is the last one.

[@mingmeng030]

This is perfect tutorial for me! But I have an issue. My router works fine, but when I switch the page to postView, css isn't being applied at all. Does anyone know about this issue?!

[@wewiwowo42]

I have this same issue Did you find a dix

[@mingmeng030]

@@wewiwowo42 not yet,,I searched everywhere but there’s nothing can help me. I think it can be react’s error

[@wewiwowo42]

@@mingmeng030 I actually figured it out. It was the syntax for me with the link ref for the style sheet. I had to use ../ at the start of the file path. Instead of just static/css/.index.css try ../static/css/index.css

[@mingmeng030]

@@wewiwowo42 omg you saved me!! It also worked at my issue!! Thanks:)

[@wewiwowo42]

@@mingmeng030 awesome.

[@5ikronoz]

รอ SPA #3 อยากรู้ว่าจะนำข้อมูลจาก data base มาแสดงใน SPA นี้ยังไง

[@mohamedshehata3979]

how can i find Github Repo??

[@richardprakash4630]

how do we handle JS in the views? example click event of a button

[@casm101]

I've been making a site with this SPA method, and the solution is actually quite easy, after you run the router function on after the dom has loaded, you just need to run a function to apply your event listeners to current page, you can even pass the current path through the new function as a parameter to only load certain event listeners depending on the view you are loading!

[@devindickerson9699]

@@casm101 any chance you could tell me more how you handled the event listeners? I've been building a site with this method also and I'm am struggling with the event listeners for the views.

[@casm101]

@@devindickerson9699 Hi, of course! I did it the following way: I have a separate file where I manage ONLY event listeners (for comodity, but you don't have to) and all the listeners are wrapped in a window.onload function to make sure they execute when everything is available, and inside I separate my listeners in groups that check if they correspond to the current site path, if so, they run, if not, they don't! Another way is to check if the element you wish to apply the listener to is visible on screen or not, which may be a better technically, depending on your application... Sorry for the late reply

[@wewiwowo42]

@@casm101 any chance of sharing the code you wrote for passing event listeners to the current page, I'm getting stuck trying to wrap my code in a window onload event function. I am still learning JS,. I keep on getting ye old 'cannot read properties of null'?

[@wewiwowo42]

Actually I fixed the Null reading error. for the window event listener. Though I am stuck on how pass the page path through so the click event wrapped inside works THIS IS my Code for handling the event I a huge Noobie. NAy help could be appreciated. window.addEventListener("onload", () => { if (route.path === ("/article")) { const techbtn = document.getElementById("techbtn"); const techinfo = document.getElementById("techinfo"); techbtn.addEventListener("click", () => { techinfo.classList.remove("nonvisible"); techinfo.classList.add("visible"); }); } });

[@KostaTsourdalakis]

First! YADIGG

[@anjanspace]

Hi , I am having problem in loading multiple HTML pages . Can you please help me. Is there any possibility of connecting with you via google meet. Pleaseeeee

[@adityamalviya5113]

Very Informative video . Really very nice concept implemented . I am trying to make a web application referring your video . Thank you for the video . Trying to implement there's a problem came in front of me , When I navigate to dashboard/0 , the address of all static files changes . Mean to say , when the url is 'localhost:5000/dashboard/0' , then Images , css files which are having path 'localhost:5000/static/images/abc.png' changes to 'localhost:5000/dashboard/static/images/abc.png' , hence image doesn't displays in 'localhost:5000/dashboard/0' page . I just wanted to know , why this is happening ?

[@dcode-software]

I made a video on this a while ago: kzbin.info/www/bejne/nIvNfJZooLJ-j7c

[@adityamalviya5113]

​@@dcode-software Thank you for the reply . I now got understood what I was doing wrong . Thank you .

[@adityamalviya5113]

I came up with another question If you don't mind , I wants to know how to deploy this app on firebase . Having server.js and index.js both running . I hosted it on firebase the simple way any normal website is hosted . And after hosting it I found that index.js is running and server.js file is not running because redirecting after login failed which should reach to server.js . Instead 404.html is called . Observing this I can say that server.js is not running . How to host the application such a way that server.js should run along with index.js ?

[@yashrajjaiswal9941]

🙏

[@_.sunnyraj._]

Second !!!!!

Where i can download the code?

[@heruhailiuhuang533]

Nice vieos.

[@devindickerson9699]

looking for anyone who know how to add event listeners to the html in each view

[@zakur0hako]

i guess this is not for beginners. regexp part is confusing as hell

Sorry but second part is really complicated

[@ashiqurrahmantahmid9634]

All I hear is right here xD

[@remco_smits]

`no framework` NODE JS IS A FRAMEWORK DOGGGG

[@christianf7740]

"new match.route.view" - this is why I prefer typescript. So confusing.

[@aguileraq]

Great video. I really hope you can complement this SPA with firebase auth, it will be great. Thanks!!

[@marcelm7661]

Hi and thanks for the great vid! I learned a lot in this tutorial :) But I have one problem with my code. If i try to access to the /posts/:id route in my browser search bar I get a MIME Type error. If I am accessing it via link tag in my html it works totally fine. What could be a potential mistake I did?