Discussion on "Deploying MERN to Heroku (success)"

Jake Foraker · 2016-05-14T23:29:44.000Z

Note for 2020: MERN stack is going out of style, as this was originally written in 2016 😱 If you haven't checked out the MERN project, do yourself a favor and check it now and enjoy some next level javascript architecture and tooling! Though instal...

Getting the error of can, not post /adminLogin, unable to get data from the database (MongoDB) can anyone tell me? thanks

Hi,

Great tutorial, I've successfully deployed my app, but there is no CRUD functionality. Can you provide any insight as to why? There seems to be little consensus as to why that is, and with fewer solution. Any help would be appreciated. Thanks!

kicksstarter.herokuapp.com

Oh crap missed one, which mLablink should I put in there?

You shouldn't connect to your database via a GET request. It is bad practice and not recommended:

docs.mlab.com/data-api

"The first method - the one we strongly recommend - is to connect using one of the available MongoDB drivers. You do not need to use our API if you use the driver. In fact, using a driver provides better performance, better security, and more functionality.

The second method, documented in this article, is to connect via mLab’s RESTful Data API. Use this method only if you cannot connect using a MongoDB driver."

Your api is presumably in your heroku app, so you just set is as a relative path to the root. This is handled in server.js and you shouldn't have to change it: github.com/Hashnode/mern-starter/blob/master/serv…

You might to modify the start script in package.json and set the env to production like NODE_ENV=production. See step 5 in the tutorial above.

I'm going to try this when I get a chance, thank you so much!

Hello!

I deployed my MERN app to Heroku, it is rendering properly and my third-party API search function works well. However, it seems like my GET and POST methods to add new data is not working now. I also lost the datas that were originally stored on my database. I got the below errors:

GET localhost/api/projects net::ERR_CONNECTION_REFUSED OPTIONS localhost/api/projects net::ERR_CONNECTION_REFUSED Uncaught (in promise) Error: Network Error at createError (createError.js:15) at XMLHttpRequest.handleError (xhr.js:87)

Originally I had the Mixed-Content error and I fixed that by adding the below to my index.html's head section: <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Here is link to my app: https://fierce-sierra-67905.herokuapp.com/

This is my first time deploying MERN app on Heroku and have struggled for a while. Any help would be much appreciated!

Looks like you forgot to update your own API url from your local development version. Make sure to change it to your new heroku URL. (Or omit the location and use just "/api/projects" if that makes sense for your configuration)

Thank you Jake Foraker ! That took care of the GET error, however my original datas are still not showing and I am still getting this:

POST fierce-sierra-67905.herokuapp.com 404 (Not Found)

My connection.js:

var mongoose = require("mongoose")
mongoose.connect("mongodb://localhost/projectbook", (err) => {
   if(err) {     
    console.log(err)  
 } else {     
console.log("MongoDB is Connected!")   } })

module.exports = mongoose

Package.json:

...

"scripts": {     
"start": "cross-env NODE_ENV=production MONGO_URL=mongodb://localhost/projectbook node index.js",     
"start-dev": "nf start -p 3000",     
"build": "react-scripts build",     
"test": "react-scripts/test.js --env=jsdom",     
"eject": "react-scripts eject"   },  
... 
"testEnvironment": "node",     
"testURL": "localhost", 
...

Am I supposed to deploy my mongodb on a separate heroku deployment?

Please pardon my ignorance, Thanks again for your help!

So there's, in my view, a better way to do this. The issue is by removing dist from the gitignore, every time you're committing to your main repo, you're committing all these changed dist files which is a bit annoying. Also when you're pushing to Heroku, it's pushing in all the non-built files as well, and other things it doesn't need.

What you can do instead is create a new git in the dist directory and push that to heroku. This won't work out of the gate, what you need to do is:

move the built files into a sub-directory called dist inside dist (yes, /dist/dist).
copy package.json and index.js to the original dist (/dist)
initialize a new git inside /dist, add files, add heroku remote, and push to heroku.

Now you're not tracking every change to a distribution file in your main git repo. You could script the above to make the process even easier.

Nice. This post was by no means a comprehensive best practice guide, more like how to get it live quickly. Thanks for sharing.

I get the error Error: Cannot find module './dist/server.bundle.js'. I checked the dist folder and no server.bundle.js was generated. Any idea what could be going wrong?

As it turns out, we have to run npm run build:serverto generate the missing server.bundle file.

Also, we need to update the renderFullPage function in server.js. The generated js & css is mapped by manifest.json as "/main.css": "/app.<some_hash>.css" and "/main.js": "/main.<some_hash>.js". So, the style sheet reference in generated html should be updated to <link rel='stylesheet' href='${assetsManifest['/main.css']}' /> and the js reference to be updated to <script src='${process.env.NODE_ENV === 'production' ? assetsManifest['/main.js'] : '/app.js'}'></script>.

Then run npm run build:server and deploy.

Aha! Was finally able to deploy successfully after including these missing asset tags!

when adding your mongo url be sure to remove the <<>> around your username and password

Awesome work @jakeforaker ! Send a PR to mern-starter after adding a link to your story in readme.

So it looks like you are trying to point to localhost again. You need a hosted instance of your database, with a connection string (url) that is accessible to the outside world (the interwebs). Luckily, Heroku makes this extremely easy with the mLab addon elements.heroku.com/addons/mongolab. All you have to do is add it, and you get a free tier instance.

You will replace your current MONGO_URL env variable with the new one provided by Heroku.

Discussion

Deploying MERN to Heroku (success)

Responses(7)

Recent in Forum

Search Hashnode

Deploying MERN to Heroku (success)

Responses(7)

Recent in Forum