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

[@DevDrawer]

Don't forget to check out the code on GitHub if you are having issues. After you watch, let me know which routing method you prefer.

[@Alex-gn3vm]

Good day! Thank you for this content! It `s the best what i see about vanilla JS! But i have one moment. When i change page, some javascript and jquery dont`t work. Can you say how solve the problem of work another scripts? Thank you!

[@DevDrawer]

So you have to keep in mind that this script pretty much runs everything 1 time so if your "Query or JS " element being referenced is not loaded on the page you are on first, then the JS does not see it. For example, if you load the home page, the script will run. Once you click to the about page the script has already run but now you have a button click event coded, well that button did not exist on the first script run. You can get around this by adding your events for other jquery or js into a DOMContentLoaded event listener. For example: document.addEventListener("DOMContentLoaded", () => { $(function(){ document.querySelector('#test').innerHTML = "test"; }); //run router again }); I have not tested the code, but basically your code is no longer loaded because $(function(){}) is loaded on page load so any functions or events contained within that are not being run because the content of the page is dynamic and not being refreshed. Lastly, keep in mind this SPA routing is for simple applications so if you are trying to integrate this into a larger or more complicated project it may fail. The goal was to create a simple router without a framework. In your case, you may need a framework that can handle DOM manipulation.

[@robertoportfolio1378]

Yes finally... a person who can code in Javascript and not using frameworks and libraries

[@DevDrawer]

Glad you liked it. I honestly use frameworks too but vanilla js is just as powerful if you know how to use it.

[@solomonnwabuoku162]

Watched alot of tutorials on routing but didn’t understand till i came across yours. Dope stuff

[@DevDrawer]

That's awesome. I am glad you learned something.

[@de_castilho]

dude, this is the best video that i saw about simple js SPA.

[@DevDrawer]

That is awesome to hear. Thank you.

[@EduardoLopez-us5gs]

Thanks man!, Learned a lot, simple and to the point on vanilla!

[@DevDrawer]

That's awesome. Thanks for the watch

[@CoreDreamStudios]

Subscribed! This was very useful and a good way to get started in vanilla JS with this kind of templating.

[@DevDrawer]

Thanks for the subscribe. I am glad you liked the video.

[@ariel18012]

Muy buen video amigo, para entender JS sin el uso de framework esta excelente, ojala puedas agregar traducción al espaniol en tus videos, sigue así.

[@DevDrawer]

Gracias por ver y aprender algo. No hablo español, así que no sé si puedo traducírtelo. Lo lamento. Traducido de Google.

[@1RRaider]

How would you handle dynamic styling and global styling ?

[@pioteragalakov]

Thank you for this, straight forwards .

[@DevDrawer]

Glad you liked it. Thanks for watching

[@ilkoto]

Its looks nice, but what will happend on SEO with this technique? Can we make SSR with Vanilla JS also?

[@stadtminish3219]

Thanks for your script. I can use this well for my applications. But I'm a little confused. I always read that you should avoid global variables. But it seems to work so much easier. Unfortunately, when I tried to convert my Javascript code into modules, I failed miserably. It would be interesting to see a modular router.

[@kittcheung8424]

I went and tried to do this for my webpage but it didn't work. Whenever I click on (in my case) "Products" it shows that message you were mentioning about "Cannot GET templates/products" what did I do wrong? I followed the video.

[@DevDrawer]

If you are using the URL Routing method, you need to make sure you have your .htaccess handling the index.html render. The URL method only works if you are telling the server that it needs to display all content in the index.html file. I give 2 options: URL and Hash. Only the URL method requires this. There are some downsides to using this method. You need to configure the webserver to serve the index.html for SPA Route Paths. You can do this at the server level but if you are using something like VS Code LIVE SERVER, you cannot. This means if you navigate directly to /about the server will not render the file as it needs to load the index.html scripts first. You can modify your .htaccess file to accomplish this. Try adding something like this to your .htaccess file: DirectoryIndex index.html This will force your server to see the index.html as the directory file. If this is not possible, the second method using hashing may be better for your situation.

[@WallyAtkins]

Would you mind posting an example of a .htaccess on the GitHub repo when you get a chance?

[@DevDrawer]

I added a simple htaccess file to the repo: github.com/thedevdrawer/spa-routing You turn on the rewrite engine, then add symbolic links and multiviews, then finally, rewrite everything to index.html. If you want to learn more tips and tricks with your htaccess file, you can find it in these videos: Video 1: htaccess, Directives You Need to Know: kzbin.info/www/bejne/o3WWm6V-j5iai9k Video 2: htaccess, Advanced Tips and Tricks: kzbin.info/www/bejne/l4aXaayHfc1sp5Y

[@d-a-m-i7439]

you have a +1 subscriber today 🥰🥰🥰

[@DevDrawer]

Thanks, I am glad you liked it

[@Chlorine-DB]

I'm no expert when it comes to Js but i'll ask anyway, is there any reason why you used the || operator instead of the ?? operator here 08:20? as far as i know it's better to use this one '??'.

[@DevDrawer]

They both kinda do the same thing in this instance so it is probably more of my background in PHP bleeding over. It would be better to use the ?? usually since it chooses left or right depending on null values but like I said for this instance either would work.

[@Chlorine-DB]

@@DevDrawer That makes sense, i just had a doubt, thanks for responding!

[@GerunMatt]

In mozilla's JS documentation said that "window.event" is decprecated ..

[@DevDrawer]

That is more of a fall back and can be removed as it will most likely not have been used in the execution of the JS anyway. Good catch.

[@simonnsolomon]

@@DevDrawer the tutorial is helpful and I liked it, however I faced the same problem and I tried removing window.event but it doesn't route to other pages, can you please help?

[@TimeStampHero]

Thank you!

[@DevDrawer]

Then you for watching

[@riccarrasquilla379]

thanks for the tutorial

[@DevDrawer]

No problem glad you enjoyed it

[@toba-bonjour]

Thanks man! Will I get errors when attempting to input a URL to go to a page ?

[@DevDrawer]

You shouldn't. It should load based on the route.

[@Alex-gn3vm]

Good day! Thank you for this content! It `s the best what i see about vanilla JS! But i have one moment. When i change page, some javascript and jquery dont`t work. Can you say how solve the problem of work another scripts? Thank you!

[@DevDrawer]

So you have to keep in mind that this script pretty much runs everything 1 time so if your "Query or JS " element being referenced is not loaded on the page you are on first, then the JS does not see it. For example, if you load the home page, the script will run. Once you click to the about page the script has already run but now you have a button click event coded, well that button did not exist on the first script run. You can get around this by adding your events for other jquery or js into a DOMContentLoaded event listener. For example: document.addEventListener("DOMContentLoaded", () => { $(function(){ document.querySelector('#test').innerHTML = "test"; }); //run router again }); I have not tested the code, but basically your code is no longer loaded because $(function(){}) is loaded on page load so any functions or events contained within that are not being run because the content of the page is dynamic and not being refreshed. Lastly, keep in mind this SPA routing is for simple applications so if you are trying to integrate this into a larger or more complicated project it may fail. The goal was to create a simple router without a framework. In your case, you may need a framework that can handle DOM manipulation.

[@ashrafulrahmansakil9612]

Nice

[@DevDrawer]

Thanks

[@valentinav8585]

Great! Amazing! But how do I go about adding more JavaScript? Let's say I want to add an alert in one of the pages or whatnot, or fetch some items from a JSON and put them in another page ..using document.querySelector doesn't work, I guess it's because the page needs to load first 😥 I feel like I must be missing something but I can't figure it out So close to giving up and just going for react instead 😪

[@DevDrawer]

So you have to keep in mind that this script pretty much runs everything 1 time so if your "Query or JS " element being referenced is not loaded on the page you are on first, then the JS does not see it. For example, if you load the home page, the script will run. Once you click to the about page the script has already run but now you have a button click event coded, well that button did not exist on the first script run. Try something like this: document.addEventListener("DOMContentLoaded", () => { document.querySelector('#test').innerHTML = "test"; //run router again }); I have not tested it, but that should put you in the right place to have the JS listen for document changes. I hope this helps.

[@valentinav8585]

@@DevDrawer ay thank you I will try later on! Did my thing in react for now but Im definitely eager to work more in vanilla for simple projects!

[@mauriciolaratro]

Good day bro! First of all, thanks for the content and the good explanation. I tried to apply the solution you gave above to the problem with scripts on pages other than home, which worked for me but for it to work I have to go to the page that has the content that I point to with the script and refresh the page. Would you know what could be the problem and its possible solution?

[@DevDrawer]

I added this as another comment but maybe it will help you: So you have to keep in mind that this script pretty much runs everything 1 time so if your "Query or JS " element being referenced is not loaded on the page you are on first, then the JS does not see it. For example, if you load the home page, the script will run. Once you click to the about page the script has already run but now you have a button click event coded, well that button did not exist on the first script run. You can get around this by adding your events for other jquery or js into a DOMContentLoaded event listener. For example: document.addEventListener("DOMContentLoaded", () => { $(function(){ document.querySelector('#test').innerHTML = "test"; }); //run router again }); I have not tested the code, but basically your code is no longer loaded because $(function(){}) is loaded on page load so any functions or events contained within that are not being run because the content of the page is dynamic and not being refreshed. Lastly, keep in mind this SPA routing is for simple applications so if you are trying to integrate this into a larger or more complicated project it may fail. The goal was to create a simple router without a framework.

[@mauriciolaratro]

@@DevDrawer Yes, this is the solution I tried to apply, after seeing your comment. But it only works once the page is reloaded. Would you know what could be the problem? Maybe I'm just misapplying the solution script, sorry for the inconvenience.

[@Potato-h2w2s]

how we can implement an individual detail page for example for many posts?

[@DevDrawer]

This is more for simple page routing. In order to use more dynamic routing, you would have to modify the script to handle variables like ID or page name. This script is more 1-to-1 routing. It is possible, but honestly, if you are looking for something with dynamic routing it may be better to use something like React or Vue. Once you get into dynamic variables, it complicates the vanilla JS part of it 1000%.

[@Potato-h2w2s]

@@DevDrawer thanks a lot!

[@DevDrawer]

Sorry I wasn't more helpful, but hopefully that points you to the right path.

[@jordanfox3782]

This is great, but then how would we link a different javascript file to each html page so we could have an actual application logic instead of just views?

[@DevDrawer]

I answered this in another comment, but it may help you as well: So you have to keep in mind that this script pretty much runs everything 1 time so if your "Query or JS " element being referenced is not loaded on the page you are on first, then the JS does not see it. For example, if you load the home page, the script will run. Once you click to the about page the script has already run but now you have a button click event coded, well that button did not exist on the first script run. You can get around this by adding your events for other jquery or js into a DOMContentLoaded event listener. For example: document.addEventListener("DOMContentLoaded", () => { $(function(){ document.querySelector('#test').innerHTML = "test"; }); //run router again }); I have not tested the code, but basically your code is no longer loaded because $(function(){}) is loaded on page load so any functions or events contained within that are not being run because the content of the page is dynamic and not being refreshed. Lastly, keep in mind this SPA routing is for simple applications so if you are trying to integrate this into a larger or more complicated project it may fail. The goal was to create a simple router without a framework. In your case, you may need a framework that can handle DOM manipulation.

[@mohammedshamil1626]

@@DevDrawer Could you please elaborate this answer? I have developed a simple tax calculator app and acheived routing thanks to your tutorials\, but now my Javascript logic for calculations is not working, also cleave.js which I had included to the project is not working too :(

[@moxopixel]

How does this work with hosting in a subfolder?

[@DevDrawer]

Should work the same way using a script src relative to the subfolder. I have not tried it like that but I would assume it would work as is or with slight modifications to the routing.

[@d-a-m-i7439]

wait a min, client side routing is possible with vanilla JS?

[@DevDrawer]

Yes, but for simple stuff. Having parameters makes it more difficult but even that is possible. Frameworks are better for more complicated setups but it is possible to do it in vanilla 😜

[@wutkeks4063]

What is that symbol at 14:34?

[@DevDrawer]

It is two pipes || (commonly used for OR). Sorry apparently my mouse hovered over it while I was talking.

[@Mobilemaniaplays]

What is the name of font you are using in vs code

[@DevDrawer]

I use Fira Code with ligatures.

[@alditarakez]

How to styling ?

[@DevDrawer]

I'm sorry, I don't understand your question.

[@danaililiev1404]

algorithum hack

[@DevDrawer]

I'm sorry but I don't understand what you mean.

[@chchab]

Your code is very interesting but if the window.location.pathname is like /xx/yy/about it's doesnt work the location.length!=0

[@DevDrawer]

Maybe I am not understanding your question or that you have location.length != 0, where I have location.length == 0 but I cannot replicate your issue. If I go to example.com/xx/yy/about and run window.location.href.length in the console, I get 31 which would be greater than 0 so it would continue to process. Having said that, this tutorial is more for simple /pagename sites rather than /x/y/pagename sites. I did not test it for something with 3 sub pages in the URL so the code may not work at all for that type of URL because it was not developed with that in mind. Honestly, I don't know if the code would work with that structure since I did not develop it with that in mind. Your project may be too complicated for how the code currently is. I am sure there can be modifications made to make it work with a deeper link structure, but I don't know just from looking it at currently.