Build a Single Page Application with JavaScript (No Frameworks)
HTML-код
- Опубликовано: 29 сен 2024
- View the Code & GitHub Repository:
dcode.domenade...
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 📺:
• Adding Client Side URL...
🏷️ THE ULTIMATE JAVASCRIPT DOM CRASH COURSE 👇
www.udemy.com/...
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
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.
True!
If you enjoyed remember to Like and Subscribe for more web development projects and tutorials! 🙂
😊👌
Hello, can you please continue this project? May be remake it from absolute zero with new view on it? You did wery well, but i think it’s can be done better! May be do more pages next> prev< buttons to slide pages, some image gallery, please i want to see
what shoudl i do for example. I need to read elements returned by function getHtml after they appear on page, how should i do it? if i make script tag inside return it,s like invisible by javascript and it doesnt work! This is fitst reason that you should remake this code, its useless in this case.. so please redo it! i need that functionality NOW. if you ignore my messages i will unsubscribe! so please help or what you reason to do this tutorials? you want to give knowledge or what?
i know solution its like
function dynamicallyLoadScript(url) {
}
dynamicallyLoadScript('../../../test.js');
is it right to dinamicly adding scripts after routing done? or you know some other way let me know
its very interesting for me, so please continue this project, dont give up! It's going to be cool and useful for other people!
*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.
you gave a very good clear breakdown summary of the key components necessary to create a S.P.A with a vanilla js, but as a beginner its also good to be able to watch few different coders create stuff like this , so we can code along and learn etc etc . but your comment also helped me fully grasp what is actually happening in this video .
Or just jump to the github URL to check the code
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.
**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.
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
It's True ahahahaha
same here
same, probably chrome issue with 5060 port, as is it seem to be a dangerous port or something, not sure why tho
Pretty much the same here. Don't know why either.
@@wavesky_pv used for cyber attacks maybe that's why
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!
How i can handle post request here ?
I keep telling people that you should NOT use frameworks without understanding plain JavaScript.
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!
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.
You're welcome Tom! Thanks for subscribing
This video is gold, deserves more views!
dcode. Sir. Your tutorial is very simple and clear when someone no experience in SPA. Thank you. 😊
You are very welcome
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!
I'm glad you liked this video. Thank you so much for your donation!! 😁
When you say dumb JavaScript down, are you talking in terms of abstraction or performance?
@@pure4lyfe5simplicity
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.
Thank you very much for your great javascript tutorials DCODE...
Great clean knowledge !
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"]}
Thanks for this. I was wondering how to fix it
Thanks man
Really enjoyed the video! faced a few hiccups with it but learned much more! Thankyou😀
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?
Awesome tutorial! Thanks
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😂
If only...
next, we'll be using style attribute on every html element.
@Wuxxy you do?
@@marklesterbolotaolo8259 Tailwind hype is kinda that tho. Lol, 2 page long class names.
Is there anyone who knows how to apply css to each view pages? by the way, It's the best tutorial !
Great tutorial, thanks a lot for your job!!
Amazing vídeo. I am colombian your content Is so good
Appreciate it, cheers!
Would it be better if the "if statement" is wrapped into a try... catch block? (The one checking if the paths are valid).
I know that it might add a bit more complexity to the code, though.
thanks for the great tutorial, but, how to handle the button click event in view ???
Can we use vite server instead express sever?
Great content and excellent explanation. Where can one learn all the html, CSS and JavaScript without these many tutorials which don't explain much... Can we work on a project together?
Great Tutorial! i have a question though because i really like the font you use. what is the name of the font?
Thank You 👌
nice vid dude btw whats the name of the this theme that u use on vs code
Thanks for the video it's cool
Excellent. Hi, does a SPA in JS supports SEO, unlike Angular?
Can I deploy this method to production
Doesn't it more optimal to use stuff like document.createElement('div') and then append it into a document? I mean, what is the best practice, how the rendering (without frameworks) should work if, for example, we are doing the huge project?
How would this work with a building tool like vite? I'm curious because I'm currently building a JS app and want to host it through github pages.
Amazing tutorial bro, what is your vs code theme?!
You're welcome! The theme is called "dcode" - you should be able to find it in the VS Code marketplace
Isn't ExpressJS a framework though?
guys... i need help!!
npm init -y and npm i express ain't work with me on terminal! what should i do?
Edit: It just was cause i didn't install node.js..!😅
Where's the second part of this video?
Can't find it.
ruclips.net/video/OstALBk-jTc/видео.html
In case you have not found it and still interested.
why can't I select the elements of the page with the document.queryselector('') ?
Do you have any idea to make something similar to viewDidLoad event in ReactJs?
Thank you so much for the great tutorial.
My console doesn't seem to log the JSON containing "match" ever, even with the source code repo you provided. Any idea how to fix this?
Do you really need express to do routs in SPA?
Hi. Do you mind telling me what vscode theme are you using here?
Hey nice video, How can I call functions from the html template ?
question:: how to show Images and icons?!🤔
I can't get the server to open on my computer. It says the site can't be reached. I followed the instructions correctly, any help?
Hey, having an issue and wondering if someone here can help. When I visit another page, the window loads to where it was scrolled to on the previous page, so if I am on the bottom of a page and click a link, when the new page loads it loads on the bottom instead of the top of the page. Any idea how I can fix with this setup in the video?
I am facing a serious problem. When there's only texts in the "a" tag page doesn’t reload. And all works fine as like yours. But when I put icons or img or other divs into the "a" tag, clicking on it always reloads the page. Please help😓
at 22:47
navigateTo(e.target.href);
I get error:
Uncaught ReferenceError: navigateTo is not defined
What am I missing?
Can I use history.pushState(null, null, e.target.href); instead here?
haha nevermind, thats a fucntion we create!
Are there any APIs?
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
in your application always use vanilla js or jquery?
@@mauriciochavez8528 I use Vanilla JS for everything. I don"t see the utility to use Jquery
Same here, coming from a background of strongly-typed languages, Js frameworks throw me off so much when trying to learn them, even after playing around with vanilla js code for a few days.
@@taoufiqbenallah9029 you never know, we might be wasting more time than he does. in my opinion
most of those who use a framework (hammer) for every project are very good at slacking (or, at best, spending hours trying to figure out why something is not working in their correctly structured big mess)
@Solve Everything that's not his intention. the idea is to show us how frameworks work under the hood, keep it up man
Who likes the new video intro? 👀
Awesome. Nice logo.
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.
Appreciate that Tomáš, thanks!
Im at min 10 and this looks like a fullstack app.
Are you looking at this video at all? He uses Node.js (a server framework with built-in modules and a huge repo of user-written modules, npm) and also Express, a JavaScript framework for the backend work.
Personally, I think using a Node.js server for routine functions like page navigation and reloads is a violation of the usual division of work at the back end: page requests go to the web server (Apache/NGinx) while user events are handled by Node. Doing it this way puts the two types of task on separate threads inside the CPU rather than have one type bottlenecking execution for the other type.
@@jackred2362 Not so. Node.js is not merely a server creation framework plus a JS runtime. It also has a good store of core JS modules and accepts all npm modules. Express is itself an npm module which incorporates many common backend functions, e.g. authentication, search, payments, etc. But you don't have to use Express. You CAN select code units from Node's built-in library and the npm repositary and write some JS code to link it together yourself. In fact I'd advise newbees to Node.js to make their first apps without Express just to see how Node works and all it has without Express/Koa/Hapi. Express of course expects users to be up to speed with all the latest JS constructs and newbees won't be quite there yet.
Don't believe me ? Look at this ruclips.net/video/H9fg7GFagF4/видео.html
It's moronic and counter-productive to go without a framework.
❗PART 2 OF THIS VIDEO ❗
ruclips.net/video/OstALBk-jTc/видео.html
🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇
www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
"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.
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
I appreciate it. Thank you! All the best with your career 👍
🤦♂️
lol my name is Dom. I thought I was having a schizophrenic episode when I saw "Welcome back, Dom"
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!
My question is how does he know to use all of this code and where does he research to figure it out?
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.
Thank you it was the same on my code.
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.
still dunno what to do
Thank you !!
NodeJs P.O.V: No framework? 🤔🤔 I see...
Chrome console throws error: (index):6770 crbug/1173575, non-JS module files deprecated.
Cannot access page
Using Windows PC
Anyone can help?
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 ;)
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!
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).
Can someone elaborate on this? I understand that writing HTML in quotes removes a lot of the handy features of VSCode. What I don't exactly understand is how templates can be used in this context.
Would all of the templates be written in the index.html file and triggered by each view? This seems like it would result in a very bloated index file but I struggle to understand how the templates could be compartmentalized to each js view. Any help or explanation would be much appreciated!
@@AVC1602 they would each have their own file, so instead of calling string literal HTML, you would call the filepath where the template resides.
How to make a simple Single Page Application:
(Parody)
Requirements:
Basic HTML and CSS knowledge. No JS
Create an index.html:
Now make a static multi-page website from actual-content.html
Just kidding 😌😂
at TIMESTAMP 7:50
Issue
As of now, PORT 5060 currently isn't available on browsers, as it's used for SIP attacks.
Solution
I was able to change the server.js function app.listen() to use PORT 8000 instead, then load the page localhost:8000 in the browser to get it to run,. Works now as in video above.
Thanks for the heads-up! I was wondering why it wasnt working and changed the PORT to something random, and then it worked. Interesting to know the reason why 5060 isnt working anymore though!
Isn't Express a framework?
NPM and Express destroyed my innocence.
Awesome Video through this i got to know how react, angular, vue are working
Amazing 😀. I’m building an open source single page server side rendering framework using this tutorial.
Oh FFS, not another Framework. 🤦♂️
@@carldrogo9492 🤣 it’s mostly for practice
Amazing tutorial, very informative, very well prepared.
You're welcome! And thanks
That was so much value in 30 minutes for someone that understands basic js but not it's practical use. Thanks a lot
My question is how does he know to use all of this code and where does he research to figure it out?
stuck at Failed to load module script: Please help
Didn't it say no frameworks? Express.js is a framework?
well done dude. i always knew it was possible, and i wanted to build something that is simpler and without stupid frameworks lol
Frameworks aren't stupid. 🤦♂️
"No frameworks" -> Step 1: npm install express..... *sigh*
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 :)
Don't do frameworks without understanding plain JavaScript.
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.
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
Which font style have you used in vs code...thats so Wonderful...😍
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.
nice video!
BTW what's this theme you're using in VSCode?
Actually, no need to use a framework... It might kill your application...
Build a Single Page Application with JavaScript (No Frameworks) but you are using Express Frame work to achieve it LOL
But Isn't Express js a framework?
WTH is that express.js doing in it ?
Hey, isn't express a js framework?
Not a frontend framework but for server
No Framework? Your using Express!
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?
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
I don’t usually leave comments, but this is exactly what I was looking for. Very easy to follow, thank you!
this is actually mind blowing, thanks
How did you figure out how the frameworks work, in first place?
Thanks! Not sure, I think if you do a lot of vanilla JavaScript you can put things together like this but if you're wondering if I looked at source code, I didn't 😄
@@dcode-software You're overdosed with vanilla JS
isnt express a framework by itself?
I love your work. However, change the title from .... ... with Javascript to => "with NodeJs"
do not use 'class' keyword, use functions instead, Javascript does not have genuine classes but functions!
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)
}
})
})
What happens when using JavaScript redirection like window.location.href = "/new_link"; or when the user clicks the wheel button to open the link in a new tab?
Now instead of using port 5060 you may want to use 5080 or other port since 5060 is blocked due to vulnerabilieties
How so, the vulnerability is in the app that listens on the port, not the port itself?
Thank you! Could not run on port 5060, but did not know why. Changed to 8080 instead and now it ruins fine.
omg thank you!
@@wiktoriakorneusz4373 run 80 port instead
Saved this man’s whole video
Good tutorial, now we basically only need a template engine so that we can do useful stuff in the HTML.
Just use a Frontend Framework FFS. 🤦♂️