Server Side Rendering with EJS and Node.JS
Вставка
- Опубліковано 30 вер 2024
- ► Master NodeJS Playlist: • Master NodeJS
In this video, we take a deep dive into the world of server-side rendering with EJS and Node.js. We'll explore how to set up EJS as a templating engine, and how to use it to create dynamic views for your web application.
► Complete Full Stack Web Developer RoadMap 2023: • Complete Full Stack We...
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It allows developers to run JavaScript on the server side, creating server-side applications with JavaScript.
► My Website: www.piyushgarg...
My Gears
► My Girlfriend: amzn.to/3WD6FRp
► Apple MacBook Laptop: amzn.to/3WBJgQn
► Anker USB Hub: amzn.to/3GhZSr0
► Blue Yeti Microphone: amzn.to/3YKZ9FT
► External 27” Monitor: amzn.to/3Vp3xaO
► Logitech MK295 Wireless Keyboard and Mouse: amzn.to/3DuL1bB
► Seagate Expansion 1TB External HDD: amzn.to/3QMm5Q8
► Tripod: amzn.to/3S4OwK4
► Ring Light: amzn.to/3YLf8DR
Disclaimer: All the links above are affiliate links.
Social Links
► Twitter - / piyushgarg_dev
► LinkedIn - / piyushgarg195
Video Titles
Creating Dynamic Templates with EJS in Node.js
EJS: The Easy Way to Build Dynamic Views in Node.js
Mastering EJS: A Step-by-Step Guide for Node.js Developers
Building Dynamic Websites with EJS and Node.js
Tags
#nodejs #javascript #expressjs #mongodb #mernstack #developer #api #https #server #javascriptinhindi #webdevelopment #webapp #realtimeapp #serverside #nonblockingio #tech
another day of me feeling sorry for the kids like me who wanna learn backend but dont know about THIS GEM on youtube ooooofe
Well we all are gems general engineering males 😂
you know what, what u just said is absolutely and prolifically true my friend, i was a noob in backend until i stumbled upon this playlist, Piyush is so good at explaining even the toughest concepts in node, which other you tubers just skip past.
00:01 Server Side Rendering renders the entire web page from the server.
02:05 Templating engines in server side rendering solve the server side problem by reducing code complexity.
04:16 Using EJS as a templating engine for server-side rendering
06:34 Setting view engine and creating views folder for EJS files
08:27 Configuring Views Path for EJS in Express
10:26 Create an LI tag with the URL ID for server-side rendering with EJS and Node.JS.
12:34 Setting up a static router for serving front end pages.
14:42 Implementing form and handling post requests in Node.JS
17:22 Implementing server-side rendering and handling JSON response in Node.js with EJS.
19:41 Configuring ports and rendering pages
21:19 Creating a dynamic table in EJS
23:49 Server side rendering with EJS and Node.JS makes rendering and serving data to the front end easier
By default VSCode does not have syntax highlighting for EJS template files. You need to install a plugin like this one - EJS language support.
You also need to configure the file association for .ejs files. In order to do so type the following command (using CTRL + SHIFT + P) - Change language mode and then select Configure file association for .ejs, then select HTML from the dropdown.
Thanks for the help dear
thanks bro for the info
thnx bro for the help
it was helpful :)
thank you bro
sir can we use JSX to do server side rendering?
yes
Thank you so much...❤️❤️ You explained it so nicely and this is so informative...❤️❤️
Great content Bhaiya. Pls also provide source code its hard to code and learn at same time
Ahhhh! I'm getting this error for 4 days 🤮 TypeError: Cannot read properties of null (reading 'redirectURL')
i was also facing the same issue but the mistake was in updating visitHistory
mee too same...@piyushgarg bhaiya please help
If you are facing error then try to solve it by own and give time to think that what is the issue in it . Still, you are facing error then dont waste 4 days to just solve that error . So should use the chatgpt and give the command or just copy the error and paste in it. Your issue will be solved
In index.js, change app.get("/:shortId",.......) to app.get("/url/:shortId", .........). This is happening because there two functions defined for / path, one is / and another one is /:shortId
hello
check your shortid(if any word capital or small) name in schema write same name in app.get when u fetch shortid
Is there any (sensible) way of combining this with react & a modular structure?
Hi! Have you been able to figure it out?
You use React + React router for rendering & routing & for communication between React & Node you send fetch requests from react to the IP of your Node server. However, this won't be server side rendering anymore of course.@@duztv5370
bht braaa ustaad milaaa
How to connect nodejs with Angular
You have made it very complex to understand i saw each and every videos but You are still working on same file that's create problem to understand how does code work. pls make separate files for understanding.
another day of me feeling sorry for the kids like me who wanna learn backend but dont know about THIS GEM on youtube ooooofe
Action='/url' this part is creating the problem. Upon clicking on generate button nothing is happening. Plz help plz help
same problem, have u found out the solution for it
One of the best youtuber
I have doubt.Frontend alag rakho backend se ,front-end ke liye ek hi project directory me folder banao or usme front-end ka code likh do using any framework like react js or angular js.Ye ejs karne ki kya jarurat
server side rendering dynamic websites k liye boht fast hoti hai , frontend me api's ko data lana phir load krna ye sab boht time consuming hai
No default engine was specified and no extension was provided.
ye error a raha h how to resolve??
What is difference between making a ui with template engine and with frontend library like react and next js ?
With ReactJs and NextJs, our web pages get loaded component-wise, without page reloading. I believe we reload webpages or urls in node.
I have already covered this in my REST API video in this playlist itself. Thanks ✨
Bhai thora dheere dheere bataya karo bhai hum beggeners ko smjhne m thora time lagta hai
The best thing i love the overall explanation of the flow . 💘
Bhai you are doing amezing ♥️
bro source caode de diya kro pls
bro has given his girlfriend link in description💀💀
bhai adhe video me se kaha pe gayab ho gaye he😂😂
Lamont Turnpike
(FIXED)the shortIds are not showing when calling from ejs file. The html document is giving blank elements without shortId.
: EDIT :
Ok I was dumb to see a = in the syntax. I was doing without this =. This does not give any error thats why it took me time to notice.
sir source code error aa rha hai
Why for home.ejs import is not necessary?
because ur giving whole views file in path
nice video. thanks
How do i pass objects from EJS File to back-end Route ?
by renderinh home page in res.render in routes
Great tutorial keep it up bhaiya
Guys if someone had complete code for this particular lecture then pls kindly let me know .
Great explanation, thank you so much
I have a question. When you are rendering the home page with shortid from the handleGenerateNewShortURL function, the path on the address bar is localhost:8001/url but i want it localhost:8001/ (the same url which is used to render home page). How do I do that? Just give me a basic idea please.
bhai same dought mera bhi hai, ager aapka solve ho gya ho to kya code mil sakta hi🙏🙏
@@akhileshsingh0136 Mila kya bhai ?
@@ghost10326Same doubt.Did you get the solution?
Okay what you can do is you can update your form action = "/" and at static router add another route for a post request like you have done in this localhost:8001/url at the function in your controls there instead of only passing id as object pass url by URL.find({}) then it will work for you
what is the extension for ejs snippets?
Ejs me seperate css or js file banti he kya or banti he to kese please batao
best tutorial with great explanation..
anyone give source code
source code mila?
Aslamullakum Sir I am new in node and start learning from your course and face the problem when I create Short id of given URL, it create only one url short id when I put another Url i will show E11000 key duplication how I can get rid this issues Sir
unique true kiya hoga apne schema mein, aur kya same domain enter kr rhy thy?
code dedo bhai
yess plzz give the source code beacause my typed source code is giving error
If nodejs can return Ui then why we need reactjs?
this is server side rendering, when you want to do client side rendering we use frameworks like react and angular
ye wala sach me khatrank tha
Can you provide source code link for this lecture I am getting an error.
koi nai mai de doonga🤣🤣
Sir please source code de do
source code send krdooo
i have been following you for this playlist
and i build same endpoints for post(making new url) and get(get all shorturl from database) that is '/' now i get an error whenever i use call for '/' in my browser then it shows a error which is in post request(as i tried to recall the same posted data in it using await) ans using console.log to print its timestamp just for fun,
the error tells me that this timestamp is null
and when i changed the url from '/' to '/url' for get and '/cal' for post the error was resolved
as the browser only calls for get then why is this happening?
i faced the same issue. when my router was "/url" my ejs was not getting passed and i was getting the same error as yours: timestamp is nulll. So i also changed the route to something else and then it worked.
did you find why it was happening?
im confused
10:30 recap
home.ejs mai urls.foreach mai urls not defined aara hai ...error giving , tried everything chatGPT , still not able to correct it
for in loop use kar bhai
@@lethalwarrior7 bhai for in loop kaise use kare isme for in ka syntax hi nhi hai
Did you solved this error? I am stucked in it
@@AyushSingh-lp8wi use this inside your "/test" route function. You should name the variable correctly before passing it to ejs file:
return res.render("home", {
urls: allUrls,
});
sir ye samajh nahi aya ki staticRouter kyu banaya , jab ki samework uske bina bhi ho sakta tha
Static Router is just for rendering pages, rest all handling POST, API requests.
you are gem instructor
vid-22 ✅
amazing bro✨✨
❤
Thanks bro
ZABARDAST!!!!
thanks man
Great video ❤
Don't write the title in English if you're not going to speak English 😒
shut up