DEV Community

How to deploy a Webapp to Heroku (Node.js, React.js and MongoDB)

Thiago Pacheco on July 05, 2019

On my last post I explained how to create a full-stack webapp with Node.js, React.js and MongoDB. Now I am going to show how to deploy this app to ...
Collapse
 
xporium profile image
xporium

Hi,
Nice article. but after added "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client" i cant deploy code on heroku it is giving me error like "failed to push some refs to my application"
and if i remove this line then its deploy successful but at that time site not working. So can you tell me why is this happening?

Thanks,
Dilip

Collapse
 
pacheco profile image
Thiago Pacheco

Hi Dilip,

This error usually happens when there are some conflicts while pushing to heroku, I am not sure if that is because of the environment variable.

Could you tell me what do you get in your logs on Heroku?

You can retrieve the logs going to the root of your project and using the following command:

heroku logs --tail

Collapse
 
leosalgueiro profile image
LeoSalgueiro

Hi thiago, good post!
i have a problem. the deploy in heroku and connection its ok, but when i tried make petitions to the backend, i recived a 503 unavailable.
I have the settings from the previous post...

Collapse
 
pacheco profile image
Thiago Pacheco

Hi Leo, thank you!
Usually when you get error 503 is because there was something wrong with the deployment.
You can use the heroku logs to check what happened:

heroku logs

Take a look at the docs here for more info:
devcenter.heroku.com/articles/logging

Collapse
 
dhowe profile image
Daniel Howe

Nice article. What is the point of the NPM_CONFIG_PRODUCTION flag, and when does it get set to true?

Collapse
 
pacheco profile image
Thiago Pacheco

Thank you, Daniel.

The NPM_CONFIG_PRODUCTION is used in case you need access to packages declared under devDependencies in a different buildpack or at runtime.
Then when your app is ready for production it is better to set it to true.

Collapse
 
coffeetub profile image
Jack

I've read that mLab is being deprecated in favor of MongoDB Atlas. Is this true?

Collapse
 
pacheco profile image
Thiago Pacheco

Yes, that is true.
MLab was bought by MongoDB Inc, so they are working on migrating everything.
But mLab is still supported on Heroku.

You can have more information here blog.mlab.com/2018/10/mlab-is-beco...

Collapse
 
tomaszchylinski profile image
TomaszChylinski

Seems that once you add mLab you need to add a user and edit your config

Collapse
 
pacheco profile image
Thiago Pacheco

It should not be necessary, once mLab provides us with an environment variable on Heroku settings automatically.

Collapse
 
deepgera profile image
deepgera

hi,thiago my react app runs perfectly i wrote
"build": "concurrently \"npm run start\" \"cd webpage && npm install && npm run start\"" this helped me in building app locally but when i deploy on heroku it says concurent not found

Collapse
 
lahiruz profile image
Lahiru Jayamanna

Hi Thiago,
Now heroku not allowing to add mLab MongoDB addon.

And I need to why we need to add it? can't we just manually input the db url as config variable inside heroku?

Collapse
 
mamanidaniel profile image
daniel

I can't express all my thanks for this post and the previous one. Thank you very much!

Collapse
 
pacheco profile image
Thiago Pacheco

Thank you Daniel, it makes me really happy that you liked it!!!