If someone is having problems with the deployment, I suggest you go to your cluster at the mongo atlas, then go to the security tab -> ip whitelist -> add new ip -> "Allow access from anywhere" and finally you return to the terminal and do the upload process again, it should work normally.
This worked! I was able to deploy to Heroku, but before I did this IP change, the app wasn't getting/working with any Data. Makes perfect sense. Great solution, thanks
5 лет назад+2
Thanks, it really worked for me also. I did what you said in order to stop and restart the app on heroku using CLI: heroku ps:scale web=0 and heroku ps:scale web=1.
When index.html is loaded and React tries to get all items, I had "Error: Request failed with status code 503". Your suggestion solved the problem, thanks!
Hey Brad, I've finished my software engineering course recently. But from last few years I was trying to follow your tutorials and believe me I got most of skills due to you not because of my university! This is the first time I took a course from online and I've started by taking your MERN stack course! :D Thanks man..
If you get an error when deploying, see if the error comes after: NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client If it's the case then check if there is an existing git repository in the ./client/ folder. If so, remove it (rm -rf ./client/.git/) and attempt to deploy again. This solved the issue for me. Cheers! :)
BRADDDDDDDDDD, I'VE WATCHED AT LEAST 20+ videos and have miserable failed to deploy MERN stack app for months, but finally your tutorial worked. Thank you so much.
Thank you so much, there is no other such clear instructions on any blog or videos that I came through on how to deploy MERN Stack app on heroku. I was trying to deploy my app from last 3 days and getting error every time. Thanks to you, it worked in the first go. A big hug.
For Everyone facing the same problem try to to remove git folder form client retry git process in root directory, that may help!!
3 года назад+2
Thanks again, Brad.. Since 2018 I have forgotten how many time I came here when I need to deploy something to Heroku. Here is my two cents worth: If you are using yarn, the script is slightly different since "--prefix" doesn't work with yarn. "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false yarn --cwd ./client install && yarn --cwd ./client build" I hope it helps someone! :)
To anyone struggling to deploy to heroku, I would recommend rebuilding the app from scratch in a new folder with a git repository initialised from the word go. Kind of an oversight on Brad's part here not mentioning it since that is what you would do in a real dev environment, and he himself did it without telling us. Commit changes after adding npm packages, and copy pasting all the business logic. I basically bricked my first attempt trying to untangle the React and Root level git repositories. Remeber to whitelist the connection from heroku in your mongoDB Atlas before deploying, otherwise the app will not display your list items and you'll have to deploy again!
Thanks for the help.. was struggling for the whole day.. and now i am finally able to host my express sever to heroku.. thanks to you.. was able to figure things out.. please keep up the good work...
If it helps, I was getting an error in heroku saying that it could not find the client's package.json: remote: npm ERR! path /tmp/build_f7f27006d6fa28c86a392d5806a7420c/client/package.json remote: npm ERR! code ENOENT .. remote: npm ERR! enoent ENOENT: no such file or directory, open The problem was the client/.git file automatically generated by react-create-app. see github.com/bradtraversy/mern_shopping_list/issues/7
Thanks. I can stop beating my head against the wall now. Note: I had to delete the git repositories in both the client and root directories and then do a git init in the root directory again.
For people who got errno 126: 1. Create a new file named .gitignore in root folder and client folder 2. Write .gitignore /node_modules 3. Run "git rm -r --cached . " in the root folder 4. Run "git add . " in the root folder 5. Run "git commit -am 'commit' " in the root folder 6. Run "git push heroku master" in the root folder
Wow, this was a great learning experience, just bought the udemy course, looking forward to learning some more! Thank you for another great series Brad!
Assuming you've completed it by now, can you recommend it? I really like Brad's way of teaching, and I would like to support him, but I am debating this course to some of his other ones.
Thank you thank you thank you Brad! Every tutorial I came across only deomnstrated how to deploy a static hello world react app, and I needed my react hooks and context to work properly. This helped me do just that! I couldnt thank you enough!
I loved this project! Alot i still need to understand, like redux. It went way over my head, but I'm glad I stopped and did the redux crash course before i went into the redux section on the series so i had an idea what was happening. Thanks Brad!
Nice course Brad, if u are planning to add some authentication, it would be great to see some google sign in instead of the classic username/email and password.
If you are having a problem with deployment try this. Delete the .git folder in client from your file explorer, ensure that the show hidden files option is checked, then run: git rm -f --cached client git add . git commit -m "commit message" git push heroku master
Brad I love your videos and your course. I’m currently enrolling in your Modern JavaScript from the beginning course and I think it’s the best course in Udemy for JavaScript. I also want to learn Python but the courses out there just not as good and since I learn best from you I’m hoping you can create Python full stack courses maybe using Django or Flask. I notice Python also on the rise in 2018. Thank you brad
Excellent Series! I really appreciate how you do your best to explain what the code is doing as you write it. I found it very helpful. Just purchased your Udemy course using your link! Looking forward to starting it tommorrow!
For anyone getting a page with just "Cannot GET /", adding the following to server.js worked for me: var distDir = __dirname + "/dist/"; app.use(express.static(distDir));
For those of you who got problem with Postbuild, try "cd client && NPM_CONFIG_PRODUCTION=false npm install && npm run build" instead of --prefix client. Apparently it worked in the past and not so much now
Thank you again Brad! Some of us really appreaciate the long content who goes deep. I know it doesent rack up the most views, but the diehard fans really enjoy it! Thanks from Norway!
Some tips before deployment: 1. Safe Git Remove .git and .gitignore from client folder and then run git init in your root folder from bash. if you have already done it, remove them and again run git init. 2. in server.js file, modify the mongoose.connect method by adding two properties. sample: connect(db, { useNewUrlParser: true, useUnifiedTopology: true }) 3. disable redux devtools in client/src/store.js
Done. Thanks for a well-done overview. If anyone gets stuck on this step, double check this line: "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client" The dashes verse underscores held me up and the heroku site only said something like Error Not Found 404.
Could you help me? Im getting this error when I - git push heroku master - ........... ........... added 1314 packages in 634.983s > client@0.1.0 build /tmp/build_4eebfe79cf9fffb6fe8992eb5df34a7e/client > react-scripts build Creating an optimized production build... Failed to compile. Module not found: Error: Can't resolve 'C:/Users/Regie/AppData/Local/Microsoft/TypeScript/2.9/node_modules/redux' in '/tmp/build_4eebfe79cf9fffb6fe8992eb5df34a7e/client/src'
Sorry it's taken so long. Have you checked the location? C:/Users/Regie/AppData/Local/Microsoft/TypeScript/2.9/node_modules/redux Being that this isn't a TypeScript course, I find the folder structure odd.
Oh come ooooon.... I've watched all previous videos from this playlist, looking at it like it was my last hope. I can't deploy my MERN app for almost one week now! And right at the end... I've done everything exactly the same, i mean exactly the same! And here again... push failed, pre-receive hook declined. Can somebody tell me what's up with the universe?
Great tutorial Bred, as usual.! The only thing that im struggling with is the git repo. As soon as i initialize a new repository for the MERN-project, the client folder "./client" wont be uploaded on "git push origin master". Thats also the reason why the deployment to heroku is currently not possible for me. The .gitignore file only contains the /node_modules. Did i miss something?
Just figured out what was wrong with my deployment, everything was working but the deployed version was not able to get, add or delete. I forgot I had added an .env and forgot to include my environment variables in Heroku, took a good chunk of time for me to figure that one out. Just in case someone gets stuck with that as well just go to your app on heroku -> settings -> config vars and then just make sure they match up to your .env file.
See his Udemy course: MERN Stack Front To Back: Full Stack React, Redux & Node.js I've almost completed it, and it's super. He has the same pace, the same level of detail throughout, and thoroughly covers login/authentication. For me, this 8-video series has been a very useful supplement to that course.
The API Calls that we are making using axios were pointed to "localhost:5000" which is our proxy set in the client/package.json. How is that after deployment, it is working correctly? The PORT we mentioned in the proxy is still 5000.
The process.env.PORT (second to last line of your 'server.js' file) detects whatever port that Heroku has your app running on and uses that for your backend proxy instead
@@zachwhite8054 Hello, I have this set up like the tutorial, but when live on heroku it is still trying to access through localhost:5000/api/... Any idea why that would be?
@@WinterMute2051 Make sure when deployed that your requested routes look like axios.get('/api/example') and not axios.get('http:localhost:5000/api/example') and that you are using a proxy in your script in your front end package.json . Also in the past I have benefited from adding a "Procfile" for Heroku to use. Look into that as well
Just to mention: yesterday, after i deployed the app, there were no items in the list so i added a new ip allowing access from everywhere but it didn't make any changes directly. I thought my app was broken but the morning it works correctly! So it can take some time to make the update.
I have deployed to Heroku fine. But the front end is still attempting to contact the localhost:5000/api/... instead of using heroku... How can I fix this?
LMAO "I know people will spam it and get my mLab account cancelled" - the words of an Internet veteran. Great video series, definitely gave me a good idea of what it's like to build and and deploy a fullstack app.
If you use Windows, you'll probably get an error when trying to create the "heroku-postbuild" script. To get around this, install the cross-env module (npm i cross-env) and put the cross-env keyword at the beginning of the script, like this: "heroku-postbuild": "cross-env NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
Am I the only one stucked here with deployment? I get Build failed error and I tried stack overflow solutions and went to heroku support, but still can't :(
This is a sugestions for all the tutorial. If you can record all the resources what you are use for the tutorial and common errors what you get and what is the way you are going to fix those errors it will be wary helpful. This is a suggestion if you can do it. It will make real developer after watch your tutorials. Some time I'm confusing how did you fixed that. And where did you from get that resource.
If anyone is struggling to deploy to Heroku: 1. In Heroku dashboard, click on 'Resources' then look for a section that says 'Add Ons'. Type "mLab" (sans quotes) and it should locate the mLab MongoDB addon. Enable it, it should say something about sandbox (it's free). 2. In your terminal, head over to your app at the main level (don't go into /client or /src or anything) and reinstall all your dependencies using npm i --save [name of dependency minus brackets] (If you carefully read the error output you get when you try to push to Heroku, it should say something like "Error: can't resolve 'axios'..." or whatever dependency is causing the issue, just reinstall that dependency using npm i --save [name of dependency here] that causing the error message and try pushing to Heroku again). 3. If the error persists, carefully read the error output and see if it's throwing a different dependency name. Just install the one that's causing an error like I said. Eventually you'll get through it all and the build will succeed. 3. ??? Profit???
After doing some many tutorials where the instructor would speed through the content it was great to find a teacher taking the time to explain every step of the process ! Just one question : I managed to deploy the app to heroku but for some reason I can only look at it on my desktop and I can't look at it on my iPhone is it normal ? Thanks Brad !
In my store I changed the createstore to: -> const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore(rootReducer, initialState, composeEnhancers(applyMiddleware(...middleware))); and now it works on phone, firefox, IE, etc...
Hi Brad,The deployment is working perfectly on desktop,but when I tried accessing the same url on a mobile device,The ReactDom is not rendering the "root" div. Although the index.html is rendering (I tried adding a for checking - which is visible on the mobile) Any tips?
For the people getting a blank webpage after deploying to heroku, Check the Dev tools and the the console : if you see something like : TypeError: Cannot read property 'apply' of undefined it's probably related to the REDUX EXTENSION lines of code in client/src/store.js file, I fixed the problem by removing the : compose( applyMiddleware(...middleware), window._REDUX_DEVTOOLS_EXTENSION_ && window.__REDUX_DEVTOOLS_EXTENSION__() ) and just putting : applyMiddleware(...middleware) Hope this helps
on deleting "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client" , my app got deployed in heroku but on opening the app it says 'not found'.....please help
If react app is too large. Won't there be any perfomance issue? As it looks so static. Serving that much static data in each request should take a lot of time.
Do not create the app through Heroku CLI if you want better name for the app. Create the app through the Heroku website and it gives you option to name it. (I think it is available as a command line option flag in CLI too, though).
Also, you can create a config var in Heroku which holds the MongoDB connection string, that way you don't have to expose the string in code. Do something like this: const db = process.env.MONGO_URI || require("./config/keys").mongoURI;
not sure if you're having the exact same issues I did but I had to delete my .git files from the client folder. This may help: github.com/bradtraversy/mern_shopping_list/issues/7
@@codingmechanic8954 thanks, I've been troubleshooting for almost an hour. You are right, deleting the .git files inside client folder solves the issue.
Thanks Brad, well done. It all worked well for me even the herokuapp deployment, It works well on the desktop. Except when I try to get to the app via my phone's chrome application it doesn't show anything....any ideas what I may be missing?
The issue is the redux devtool . you browser need to have it in order to run the app . the soultion can be found here stackoverflow.com/questions/50505805/heroku-app-only-works-on-chrome-desktop-react-js-application
Nice tutorial. I download the code and compile it but I have an issue with GET and POST, which is POST localhost:3000/api/auth/register 400 (Bad Request). Any idea why?
Hi. When I tried to upload my MERN app after following every step you did, it gave me a white screen. But when I run it locally, it works. Can you please help me out?
it always says _command build not found_ but only when i run *git push heroku master**, if i simply run *heroku-postbuild* locally, there is no error, what shoud i do?
That was really awesome video deploying MERN App on Heroku. I really appreciate if u can make a video on Deploying the MERN on AWS . Or atleast the Steps to do deployment. As there no Video on YT which adheres to industry standards.That would really the MERN Develeopers..Thanks in Advance.
If you are getting a 503 Service Unavailable error on your deployed Heroku app when the front end makes requests to the back end, try "npm install -g serve" in your terminal and repeat the Heroku build process. I had never installed the serve package globally and so it seems like my back end couldn't be served up for the front end to make calls to.
Hey Brad, Since heroku is now paid, how can we host the same app on firebase or vercel or netlify. I couldn't find a way to upload a project with similar skeleton. If possible, can you make a video tutorial for that
I want to get the full tutorial because I could follow this really well, but I'm new to Javascript so I'm not sure if I should just jump into it. I know Java and PHP so is that background enough for me to just jump into it, or must I learn Javascript first? or can I learn MERN then brush up on my JS later?
In case anybody was getting an error in VSCode like 'heroku is not a recognized term', try restarting VS. If that doesn't work, verify you installed it by running the same command in vanilla PowerShell.
![Learn The Mern Stack [9] - Backend JWT Auth](http://i.ytimg.com/vi/USaB1adUHM0/mqdefault.jpg)
![Learn The Mern Stack [9] - Backend JWT Auth](/img/tr.png)
![Megan Thee Stallion - Mamushi (Remix) [feat. TWICE] [Official Audio]](http://i.ytimg.com/vi/5c0_u9PsrsQ/mqdefault.jpg)
If someone is having problems with the deployment, I suggest you go to your cluster at the mongo atlas, then go to the security tab -> ip whitelist -> add new ip -> "Allow access from anywhere" and finally you return to the terminal and do the upload process again, it should work normally.
This worked for me. Thanks!
This worked! I was able to deploy to Heroku, but before I did this IP change, the app wasn't getting/working with any Data. Makes perfect sense. Great solution, thanks
Thanks, it really worked for me also. I did what you said in order to stop and restart the app on heroku using CLI: heroku ps:scale web=0 and heroku ps:scale web=1.
When index.html is loaded and React tries to get all items, I had "Error: Request failed with status code 503". Your suggestion solved the problem, thanks!
fixed it with this solution man. thanks
Hey Brad, I've finished my software engineering course recently. But from last few years I was trying to follow your tutorials and believe me I got most of skills due to you not because of my university! This is the first time I took a course from online and I've started by taking your MERN stack course! :D Thanks man..
If you get an error when deploying, see if the error comes after: NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
If it's the case then check if there is an existing git repository in the ./client/ folder.
If so, remove it (rm -rf ./client/.git/) and attempt to deploy again.
This solved the issue for me. Cheers! :)
BRADDDDDDDDDD, I'VE WATCHED AT LEAST 20+ videos and have miserable failed to deploy MERN stack app for months, but finally your tutorial worked. Thank you so much.
Thank you so much, there is no other such clear instructions on any blog or videos that I came through on how to deploy MERN Stack app on heroku. I was trying to deploy my app from last 3 days and getting error every time. Thanks to you, it worked in the first go. A big hug.
howd u get past the 503 error
For Everyone facing the same problem try to to remove git folder form client retry git process in root directory, that may help!!
Thanks again, Brad.. Since 2018 I have forgotten how many time I came here when I need to deploy something to Heroku.
Here is my two cents worth:
If you are using yarn, the script is slightly different since "--prefix" doesn't work with yarn.
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false yarn --cwd ./client install && yarn --cwd ./client build"
I hope it helps someone! :)
To anyone struggling to deploy to heroku, I would recommend rebuilding the app from scratch in a new folder with a git repository initialised from the word go. Kind of an oversight on Brad's part here not mentioning it since that is what you would do in a real dev environment, and he himself did it without telling us. Commit changes after adding npm packages, and copy pasting all the business logic. I basically bricked my first attempt trying to untangle the React and Root level git repositories. Remeber to whitelist the connection from heroku in your mongoDB Atlas before deploying, otherwise the app will not display your list items and you'll have to deploy again!
Thank you for the info on the whitelist I was going crazy trying to find a solution. It worked.
Thanks for the help.. was struggling for the whole day.. and now i am finally able to host my express sever to heroku.. thanks to you.. was able to figure things out.. please keep up the good work...
If it helps, I was getting an error in heroku saying that it could not find the client's package.json:
remote: npm ERR! path /tmp/build_f7f27006d6fa28c86a392d5806a7420c/client/package.json
remote: npm ERR! code ENOENT
..
remote: npm ERR! enoent ENOENT: no such file or directory, open
The problem was the client/.git file automatically generated by react-create-app. see github.com/bradtraversy/mern_shopping_list/issues/7
Thanks mate!! cheers
Thanks for this!
Life saving stuff bro
Thanks. I can stop beating my head against the wall now. Note: I had to delete the git repositories in both the client and root directories and then do a git init in the root directory again.
Nice one
When he said these are the cross your finger moments ... I FELT THAT LMAOOo. Thanks for helping me complete my first fullstack app after all this time
For people who got errno 126:
1. Create a new file named .gitignore in root folder and client folder
2. Write
.gitignore
/node_modules
3. Run "git rm -r --cached . " in the root folder
4. Run "git add . " in the root folder
5. Run "git commit -am 'commit' " in the root folder
6. Run "git push heroku master" in the root folder
thank you so much
Wow, this was a great learning experience, just bought the udemy course, looking forward to learning some more! Thank you for another great series Brad!
Assuming you've completed it by now, can you recommend it? I really like Brad's way of teaching, and I would like to support him, but I am debating this course to some of his other ones.
Woohoo finally up and running. Half a day of coding along, half a month of debugging. Thank you Brad
Thank you thank you thank you Brad! Every tutorial I came across only deomnstrated how to deploy a static hello world react app, and I needed my react hooks and context to work properly. This helped me do just that! I couldnt thank you enough!
I loved this project! Alot i still need to understand, like redux. It went way over my head, but I'm glad I stopped and did the redux crash course before i went into the redux section on the series so i had an idea what was happening. Thanks Brad!
Nice course Brad, if u are planning to add some authentication, it would be great to see some google sign in instead of the classic username/email and password.
++
+1
+1
Has authentication been added already from Brad?
@@StAbyyyy its added now
If you are having a problem with deployment try this.
Delete the .git folder in client from your file explorer, ensure that the show hidden files option is checked, then run:
git rm -f --cached client
git add .
git commit -m "commit message"
git push heroku master
Thank you so much! I've been trying too many things and never succeeded you saved my life
Best developer youtuber ever
Brad I love your videos and your course. I’m currently enrolling in your Modern JavaScript from the beginning course and I think it’s the best course in Udemy for JavaScript. I also want to learn Python but the courses out there just not as good and since I learn best from you I’m hoping you can create Python full stack courses maybe using Django or Flask. I notice Python also on the rise in 2018.
Thank you brad
If you're new to python, I can recommend sentdex's video series covering the python basics and intermediate features!
Thank you for the info
Excellent Series! I really appreciate how you do your best to explain what the code is doing as you write it. I found it very helpful. Just purchased your Udemy course using your link! Looking forward to starting it tommorrow!
For anyone getting a page with just "Cannot GET /", adding the following to server.js worked for me:
var distDir = __dirname + "/dist/";
app.use(express.static(distDir));
Thanks, how did you figured this out? can I get a reference material?
Such a good feeling getting it deployed. Great stuff man, cheers for all the effort you put into your videos.
How did you get the deployment to work? Was it easy? Did you do any extra steps apart from the video tutorial? I cannot get the deployment to work.
For those of you who got problem with Postbuild, try "cd client && NPM_CONFIG_PRODUCTION=false npm install && npm run build" instead of --prefix client. Apparently it worked in the past and not so much now
Thank you again Brad! Some of us really appreaciate the long content who goes deep. I know it doesent rack up the most views, but the diehard fans really enjoy it! Thanks from Norway!
Some tips before deployment:
1. Safe Git Remove .git and .gitignore from client folder and then run git init in your root folder from bash. if you have already done it, remove them and again run git init.
2. in server.js file, modify the mongoose.connect method by adding two properties. sample: connect(db, { useNewUrlParser: true, useUnifiedTopology: true })
3. disable redux devtools in client/src/store.js
Done. Thanks for a well-done overview. If anyone gets stuck on this step, double check this line:
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
The dashes verse underscores held me up and the heroku site only said something like Error Not Found 404.
Could you help me? Im getting this error when I - git push heroku master -
...........
...........
added 1314 packages in 634.983s
> client@0.1.0 build /tmp/build_4eebfe79cf9fffb6fe8992eb5df34a7e/client
> react-scripts build
Creating an optimized production build...
Failed to compile.
Module not found: Error: Can't resolve 'C:/Users/Regie/AppData/Local/Microsoft/TypeScript/2.9/node_modules/redux' in '/tmp/build_4eebfe79cf9fffb6fe8992eb5df34a7e/client/src'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client@0.1.0 build script.
...........
...........
Was stuck for like 10 min read your comment and realized I spelled "heroku-postbuild" wrong in that exact line. Thanks brotha
Sorry it's taken so long. Have you checked the location?
C:/Users/Regie/AppData/Local/Microsoft/TypeScript/2.9/node_modules/redux
Being that this isn't a TypeScript course, I find the folder structure odd.
Its ok now. i referrenced this path. It should have not been. Thank you.
Absolutely wonderful video! Loved it! Gonna use this for my current project!
Brad you are doing more than what the newboston used to give us. guys! guys! guys!guys! brad is new MVP. yesssssss!!!
thenewboston's channel is pretty dead. i wonder what happened to him, but i agree, brad is great and is the new MVP!
@CodingBruh he got busy when he moved to New York
You are very good teacher. pleasure to meet you Sir.
Finallly, it's done. Thank you so much for the quality content ❤️
Thank you so much for the tutorials....God Bless
Awesome tutorials. I love them, the chuchuchu gets me every time lol
just finished this series and i gotta say u are the real MVP sir! thank you for all :)
When I deploy my 1st MERN app it will be on Nginx with PM2, thanks in advance for jumping up my dev process.
Its deployed finally .. thank you so much !
Amazing video. So useful. This Heroku thingy is exactly what i've been looking for!!
Outstanding.. what I was looking for to get a concurrent app to production!
Oh come ooooon.... I've watched all previous videos from this playlist, looking at it like it was my last hope. I can't deploy my MERN app for almost one week now! And right at the end... I've done everything exactly the same, i mean exactly the same! And here again... push failed, pre-receive hook declined. Can somebody tell me what's up with the universe?
I am facing same issue
Great tutorial Bred, as usual.!
The only thing that im struggling with is the git repo. As soon as i initialize a new repository for the MERN-project, the client folder "./client" wont be uploaded on "git push origin master".
Thats also the reason why the deployment to heroku is currently not possible for me. The .gitignore file only contains the /node_modules. Did i miss something?
solution in comments => github.com/bradtraversy/mern_shopping_list/issues/7
@@tllong124 OMG!! I am so thankful you for this discussion
Just figured out what was wrong with my deployment, everything was working but the deployed version was not able to get, add or delete. I forgot I had added an .env and forgot to include my environment variables in Heroku, took a good chunk of time for me to figure that one out. Just in case someone gets stuck with that as well just go to your app on heroku -> settings -> config vars and then just make sure they match up to your .env file.
Wow, you just saved me a lot of time. Thanks!
Hope you do add a login/authentication part to this series!!! Are there any other videos that anyone recommends to follow to implement one?
See his Udemy course: MERN Stack Front To Back: Full Stack React, Redux & Node.js
I've almost completed it, and it's super. He has the same pace, the same level of detail throughout, and thoroughly covers login/authentication.
For me, this 8-video series has been a very useful supplement to that course.
The API Calls that we are making using axios were pointed to "localhost:5000" which is our proxy set in the client/package.json. How is that after deployment, it is working correctly? The PORT we mentioned in the proxy is still 5000.
The process.env.PORT (second to last line of your 'server.js' file) detects whatever port that Heroku has your app running on and uses that for your backend proxy instead
@@zachwhite8054 Thanks Zach it helps. Let me know if you have any link to a resource where I can read further.
@@jAyAntswAmi No problem. stackoverflow.com/questions/18864677/what-is-process-env-port-in-node-js
@@zachwhite8054 Hello, I have this set up like the tutorial, but when live on heroku it is still trying to access through localhost:5000/api/... Any idea why that would be?
@@WinterMute2051 Make sure when deployed that your requested routes look like axios.get('/api/example') and not axios.get('http:localhost:5000/api/example') and that you are using a proxy in your script in your front end package.json . Also in the past I have benefited from adding a "Procfile" for Heroku to use. Look into that as well
Just to mention: yesterday, after i deployed the app, there were no items in the list so i added a new ip allowing access from everywhere but it didn't make any changes directly. I thought my app was broken but the morning it works correctly! So it can take some time to make the update.
Very nice course. Explained very clearly
Another successful series!! Thank you so much for being the best teacher Sir Brad :D
You're the man Brian.
I really liked this series and I hope you will add some autthentication stuff soon.
Great series, Brad. As always. Thanks for your guidance and hard work dedicating your precious time to teach us. I hope to pay it back soon. :)
I have deployed to Heroku fine. But the front end is still attempting to contact the localhost:5000/api/... instead of using heroku... How can I fix this?
LMAO "I know people will spam it and get my mLab account cancelled" - the words of an Internet veteran. Great video series, definitely gave me a good idea of what it's like to build and and deploy a fullstack app.
Thanks a lot for this awesome series.
Thanks, Brad! Great stuff as always.
I don't know why but hearing you say "weird ass names" is crackin me up LMAOOOO
If you use Windows, you'll probably get an error when trying to create the "heroku-postbuild" script.
To get around this, install the cross-env module (npm i cross-env) and put the cross-env keyword at the beginning of the script, like this:
"heroku-postbuild": "cross-env NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
Am I the only one stucked here with deployment? I get Build failed error and I tried stack overflow solutions and went to heroku support, but still can't :(
Same issue here, giving me something to do with fsevents and bad platform
This is a sugestions for all the tutorial. If you can record all the resources what you are use for the tutorial and common errors what you get and what is the way you are going to fix those errors it will be wary helpful. This is a suggestion if you can do it. It will make real developer after watch your tutorials. Some time I'm confusing how did you fixed that. And where did you from get that resource.
If anyone is struggling to deploy to Heroku:
1. In Heroku dashboard, click on 'Resources' then look for a section that says 'Add Ons'. Type "mLab" (sans quotes) and it should locate the mLab MongoDB addon. Enable it, it should say something about sandbox (it's free).
2. In your terminal, head over to your app at the main level (don't go into /client or /src or anything) and reinstall all your dependencies using npm i --save [name of dependency minus brackets]
(If you carefully read the error output you get when you try to push to Heroku, it should say something like "Error: can't resolve 'axios'..." or whatever dependency is causing the issue, just reinstall that dependency using npm i --save [name of dependency here] that causing the error message and try pushing to Heroku again).
3. If the error persists, carefully read the error output and see if it's throwing a different dependency name. Just install the one that's causing an error like I said. Eventually you'll get through it all and the build will succeed.
3. ??? Profit???
Ahh so greatful for this channel!
After doing some many tutorials where the instructor would speed through the content it was great to find a teacher taking the time to explain every step of the process !
Just one question : I managed to deploy the app to heroku but for some reason I can only look at it on my desktop and I can't look at it on my iPhone is it normal ?
Thanks Brad !
In my store I changed the createstore to: ->
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, initialState, composeEnhancers(applyMiddleware(...middleware)));
and now it works on phone, firefox, IE, etc...
@@arroyoruy Thank You! This worked for me also!
works in 2020! Thanks a ton!
This was super helpful!!!
Cannot GET / error when deploying. Anyone knows the problem
Excellent tutorial series! Many thanks!
Golden Angel. I can now put Fullstack developer in my Resume😂
Hi Brad,The deployment is working perfectly on desktop,but when I tried accessing the same url on a mobile device,The ReactDom is not rendering the "root" div.
Although the index.html is rendering (I tried adding a for checking - which is visible on the mobile)
Any tips?
I have the same issue @Traversy Media
It's an issue with the Redux Dev Tools extension in store.js. See this page: github.com/bradtraversy/mern_shopping_list/issues/6
For the people getting a blank webpage after deploying to heroku,
Check the Dev tools and the the console : if you see something like :
TypeError: Cannot read property 'apply' of undefined
it's probably related to the REDUX EXTENSION lines of code in client/src/store.js file,
I fixed the problem by removing the :
compose(
applyMiddleware(...middleware),
window._REDUX_DEVTOOLS_EXTENSION_ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
and just putting :
applyMiddleware(...middleware)
Hope this helps
Thank u for this awesome series Brad, next series on MEVN
on deleting "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client" , my app got deployed in heroku but on opening the app it says 'not found'.....please help
i m also getting same error
@@adnanaslam9604 Did anyone fix it because I have the same error.
I can see the app fully deployed and working on desktop but nothing showing up on Safari. Has anyone else had this issue?
If react app is too large. Won't there be any perfomance issue? As it looks so static. Serving that much static data in each request should take a lot of time.
Remember the proxy line in client > package.json?
Is this ignored in heroku? just trying to make sense of this.
Thank you very much.
Do not create the app through Heroku CLI if you want better name for the app.
Create the app through the Heroku website and it gives you option to name it.
(I think it is available as a command line option flag in CLI too, though).
Also, you can create a config var in Heroku which holds the MongoDB connection string, that way you don't have to expose the string in code.
Do something like this:
const db = process.env.MONGO_URI || require("./config/keys").mongoURI;
thanks teacher Brad Traversy very much from Viet Nam
thank you so much !!! It works, I am so very happy
thanks for the full course
You da man Traversy.
Thank you!
NB: add your laptops npm version in the server package.json file. for example:
"npm": "8.1.1"
at the engines part.
Thanks Buddy. Nice intro to MERN.
i can't deploy it to the heroku, it says 'heroku push failed', how to solve this problem
guys
not sure if you're having the exact same issues I did but I had to delete my .git files from the client folder. This may help: github.com/bradtraversy/mern_shopping_list/issues/7
@@codingmechanic8954 thanks, I've been troubleshooting for almost an hour. You are right, deleting the .git files inside client folder solves the issue.
Thanks Brad, well done. It all worked well for me even the herokuapp deployment, It works well on the desktop. Except when I try to get to the app via my phone's chrome application it doesn't show anything....any ideas what I may be missing?
The issue is the redux devtool . you browser need to have it in order to run the app . the soultion can be found here
stackoverflow.com/questions/50505805/heroku-app-only-works-on-chrome-desktop-react-js-application
Nice tutorial. I download the code and compile it but I have an issue with GET and POST, which is POST localhost:3000/api/auth/register 400 (Bad Request). Any idea why?
Hi. When I tried to upload my MERN app after following every step you did, it gave me a white screen. But when I run it locally, it works. Can you please help me out?
Can you make a video using Vercel? I spent couple of days and couldn't find any solution.
it always says _command build not found_ but only when i run *git push heroku master**, if i simply run *heroku-postbuild* locally, there is no error, what shoud i do?
Brad, you are awesome!
That was really awesome video deploying MERN App on Heroku. I really appreciate if u can make a video on Deploying the MERN on AWS . Or atleast the Steps to do deployment.
As there no Video on YT which adheres to industry standards.That would really the MERN Develeopers..Thanks in Advance.
Thanks for this amazing series, Brad. Hey, Can you please add a video on react-router-dom..??
How to deploy when using typescript in front end ? Would you use tsc or webpack + babel are needed ?
If you are getting a 503 Service Unavailable error on your deployed Heroku app when the front end makes requests to the back end, try "npm install -g serve" in your terminal and repeat the Heroku build process. I had never installed the serve package globally and so it seems like my back end couldn't be served up for the front end to make calls to.
Brand! Came back like a bullet train speed 😁😀
beautiful videos brad
One of my favorite videos on the entire internet
Hey Brad, Since heroku is now paid, how can we host the same app on firebase or vercel or netlify. I couldn't find a way to upload a project with similar skeleton. If possible, can you make a video tutorial for that
I want to get the full tutorial because I could follow this really well, but I'm new to Javascript so I'm not sure if I should just jump into it. I know Java and PHP so is that background enough for me to just jump into it, or must I learn Javascript first? or can I learn MERN then brush up on my JS later?
In case anybody was getting an error in VSCode like 'heroku is not a recognized term', try restarting VS. If that doesn't work, verify you installed it by running the same command in vanilla PowerShell.
Are you considering getting into blockchain development with Node.js, Truffle etc. ?
Maybe a dumb question, but how does the server get started automatically after it's been deployed to Heroku? It just automatically works?
Just finished the series! God Bless you Brad
Heroku only displaying the backend of MERN app. How can I fix this?