After 5 sleepless days of different trial, now my First MERN site gone live in heroku. Your video is perfectly working for me. Thanks a lot for uploading this video....
Yes, definitely leave errors (and of course fix them up haha). Running into blockers and errors is part of the process and it's always helpful to see how others debug and find solutions. I went through the documentation and tried myself before watching this video. I was close but not quite, so it was really helpful to get a walkthrough on exactly how to do this as well as the explanations and examples. Thanks very much!
Great tutorial! One issue I ran into: if your server also serves as a backend handling requests from the react app, it is import that the handler in line 18 of the server.js file be app.get('/', ... as opposed to app.get('*' ... This way it will still be able to send appropriate responses to specified endpoints.
Awesome tutorial. I spend a lot of time to deploy but failed to figure out where is the problem. But your tutorial fullfilled my reqirement. It forced me to thumbs up. Want more turtoril. Thank you so much.
Super cooool!!! I've created ur MERN + Redux project and pushed it now to Heroku. I'm so happy :) . Unfortunately, I must delete the backend folder instance, hope I can find a solution for that. You do an excellent job. Thank you!!!
You made this so easy to understand for beginners...i love the way you explain things and i liked the concept of showing the process of solving the errors also it helps.thank you so much
Phenomenal tutorial. Thank you for providing such a clear, easy-to-follow process that actually provides learning and not just a how-to for a single situation. Will definitely be following your future videos
Your explanations were really accurate yet easy to follow, definitly leave the errors, its helpful to see them being debugged. I would tipically deploy the backend to heroku and the frontend to netlify, so your aproach was really interesting to me, good work!
this is really a great video but am in a very headache situation,the problem is when i tried to check if my react app run in a production build ,the errors pop out saying "TypeError: path must be absolute or specify root to res.sendFile" pls help me out guys??
I did your MERN e-commerce tutorial and I'm currently uploading it to heroku following this tutorial. I just deployed the app but I'm receiving a 503 error. Any suggestions on what I need to fix it? cheers
Apparently this method does not work well when there are dev dependancies in your project. The only way to make it work would be shifting all you devDependancies to dependancies. Please show us a method to deploy if there are devDependancies in your project. Thank you !
may the folder structure affect the deploymemt process? I mean what if we have clinet folder and backend folder seperate, and not the backend as the root folder and client folder in it as ti is in this tutorial.
This video was much needed! I was able to get my project deployed but my data is not showing up unless my server is running in the backend and that is after the deployment to heroku. the error I'm getting is: Failed to load resource: net::ERR_CONNECTION_REFUSED. I'm not sure why the database I'm pointing to is not running unless I run it in the terminal. please help! Thanks in advance
Make sure you add you IP address or alloe from anywhere when setting up mongodb cluster. And check if you added the password to te connection string you will see a space to enter it
when i run this node utils/importData.js --import i am having this ERROR 💥: MongooseError: Operation `posts.insertOne()` buffering timed out after 10000ms
Apparently, you can't use "__dirname" if you are using the ECMAScript module import syntax. Who else has experienced this. It gives you an error: __dirname is not defined. Still trying to figure out how to go about it.
@@the_full_stack_junkie Thanks a lot. This worked to fix the mentioned error. Unfortunately, I encountered another one while pushing to heroku: remote: npm ERR! code ENOENT remote: npm ERR! syscall open remote: npm ERR! path /tmp/build_83dc69a8/client/package.json remote: npm ERR! errno -2 remote: npm ERR! enoent ENOENT: no such file or directory, open '/tmp/build_83dc69a8/client/package.json' remote: npm ERR! enoent This is related to npm not being able to find a file. remote: npm ERR! enoent I suspect it's from the Serve React snippet. Here is what it looks like: if (process.env.NODE_ENV === "production") { const __dirname = path.resolve(); app.use(express.static(path.join(__dirname, '/client/build'))); app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'client', 'build', 'index.html')); }) } else { app.get('/', (req, res) => { res.send('API running'); }) } Ps: My folder structure is slightly different from yours, the client and server are in two separate folders. I have tried "../client" but I get the same error.
Try to run this setup locally where you just set the NODE_ENV to production in .env file. Then check if you get any error when trying this. I think you will get a better error response as to what is wrong with this startup process, "some file is not being found apparently", so if it runs smoothly on your local env with NODE ENV set to production then there is something else wrong but this way we can narrow down the search
@@the_full_stack_junkie This is the error I'm getting when I try to access localhost:5000 with NODE_ENV = production: Error: ENOENT: no such file or directory, stat 'E:\P2P System Project\server\client\build\index.html'
I think I have seen the issue. It's with the path. My client folder is not within the server folder. It's under the "System Project" folder. From this line: app.use(express.static(path.join(__dirname, '/client/build'))); how can I reference that? I tried "../client/build" to go a level back but it didn't work.
No i would definitively not recommend saving static files like images,video, and files in the database. Rather store it in something like AWS S3 buckets
My project has seperate folders for client and server. I want my github repo to contain these 2 folders so i use git init inside this main folder(which contains client and server folders) But for deploying back-end to heroku i'll have to use git init inside server directory which means i'll be creating a new repo inside another repo. Can it cause any problems? What could be a better approach for deploying back-end from such repo(which contains seperate folders for client and server)?
@@the_full_stack_junkie thanks for your response. Is it usually preferred to have a folder structure like the example you had in video instead of having contents of client and server in sibling directories?
Hey man like i would not be able to tell you whether is is used by big companies as I have learned to do it this way and seen many blog posts and courses outline it like this as well and I currently use this structure in my freelancing projects.
@@AndyChamberlainMusic Hey man so I went and checked out my mongodb atlas dashboard and I did see that the button to give access from anywhere is not there anymore, but you are still able to add this as any IP address range IP address for anywhere: 0.0.0.0/0. Maby try using that and let me know else you will need to add your server ip as whitelist
It will load the frontend if the website is accessed using the baseURL for example "www.example.com" will load the frontend but if I type any specific path for example typing "www.example.com/post" it won't redirect to the posts page, any fixes?
Hey man so the only solution I can think of from this comment is that you should make sure that your piece of middleware we code on around the 19:45 mark doesn't have the correct route value or you never added the NODE_ENV=production variable to your Heroku app. This route value should be a '*' as this allows you to access the site from any endpoint of the domain. Hope this helps.
Hope you enjoyed the video!😎
Discord Link: discord.gg/JUHQpUh
After 5 sleepless days of different trial, now my First MERN site gone live in heroku. Your video is perfectly working for me. Thanks a lot for uploading this video....
Thanks so much for this beautiful work.
Yes, definitely leave errors (and of course fix them up haha). Running into blockers and errors is part of the process and it's always helpful to see how others debug and find solutions.
I went through the documentation and tried myself before watching this video. I was close but not quite, so it was really helpful to get a walkthrough on exactly how to do this as well as the explanations and examples. Thanks very much!
Great tutorial! One issue I ran into: if your server also serves as a backend handling requests from the react app, it is import that the handler in line 18 of the server.js file be app.get('/', ... as opposed to app.get('*' ... This way it will still be able to send appropriate responses to specified endpoints.
Incredible!!!
Thank you so much for this tip ♡.
Extremely Profitable Tutorial Bro
So very happy my champ🙏
Awesome tutorial. I spend a lot of time to deploy but failed to figure out where is the problem. But your tutorial fullfilled my reqirement. It forced me to thumbs up. Want more turtoril. Thank you so much.
No video could have done a better job than this video, thank you, and more of these videos.
Thanks 🤓🥳
good job bro awesome work
Super cooool!!! I've created ur MERN + Redux project and pushed it now to Heroku. I'm so happy :) . Unfortunately, I must delete the backend folder instance, hope I can find a solution for that.
You do an excellent job. Thank you!!!
amazing.
Great tutorial, I really liked the fact that you went into the "why" along with the "how". Subscribed!
Glad you found it helpful
Thank you so much ☺
Very nice explanation, Thank you so much you did really great help..
So very glad you found is helpful🙏
Thanks a lot boss.
You made this so easy to understand for beginners...i love the way you explain things and i liked the concept of showing the process of solving the errors also it helps.thank you so much
I am very glad you liked it thanks for the positive comment🙏
Phenomenal tutorial. Thank you for providing such a clear, easy-to-follow process that actually provides learning and not just a how-to for a single situation. Will definitely be following your future videos
Thanks champ🤓✌
Your explanations were really accurate yet easy to follow, definitly leave the errors, its helpful to see them being debugged. I would tipically deploy the backend to heroku and the frontend to netlify, so your aproach was really interesting to me, good work!
Glad you enjoyed it!
Great Job. Thank you.
THX! It works! :D
Thank you so much I like your videos, as a full-stack I like your video I'm using it as a future reference
Thank man hope to keep making videos and keep learning more and more💪🤓
@@the_full_stack_junkie Thank you so much for your reply , sure i will never stop learning
Well done!
omg thank you, honestly!!!!!!!!!!
Awesome!!! Thanks.
Thank you!
awesome video
thnx a looooot
allow for everyone option is not showing up
this is really a great video but am in a very headache situation,the problem is when i tried to check if my react app run in a production build ,the errors pop out saying "TypeError: path must be absolute or specify root to res.sendFile" pls help me out guys??
hello sir, sometimes the client and server are created on diffrent folders, in that case how to deploy it?
Solid video! is a tutorial on SQL with prisma/typeOrm on the cards ?
Glad you liked it and sorry not at the moment trying to focus solidly only on MERN
@@the_full_stack_junkie Alright :D no problem
@@omkarkulkarni3644 sorry man I myself am learning as i go don't want to split my work to much
I did your MERN e-commerce tutorial and I'm currently uploading it to heroku following this tutorial. I just deployed the app but I'm receiving a 503 error. Any suggestions on what I need to fix it? cheers
Apparently this method does not work well when there are dev dependancies in your project. The only way to make it work would be shifting all you devDependancies to dependancies. Please show us a method to deploy if there are devDependancies in your project. Thank you !
What if your backend is more than one file? do you put the client folder into the backend folder?
Does anyone know why axios returns instead of JSON?
Anyone know why my build folder is displaying a blank page in browser when I server it on an express server
top
Sir i know to create ecommerce website with react js, please tell how to connect with ( shiprocket ) or any other postal Service.
can we deploy MERN application in a local area network? among different computers which have to be synced when the internet is not avalible
may the folder structure affect the deploymemt process? I mean what if we have clinet folder and backend folder seperate, and not the backend as the root folder and client folder in it as ti is in this tutorial.
Am not using Mongodb atlas, can I also deploy it from my locally installed mongogb
const __dirname = path.resolve();
for reference error in server.js file
Where u put base URL to fetch post?
Please make mern filtering and any video streaming app
yes sir i also need this video
! [remote rejected] master -> master (pre-receive hook declined) HELP
This video was much needed! I was able to get my project deployed but my data is not showing up unless my server is running in the backend and that is after the deployment to heroku. the error I'm getting is: Failed to load resource: net::ERR_CONNECTION_REFUSED. I'm not sure why the database I'm pointing to is not running unless I run it in the terminal. please help! Thanks in advance
also I'm using a proxy in my frontend package.json to help me send request to my backend
Make sure you add you IP address or alloe from anywhere when setting up mongodb cluster.
And check if you added the password to te connection string you will see a space to enter it
when i run this node utils/importData.js --import i am having this ERROR 💥: MongooseError: Operation `posts.insertOne()` buffering timed out after 10000ms
Apparently, you can't use "__dirname" if you are using the ECMAScript module import syntax. Who else has experienced this. It gives you an error: __dirname is not defined. Still trying to figure out how to go about it.
To get past this do the following:
import path from 'path'
.
.
const __dirname = path.resolve( );
Hope it helps🤘
@@the_full_stack_junkie Thanks a lot. This worked to fix the mentioned error. Unfortunately, I encountered another one while pushing to heroku:
remote: npm ERR! code ENOENT
remote: npm ERR! syscall open
remote: npm ERR! path /tmp/build_83dc69a8/client/package.json
remote: npm ERR! errno -2
remote: npm ERR! enoent ENOENT: no such file or directory, open '/tmp/build_83dc69a8/client/package.json'
remote: npm ERR! enoent This is related to npm not being able to find a file.
remote: npm ERR! enoent
I suspect it's from the Serve React snippet. Here is what it looks like:
if (process.env.NODE_ENV === "production") {
const __dirname = path.resolve();
app.use(express.static(path.join(__dirname, '/client/build')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'));
})
} else {
app.get('/', (req, res) => {
res.send('API running');
})
}
Ps: My folder structure is slightly different from yours, the client and server are in two separate folders. I have tried "../client" but I get the same error.
Try to run this setup locally where you just set the NODE_ENV to production in .env file.
Then check if you get any error when trying this. I think you will get a better error response as to what is wrong with this startup process, "some file is not being found apparently", so if it runs smoothly on your local env with NODE ENV set to production then there is something else wrong but this way we can narrow down the search
@@the_full_stack_junkie This is the error I'm getting when I try to access localhost:5000 with NODE_ENV = production:
Error: ENOENT: no such file or directory, stat 'E:\P2P System Project\server\client\build\index.html'
I think I have seen the issue. It's with the path. My client folder is not within the server folder. It's under the "System Project" folder.
From this line: app.use(express.static(path.join(__dirname, '/client/build'))); how can I reference that? I tried "../client/build" to go a level back but it didn't work.
Sir, how to upload videos in node js, is efficient in storing videos in mongo db,
No i would definitively not recommend saving static files like images,video, and files in the database. Rather store it in something like AWS S3 buckets
@@the_full_stack_junkie thank u sir, I going to read AWS
My project has seperate folders for client and server. I want my github repo to contain these 2 folders so i use git init inside this main folder(which contains client and server folders)
But for deploying back-end to heroku i'll have to use git init inside server directory which means i'll be creating a new repo inside another repo. Can it cause any problems?
What could be a better approach for deploying back-end from such repo(which contains seperate folders for client and server)?
Don't believe so i think anyways everytime you run git add .
it does both directories anyways
@@the_full_stack_junkie thanks for your response. Is it usually preferred to have a folder structure like the example you had in video instead of having contents of client and server in sibling directories?
Hey man like i would not be able to tell you whether is is used by big companies as I have learned to do it this way and seen many blog posts and courses outline it like this as well and I currently use this structure in my freelancing projects.
@@the_full_stack_junkie got it. Really appreciate your help.
why did mongodb allow access from your server? You never whitelisted the IP of the heroku app
You are right i never whitlisted IP for heroku during this tutorial I belief I gave access from anywhere.
@@the_full_stack_junkie I thought that wasnt possible? Can you still allow from anywhere on Atlas today?
@@AndyChamberlainMusic Hey man so I went and checked out my mongodb atlas dashboard and I did see that the button to give access from anywhere is not there anymore, but you are still able to add this as any IP address range IP address for anywhere: 0.0.0.0/0. Maby try using that and let me know else you will need to add your server ip as whitelist
and if the demo time ends the application will not work ( heroku )
Heroku has n paid tier that is 7dollars per month that allows you to ensure that the application never sleeps
WE WANT MORE DEVOPS. DIGITAL OCEAN ETC AND GIT
Will do champ next video will show you how my deployment workflow works with git, github and linux server
It will load the frontend if the website is accessed using the baseURL
for example "www.example.com" will load the frontend but if I type any specific path
for example typing "www.example.com/post" it won't redirect to the posts page, any fixes?
Hey man so the only solution I can think of from this comment is that you should make sure that your piece of middleware we code on around the 19:45 mark doesn't have the correct route value or you never added the NODE_ENV=production variable to your Heroku app. This route value should be a '*' as this allows you to access the site from any endpoint of the domain. Hope this helps.
Hi, Samuel, so I am encountering the same problem. Have you gotten the fix?