so npm run build in vite produces a dist foldet that we use for production. how would we do the same for next.js? npm run build in next.js produces a .next folder. what do we target in the .next folder to be used for production when we use express as the backend?
This tutorial uses chakra-ui v2, and the v3 was released a week ago. So, to follow this video you have to specify version 2 for both UI and icons. I hope this helps. npm i @chakra-ui/react@v2.10.3 @emotion/react @emotion/styled framer-motion npm i @chakra-ui/icons@v2.1.1
You are a Northern Start that just guided me i have spent 72hours looking for the reason my code wasn't working. and when i did i didn't know how to roll back to v2 until i saw your comment . So thank you very very much
This comment needs to be pinned. I hit a road block with this project trying to figure out why it wasn't working. Doesn't help that chakra UI has 2 different websites. Thank you so much for this
Great tutorial ! However, there's a small improvement that could be made at 36:15. If you send a DELETE request using a valid MongoDB ID (with the correct length and syntax) but for a non-existing product, it won't trigger an error; instead, it will return a status of 200. To fix this, a validation should be added to check if the product exists in the database.
Hello team freecodecamp, can u please make a tutorial for MERN Stack from scratch which covers all the elements of the stack ? A beginner to advanced tutorial? We're very thankful to you guys for your help 👐
This is amazing 🎉 I been a front end engineer for some year's now and I recently decided to Learn MERN stack and a I saw your video and that's it I well know that the knowledge I have as a front end engineer helped me allot but you also did a great job Weldone.. You just got a new subscriber ❤
This project was really good and also the explanations of the code helped understand the project better. Keep up the good work. You made all the steps really easy to follow.
For those who are getting this error "NODE_ENV" is not recognized as an internal or external command, operable command or batch file. install this - npm install cross-env --save-dev then add cross-env before both - "scripts": { "dev": "cross-env NODE_ENV=development nodemon backend/server.js", "start": "cross-env NODE_ENV=production node backend/server.js" } then npm run start "you re good to go 😊"
right-hand side of 'in' should be an object, got undefined while building the frontend at around 1:10:00. I wish it was just shown with no auto-imports or install. Those things make it very hard to follow along.
It is very helpful if freecodecamp make a video about Ai engineering from scratch. As an complete beginner it is very difficult to know how to start AI engineering and AI related learning from scratch and the good road map that includes step by step instructions or materials to make a person as an AI engineer.
8:30 no need for nodemon in the latest version of node, same thing for .env. To combine both without installing just add --watch flag within the server script : "dev":"node --watch --env-file=.env backend/server"
Why is it called the MERN stack? Doesn’t using Express imply that you are already using Node? Seems redundant. Why not call it the REM stack? No redundancy, and it flows frontend to backend: React UI, calls Express API, which queries a Mongo DB
for mac users who are getting an error an error in the beginning, it's because the "5000" port is used by the air play reciever. turn it off and you are good to go.
@@sovitagarwal9813 if you are using terminal, use the "touch .env" command. if you are using a code editor like vs code, you shall see an option/ button to create file i.e. ".env"
1:14:42 Using Copilot when making tutorials is a very bad experience for the people who are following the tutorial, because you always have to pause the video to write what you did just by pressing a key. That means a context switch every 10 seconds or so, which kills concentration and will, honestly! If it were written by hand, no pause would be needed. Always keep that in mind: how would someone that is doing on his own PC what I'm doing in the tutorial be able to follow me? What would their experience be? If it's not seamless, then your approach is flawed.
hi, Thanx for the great video, wont it be of good practice if we could first check whether the element we want to delete or update exist in the database before we proceed
To be honest am not here for programming but u did a course on davinci resolve so regarding that i hopping one day u'll also make one for houdinisidefx and one for blackmagic fusion (composting).👍😌
"NODE_ENV" is not recognized as an internal or external command, operable command or batch file. npm install -g win-node-env Try installing this and it should work.
should know the basics of the individual technologies (HTML, CSS, JavaScript, React, Node.js, Express.js, and MongoDB) since he doesn't explain them for anyone who'd be a beginner - but he does show how to put everything together
@@steveh7487 I am a beginer. What extent do you need to learn about these topics. Can you recommend some vedios on youtube foreach topic? There are lot of courses and playlists but i cant find relevent courses correctly since i am a beginner. When you look at Js it has 3hrs 4hrs 12hrs 22hrs i dont know what to choose.
I havent done it yet, but i'll do it now. I think you have to know the basics, mainly javascript, but meanwhile you're doing the course you can look up wwhat you dont know or understand yet in google, docs, or evne chatgpt. Is a very good way to learn, as you're building your knlowledge by building projects.
How can I view details about variables like you? When I hover something in VSCode it just shows "Any". Also every object has different colors while mine is just all blue
Okay, but why you put the node_modules folder for the backend to the root folder? It wouldn't be better to put it into the backend folder where it originally must placed?
I am following this tutorial but I am using a mongodb docker container on my machine instead of Atlas. I needed to change the app.delete line in server.js like this to make it work: await Product.findByIdAndDelete({ _id: new mongoose.Types.ObjectId(id) }); Otherwise it did not delete the record from db.
Yeah me too, the issue is the conflicting package.json files, the backend's is in the root and the frontend's in it's own folder so it keeps running from the root never invoking from the frontend folder. Did you find the solution?
Congratulations 😅I am having trouble running the frontend part, looks like the package.json files are conflicting, how did you get through that part? How is your file structure? I have the backen's package.json in the root folder and the frontend's in it's folder, it seems i cannot run both, always invokes the one in root
I am experiencing an issue running the frontend from the get go, the issue seems to be the conflicting package.json files, the backend's is in the root and the frontend's in it's own folder so it keeps running from the root never invoking from the frontend folder. Can anyone assist please?
Got this from comments above: "This tutorial uses chakra-ui v2, and the v3 was released a week ago. So, to follow this video you have to specify version 2 for both UI and icons. I hope this helps. npm i @chakra-ui/react@v2.10.3 @emotion/react @emotion/styled framer-motion npm i @chakra-ui/icons@v2.1.1"
did you solve it?? I tried this one but still do not works on me "dev": "set NODE_ENV=development && nodemon ./backend/server.js", "build":"npm install && npm install --prefix frontend && npm run build --prefix frontend", "start": "set NODE_ENV=production && node backend/server.js",
got the same, may be as you are trying to start it from root, as the react application is first made inside the frontend folder first go inside it with terminal command "cd frontend" after that try to start with "npm run dev"
setting up relational databases with Gitpod a bit unclear. A step-by-step guide on properly opening and initializing the environment would be really helpful for learners
hi everyone greetings from Argentina. I made a somewhat silly mistake but wanted to share it with everyone since it can happen to someone else. Always check your backend server is running, otherwise the requests won't get processed. That's what happened to me. Kept checking my code and was fine but completely forgot to start the backend server since I was focusing on the frontend at that particular point. So I was creating products but when clicking the button to send the data got a json-related mistake but was because my backend wasn't running. Happy coding!
I got very confused since I using was typescript so I thought it was type error. Spent around 2 hours looking for the bug but failed, came back after few hours and saw your comment.
![ลองสุ่มไอโฟน 990 โกงมั้ย? [ โกงมั้ยครับ ep.101 ] | DOM](http://i.ytimg.com/vi/bfsWe0j492k/mqdefault.jpg)
Hope it helps everyone! Thanks for watching ❤
Thank you
Thank you
Good to see you here bro. I followed your threads clone and built it
Another Buraks video , but i just done your chat app :)
so npm run build in vite produces a dist foldet that we use for production. how would we do the same for next.js? npm run build in next.js produces a .next folder. what do we target in the .next folder to be used for production when we use express as the backend?
This tutorial uses chakra-ui v2, and the v3 was released a week ago. So, to follow this video you have to specify version 2 for both UI and icons. I hope this helps.
npm i @chakra-ui/react@v2.10.3 @emotion/react @emotion/styled framer-motion
npm i @chakra-ui/icons@v2.1.1
Thanks
You are a Northern Start that just guided me i have spent 72hours looking for the reason my code wasn't working. and when i did i didn't know how to roll back to v2 until i saw your comment . So thank you very very much
This comment needs to be pinned. I hit a road block with this project trying to figure out why it wasn't working. Doesn't help that chakra UI has 2 different websites. Thank you so much for this
You are amazing!thanks for that.
thx a lot
My first MERN project! I love it !! and I've learned a lot from the tutorial !! thanks a lot!
Great tutorial ! However, there's a small improvement that could be made at 36:15. If you send a DELETE request using a valid MongoDB ID (with the correct length and syntax) but for a non-existing product, it won't trigger an error; instead, it will return a status of 200. To fix this, a validation should be added to check if the product exists in the database.
Thank you! This is hands down the best explained MERN tutorial project I've come across.
Hello team freecodecamp, can u please make a tutorial for MERN Stack from scratch which covers all the elements of the stack ? A beginner to advanced tutorial?
We're very thankful to you guys for your help 👐
This is an amazing tutorial. Liked the way each minor concept was explained.
This is amazing 🎉
I been a front end engineer for some year's now and I recently decided to Learn MERN stack and a
I saw your video and that's it
I well know that the knowledge I have as a front end engineer helped me allot but you also did a great job
Weldone..
You just got a new subscriber ❤
This is brilliant, and the explanations are great, not to mention I now understand how to use the Postman workbench. ⭐⭐⭐⭐⭐
çok sade ve temiz bir anlatımla hızlı bir crash course olmuş ellerine sağlık. Daha çeşitli içeriklerini de takip ediyor olacağım.
This project was really good and also the explanations of the code helped understand the project better. Keep up the good work. You made all the steps really easy to follow.
This came exactly when I wanted to learn the stack better, yoj guys are great
same!
This video just made me a full stack engineer
Awesome tutorial! Thank you! I`ve just deployed the app. Everithing is clear.
This is the most amazing video i have seen in context to MERN
Thank you for bringing the practical knowledge to us. Really appreciated.
you guys are the goats, not sure if you get money out this, but at least helping others will benefit yall ❤
For those who are getting this error
"NODE_ENV" is not recognized as an internal or external command, operable command or batch file.
install this - npm install cross-env --save-dev
then add cross-env before both -
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon backend/server.js",
"start": "cross-env NODE_ENV=production node backend/server.js"
}
then npm run start
"you re good to go 😊"
you're a gentleman and a scholar
Thanks man! how did you come to know the solution?
Thank you
You are a legend sir!
Beautifully explained and much appreciated!
This is what i want love from india❤ Thanks free code camp for getting this tutorial for us
right-hand side of 'in' should be an object, got undefined while building the frontend at around 1:10:00. I wish it was just shown with no auto-imports or install. Those things make it very hard to follow along.
It is very helpful if freecodecamp make a video about Ai engineering from scratch. As an complete beginner it is very difficult to know how to start AI engineering and AI related learning from scratch and the good road map that includes step by step instructions or materials to make a person as an AI engineer.
I also finding this type of videos . very helpful if it release at recent time as much as possible
Looooong overdue. Thanks a lot guys!!!
♥
8:30 no need for nodemon in the latest version of node, same thing for .env. To combine both without installing just add --watch flag within the server script : "dev":"node --watch --env-file=.env backend/server"
First viewer from Nigeria
Are you a nigerian prince?
reallly solid tutorial so far
Thanks a lot for this. It was very helpful.
im not even done with the vid but i have learned a lottt ty my guy
finally a latest tutorial thanks a lot
Most needed I am confused a little in this thank you for providing this video.❤🎉
1 doubt
Why to use zustand to avoid prop drilling when we can use built-in hook useContext? btw thanks a lot
This is such a smooth one.. ❤
Why is it called the MERN stack? Doesn’t using Express imply that you are already using Node? Seems redundant.
Why not call it the REM stack? No redundancy, and it flows frontend to backend: React UI, calls Express API, which queries a Mongo DB
for mac users who are getting an error an error in the beginning, it's because the "5000" port is used by the air play reciever. turn it off and you are good to go.
how did u create an env file in mac
@@sovitagarwal9813 if you are using terminal, use the "touch .env" command. if you are using a code editor like vs code, you shall see an option/ button to create file i.e. ".env"
this tutorial is pretty good, a bit too reliant on the copy-pasting toward the end though
As usual awesome content
Nice comprehensive stepwise progressive …👍
Great Video, Completed
1:14:42 Using Copilot when making tutorials is a very bad experience for the people who are following the tutorial, because you always have to pause the video to write what you did just by pressing a key. That means a context switch every 10 seconds or so, which kills concentration and will, honestly! If it were written by hand, no pause would be needed. Always keep that in mind: how would someone that is doing on his own PC what I'm doing in the tutorial be able to follow me? What would their experience be? If it's not seamless, then your approach is flawed.
🤭
hi, Thanx for the great video, wont it be of good practice if we could first check whether the element we want to delete or update exist in the database before we proceed
Pls bring more such course
Great... Thanks a lot to share this with us.
What extensions are used in the video, where it has explanations for methods, objects, etc on hover?
Ty alot bro, that really helps me
FCC cares about our skils even more than ourselves...❤
To be honest am not here for programming but u did a course on davinci resolve so regarding that i hopping one day u'll also make one for houdinisidefx and one for blackmagic fusion (composting).👍😌
very helpful
Great work
"NODE_ENV" is not recognized as an internal or external command, operable command or batch file.
npm install -g win-node-env
Try installing this and it should work.
Thanks that helped me a lot
Can i add this project in my resume?
what are the pre requirements for this tutorial?? what should you know before following this??
should know the basics of the individual technologies (HTML, CSS, JavaScript, React, Node.js, Express.js, and MongoDB) since he doesn't explain them for anyone who'd be a beginner - but he does show how to put everything together
@@steveh7487 I am a beginer. What extent do you need to learn about these topics. Can you recommend some vedios on youtube foreach topic? There are lot of courses and playlists but i cant find relevent courses correctly since i am a beginner. When you look at Js it has 3hrs 4hrs 12hrs 22hrs i dont know what to choose.
I havent done it yet, but i'll do it now. I think you have to know the basics, mainly javascript, but meanwhile you're doing the course you can look up wwhat you dont know or understand yet in google, docs, or evne chatgpt. Is a very good way to learn, as you're building your knlowledge by building projects.
How can I view details about variables like you? When I hover something in VSCode it just shows "Any". Also every object has different colors while mine is just all blue
hey, just wondering which extension you're using for the snippets that are showing in your editor?
Hello, I have a question. Why is he using just router component without any router component? I just want to know if it's a good practice
Great thanks
thank you so much !!
Thank you 🙏
very nice ❤❤
Please make a tutorial like this on using VueJS or nuxt js also ❤❤❤❤❤❤❤❤❤
Hello. For global state abstraction, which of these are optimal: redux, mobx and zustand ?
Nice Project
Does freecodecamp consider laravel dead?
What are the prerequisites for this project?
I know HTML, CSS and Javascript.
Can I learn MERN Stack by watching and developing this project?
i think you should learn react first... do a separate course on react and express if possible then come here...
@@adityaborse4424 Sure! Thanks Man.
Okay, but why you put the node_modules folder for the backend to the root folder? It wouldn't be better to put it into the backend folder where it originally must placed?
Thank you
Please make a course on PERN STACK
He already did that. Go to his channel.
@@_nirajghimire outdated
@@gyaneswarrout who said? its awesome.
where did you check?
pernstar
@@gyaneswarroutoutdated in 3 months?
Thanks a lot, but after doing cross-env my app has no products display though mongodb has.
Hey @asaprogrammer_ is that an extension used to autofill at 14:30? Filling the mongoose database in try.
github copilot
did you get the answer?
Do you mean github copilot?
I am following this tutorial but I am using a mongodb docker container on my machine instead of Atlas. I needed to change the app.delete line in server.js like this to make it work: await Product.findByIdAndDelete({ _id: new mongoose.Types.ObjectId(id) }); Otherwise it did not delete the record from db.
My bad! I was forgetting to add "Content-Type: application/json" header when sending the request.
Thankyou
I am facing issue with frontend, react page not displaying
Yeah me too, the issue is the conflicting package.json files, the backend's is in the root and the frontend's in it's own folder so it keeps running from the root never invoking from the frontend folder. Did you find the solution?
Where is the login to web application part?
Hi, after paste the code, how you import the at top? Using extension or shortcut vs code?
est t-il possible d'ajouter un login à cet application?
Which code autocompletion tool/extension did author use? Is it AI?
it's copilot
Can u also do full stack python web developer tutorial? Plz it will be very helpful.
when i complete the application, it doesn't run what is the problem please
Hoooo im first to comment great community
What's the theme name that this guy's using? Please tell if anyone knows.
Houston. Install it as an extension :)
I went through about 15 extensions until I found it haha. Then I just saw this comment 🤦♂ Also, which vscode icon extension do you use?
@ freecodecamp please make a full stack PHP / laravel backend.thanks
completed on 29/10/24
Congratulations 😅I am having trouble running the frontend part, looks like the package.json files are conflicting, how did you get through that part? How is your file structure? I have the backen's package.json in the root folder and the frontend's in it's folder, it seems i cannot run both, always invokes the one in root
Gracias, por tu culpa hice todo mal en el proyecto y todos los equipos se atrasaron 👍
the put method is not working in my project it is showing no response in body->raw->section can some one explain
bruh the copilot almost wrote the entire code for ya lol
@9.29 what's the vscode extension that is causing the get to autocomplete?
I think it’s copilot
What is the name of the theme?
I am experiencing an issue running the frontend from the get go, the issue seems to be the conflicting package.json files, the backend's is in the root and the frontend's in it's own folder so it keeps running from the root never invoking from the frontend folder. Can anyone assist please?
why is frontend page being blank even after I installed vite , could anyone help ?
Hi, someone is having troubles when using Chakra UI?? I cant just show the button, idk what exactly happens and cant solve it
i do have the same :/
same , did u solve it
Also having the same issue
Got this from comments above:
"This tutorial uses chakra-ui v2, and the v3 was released a week ago. So, to follow this video you have to specify version 2 for both UI and icons. I hope this helps.
npm i @chakra-ui/react@v2.10.3 @emotion/react @emotion/styled framer-motion
npm i @chakra-ui/icons@v2.1.1"
Anyone having Content Security Policy issue while trying to run "npm run start"? Great content by the way.
Serach about cors and this is a common problem
❤❤
I am getting an error in deployment "NODE_ENV is not recognized as an internal or external command" how do I fix it
did you solve it?? I tried this one but still do not works on me
"dev": "set NODE_ENV=development && nodemon ./backend/server.js",
"build":"npm install && npm install --prefix frontend && npm run build --prefix frontend",
"start": "set NODE_ENV=production && node backend/server.js",
Same for me
@@yusufkaandemirbas4451 Fixed It
"dev": "SET NODE_ENV=development& nodemon backend/server.js",
"build": "npm install && npm install --prefix frontend && npm run build --prefix frontend",
"start": "SET NODE_ENV=production& node backend/server.js"
Same.. got error while deploying
@@yusufkaandemirbas4451 its not working 😭😭😭😭
the product updating isn't working
Hey i’m having an issue maybe someone else is having the same problem. I go to start up the webpage the only thing i’m getting is “Cannot GET /“
got the same, may be as you are trying to start it from root, as the react application is first made inside the frontend folder first go inside it with terminal command "cd frontend" after that try to start with "npm run dev"
setting up relational databases with Gitpod a bit unclear. A step-by-step guide on properly opening and initializing the environment would be really helpful for learners
What extension was used for code snippet autocompletion and is it free?
its ES7 React/Redux/GraphQL extension in vs code..yes its free
@@keshaniperera1726 Thank you. Let me isntall it now.
hi everyone greetings from Argentina. I made a somewhat silly mistake but wanted to share it with everyone since it can happen to someone else. Always check your backend server is running, otherwise the requests won't get processed. That's what happened to me. Kept checking my code and was fine but completely forgot to start the backend server since I was focusing on the frontend at that particular point. So I was creating products but when clicking the button to send the data got a json-related mistake but was because my backend wasn't running.
Happy coding!
oh man thanks a lot I was making the same mistake. Muchas gracias!
I got very confused since I using was typescript so I thought it was type error. Spent around 2 hours looking for the bug but failed, came back after few hours and saw your comment.
@@HassaanUddin7 Glad to know I helped someone with my comment 😄😄
thanks
What is the theme you are using?
Houston
am not able to make .env file on mac