Build a Single Page Application with JavaScript (No Frameworks) 

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

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.

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

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.

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!

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!

**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.

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.

*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.

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

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

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

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.

❗PART 2 OF THIS VIDEO ❗ ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-OstALBk-jTc.html 🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇 www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

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

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.

Who likes the new video intro? 👀

I work with node js since 2016. One of the best tutorial I've ever seen.

I watched this video back in 2020 and understood nothing, watched it now again and have had like 20 WOW-moments haha XD! AMAZING WORK!

Awesome Video through this i got to know how react, angular, vue are working

Backend developer here trying to learn some basic front end stuff. I started with React, learned a little about redux and routers, and got so tired of writing and learning so many different things, so I just gave up and thought, lets do it the old fashioned way. Tried and tested. Thank you!

Hats off to the creator! If you're looking for the most straightforward and hands-on frontend project tutorial, this is the video you want to follow. Seemingly complicated concepts are explained in the simplest terms, and you can tell that a lot of time and effort went into creating this video. I would recommend watching this before diving into React development!

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

by far the best expanation tutorial ive seen, strait to the point but doesn't skip any reason

This is the best tutorial on SPA ive ever come across on my entire WebDev journey. Thank you so much.

"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.

This video is gold, deserves more views!

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).

To fix error 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, modify server.js: express.static(path.resolve(__dirname, "frontend", "static"), {extensions: ["js"]}

dcode. Sir. Your tutorial is very simple and clear when someone no experience in SPA. Thank you. 😊

Amazing tutorial, very informative, very well prepared.

What would be nice is to show how the core of modern frameworks works, being 2 way data binding via proxy objects Virtual Dom using DomParser SSR hydration using DOM diff utility Modern bundler such as vite Dependency injection using TS inversify It can be done and really nice to break down all the hype we get around the big 3 which is mostly corporate driven but unfortunately affects everyone when we come to our next interview and often so called senior devs forget the most important thing which is the fundamentals :)

well done dude. i always knew it was possible, and i wanted to build something that is simpler and without stupid frameworks lol

20:00 The video is starting really informative for me personally from here since this is basically modern JS frameworks are based. Can we just appreciate how much effort this guy put in his video preparation just to let his mouse dided in the process?

this is one of the best channels for understanding the web. Love your work brother :)

THE BEST VIDEO EXPLANATION ABOUT SINGLE PAGE APPLICATION. thank you so much for sharing 🙌

Amazing 😀. I’m building an open source single page server side rendering framework using this tutorial.

This tutorial deal with every aspects of what we can do with javascript. short but mighty tutorial, Thank you for sharing this!

Congratulations, Dom! Your content is one of the bests. I can't let to watch every video that you post. Thank you very much!

Posts.js:1 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. 32:23 by this time I'm following and coding, and I get the error. How do I solve this?

To the point, very informative - I pray channel grow more and more. Waiting for the next video in continuation to this tutorial.

Thank you for a great presentation. I am a returning UI developer, out of touch with React/Angular etc. Wanted a barebones intro back in JS, and Node. This was perfect for me!

I finally see the light! I've been cramming React thinking it was the only way to do this. Since watch your videos I've scrapped all React learning to focus on pure JS. Thanks

Thank you very much for your great javascript tutorials DCODE... Great clean knowledge !

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.

How concise and simple! Thank you very much!

Man you have pretty good tutorial on vanilla js. Learning a lot from you. Subscribed ✌️

awesome! i've been looking for this kinda lecture! thanks a lot ! mr. vanilla!

Thank you very much! this was very helpful to me and to a lot of people out there

Awesome tutorial. You are a such a great javascript developer 😍

Really enjoyed the video! faced a few hiccups with it but learned much more! Thankyou😀

Awesome tutorial, would be great to have same with explanation how to use server-side rendering of HTML Templates or load html file as a content for each views ;)

this is actually mind blowing, thanks How did you figure out how the frameworks work, in first place?

Dom you are an Aussie Legend!

HUGE THANKS, this really helps my javascript skills,

You're the man! This is just what I have been looking for. Excellent tutorial.

Great video at the right time! My company wants me to write an article for their blog and as topic I want present some Web APIs. Therefore I want to write an preparing article about transforming a "normal page" to an PWA on which I can implement more and more Web APIs afterwards to make the site more "app-like". To adress a bigger audience, I am currently implementing a small project in JavaScript only (I am not that experienced and Frontend-coded only with Angular yet, so using vanilla Javascript is not that easy for me). That's why your video comes right on point! Thank you for the detailed explanations.

thank you for the clear explanation!

For people wondering why the initial render is not triggering the router method, you need to call it as soon as the DOM content is loaded. like this -> document.addEventListener("DOMContentLoaded", () => { router(); { if(e.target.matches("[data-link]")){ e.preventDefault(); navigateTo(e.target.href) } }) })

Thanks it will helpful for me as a beginner in JS👍🏻

This is an eye-opener how JavaScript works under the hood

Thank you, this is so elegant

Very clearly described! Thank you for your work.

it's important to import views with file extension *.js like so: import AbstractView from "./AbstractView.js"; because for me: import AbstractView from "./AbstractView"; - auto generated by VSCode does not actually work and it caused page reload and the content of getHtml() wasn't loaded. At least i think this was the problem in my case.

Awesome tutorial! Thanks

Thats what i've been thinking of when studying react. Thanks :))

Very well done!, thank you. And I like your position to not use frameworks,since, in my opinion, they add complexity, heavy dependencies etc... for a result that can be reached in pure JS with a relatively simple code.

This clears a lot of javascript for me

Which font style have you used in vs code...thats so Wonderful...😍

If you have a local Apache server, you can skip the dedicated (express) server and just add this .htaccess next to your index.html: Options -MultiViews RewriteEngine On RewriteRule ^ index.html [QSA,L] Experimenting, just the last line seems necessary.

lol my name is Dom. I thought I was having a schizophrenic episode when I saw "Welcome back, Dom"

This was super helpful! Thank you a bunch!

Now instead of using port 5060 you may want to use 5080 or other port since 5060 is blocked due to vulnerabilieties

Good tutorial, now we basically only need a template engine so that we can do useful stuff in the HTML.

great stuff, loving it

Any Idea as to why the code at 6:58 is not working? I have the entire SPA working correctly besides it breaking on any link or refresh that is not on the index pathing.

Thank You so much!!!!! Can you also make an updated video as well?

Oooh... It's awesome. That is exactly what i looking for. Very thank you for your content! +1

Hi, great video! I also think that for small - medium businesses it's probably better to use plain js and some sort of libraries only for reducing redoundant code. What do you think of a scenario with a client self routing spa like this that asynchrounosly rely on expess for getting every view ?

Awesome, incredible explanation, valued content, thank you for sharing.

NPM and Express destroyed my innocence.

Thank you for your kind explanation!!! perfect!

Great little project to get the noggin joggin! Well done mate

app.use("/static", express.static(path.resolve("frontend", "static"))) doesn't work for me, followed every step, server still responds with index.html for some reason. [edit] i am stupid, i placed index.js inside static and not inside static/js

Sooooo helpful to learn spa!!! thanks

Hey dom! Your tutorial was key for me to revamp my things and start fresh 2020 with a new template.

Isn't Express a framework?

Really interesting. I am working on my own project on this basis currently and where I am struggling is when I want to do something more interesting in the view than just render static html. I want to have elements with their own eventHandlers in the views. Any Ideas how that can be added elegantly?

Great tutorial, thanks a lot for your job!!

nice video! BTW what's this theme you're using in VSCode?

Awesome video and channel, hope it grows :) subscribed 👌

I love your work. However, change the title from .... ... with Javascript to => "with NodeJs"

I am a complete beginner. I know very little... just trying to gain some knowledge in Node Js. My browser (Firefox) kept preventing me from loading the port(5060). I guessed changing it to another would work and port 8000 did work. I don't know if this is right. Any comments?

Hey, isn't express a js framework?

The new trend in web development after all these years (20+) of patching, pollyfilling, and thousands of frameworks is using no framework, subclassing HTMLElement (Web Components), and using Fetch (http requests) LMAO😂

Chrome console throws error: (index):6770 crbug/1173575, non-JS module files deprecated. Cannot access page Using Windows PC Anyone can help?

Nice Viedeo. Are you planning to include the submenu on the sidebar. It should be great. Really appreciate your hard work. Thanks

Thank you! This was very well presented +sub

stuck at Failed to load module script: Please help

WTH is that express.js doing in it ?