MERN Heroku deployment - works locally but not on heroku

JavaScript
1

Hello,

I’ve been trying to deploy MERN stack on heroku, day 7 of trying this.

I push my code into heroku. I dont get any error in that process. I got to the URL and I see an error it throws for not being able to connect. Its an error I created at the server side, so now I know it reaches/has access to the server code.

I see it creates the collections in my mongodb in mlab. I see that being created after pushing the code.

When I run heroku logs, I get the below error logs:

  • server listening on port: 38524.
  • Something is already running on port 38524.
  • npm run client exited with code 0

My index.js (server side):

mongoose
.connect(db, { useNewUrlParser: true })
.then(()=> console.log(‘mongodb connected’))
.catch (err => console.log(err));

app.use(handle.error);

app.get(“*”, (req, res) => {
res.sendFile(path.resolve(__dirname, “client”, “build”, “index.html”));
});

app.listen(PORT, () => console.log(Server listening on port ${PORT}));

const PORT = process.env.PORT || 4000
==========================================

My .env:

PORT=4000
SECRET=‘ThisIsTemp’

package.json ( server side)

“scripts”: {
“server”: “node index.js”,
“client”: “cd client && npm start”,
“start”: “concurrently "npm run server" "npm run client"”,
“seed”: “node seed.js”,
“heroku-postbuild”: “cd client && npm install && npm run build”
},
=====================================

Heroku Logs:
2019-02-19T16:17:30.158215+00:00 app[web.1]: [0] Server listening on port 38524
2019-02-19T16:17:30.343746+00:00 app[web.1]: [0] Mongoose: users.ensureIndex({ username: 1 }, { unique: true, background: true })
2019-02-19T16:17:30.363783+00:00 app[web.1]: [0] (node:51) DeprecationWarning: collection.ensureIndex is deprecated. Use createIndexes instead.
2019-02-19T16:17:30.365066+00:00 app[web.1]: [0] mongodb connected
2019-02-19T16:17:30.380478+00:00 app[web.1]: [0] Mongoose: users.ensureIndex({ password: 1 }, { unique: true, background: true })
2019-02-19T16:17:30.686480+00:00 heroku[web.1]: State changed from starting to up
2019-02-19T16:17:33.011930+00:00 app[web.1]: [1] Something is already running on port 38524.
2019-02-19T16:17:33.094706+00:00 app[web.1]: [1] npm run client exited with code 0

Latest Heroku Logs

2019-02-19T21:34:50.428043+00:00 app[web.1]: [1]
2019-02-19T21:34:50.814385+00:00 app[web.1]: [0] Server listening on port 52660
2019-02-19T21:34:50.881527+00:00 app[web.1]: [0] Mongoose: users.ensureIndex({ username: 1 }, { unique: true, background: true })
2019-02-19T21:34:50.893332+00:00 app[web.1]: [0] (node:58) DeprecationWarning: collection.ensureIndex is deprecated. Use createIndexes instead.
2019-02-19T21:34:50.894088+00:00 app[web.1]: [0] mongodb connected
2019-02-19T21:34:50.898555+00:00 app[web.1]: [0] Mongoose: users.ensureIndex({ password: 1 }, { unique: true, background: true })
2019-02-19T21:34:51.373052+00:00 heroku[web.1]: State changed from starting to up
2019-02-19T21:34:52.273563+00:00 app[web.1]: [1] Something is already running on port 52660.
2019-02-19T21:34:52.345892+00:00 app[web.1]: [1] npm run client exited with code 0
2019-02-19T21:36:55.073650+00:00 heroku[router]: at=info method=GET path=“/” host=fierce-woodland-76093.herokuapp.com request_id=93da47a9-4249-4884-b5e5-43414cf59173 fwd=“152.17.149.99” dyno=web.1 connect=0ms service=15ms status=404 bytes=295 protocol=https

2

It may be that you’re using same process.env.PORT both for the client and the server.

Here I found a tutorial (I just skimmed it, but looks ok): https://coursework.vschool.io/deploying-mern-with-heroku/

1 Like
3

Thank you!
I added the proxy,etc as instructed in that site.
Just can’t figure out whats happening. I see its very clear that its the PORT.

4

Proxy is for development.

For production you should build the client and serve built files, not start the client.

This part: https://coursework.vschool.io/deploying-mern-with-heroku/#getyourexpressapptoserveupyourreactapp

1 Like
5

Thank you again!
I did try that now. Updated my notes above with the latest logs , and the server side index.js

6

don’t run concurrently for deployment but use it only for development, heroku follows npm run start, which is currently pointing to “concurrently “npm run server” “npm run client””, i’d assign that to something like devStart, and for start use the value for server, i.e. node index.js”.
You only want to run the root server in the assigned heroku port during deployment, it is currently trying to run the client server as well on the same port, which you should only use for development (i.e. via concurrently)

1 Like
7

Thank you!! I made the correction. I see the server started and can connect to the DB. But does not reach the client.

After the correction

2019-02-20T13:21:38.577134+00:00 heroku[web.1]: Starting process with command npm start
2019-02-20T13:21:32.000000+00:00 app[api]: Build succeeded
2019-02-20T13:21:41.284931+00:00 app[web.1]:
2019-02-20T13:21:41.284951+00:00 app[web.1]: > server@1.0.0 start /app
2019-02-20T13:21:41.284953+00:00 app[web.1]: > node index.js
2019-02-20T13:21:41.284954+00:00 app[web.1]:
2019-02-20T13:21:42.060401+00:00 app[web.1]: Server listening on port 38352
2019-02-20T13:21:42.138812+00:00 app[web.1]: Mongoose: users.ensureIndex({ username: 1 }, { unique: true, background: true })
2019-02-20T13:21:42.148842+00:00 app[web.1]: (node:22) DeprecationWarning: collection.ensureIndex is deprecated. Use createIndexes instead.
2019-02-20T13:21:42.149418+00:00 app[web.1]: mongodb connected
2019-02-20T13:21:42.153525+00:00 app[web.1]: Mongoose: users.ensureIndex({ password: 1 }, { unique: true, background: true })
2019-02-20T13:21:42.325951+00:00 heroku[web.1]: State changed from starting to up
2019-02-20T13:22:10.737861+00:00 heroku[router]: at=info method=GET path=“/” host=fierce-woodland-76093.herokuapp.com request_id=f8bb5501-1553-42d7-8e3f-24c0bd3104a8 fwd=“152.17.139.152” dyno=web.1 connect=1ms service=12ms status=404 bytes=295 protocol=https
johns@laptop:~/Documents/react/fierce-woodland-76093$

8

looks like your server doesn’t know what folder to serve at the root route, try using this middleware somewhere around the top of your server file,

app.use('/', express.static(path.join(__dirname, '/client/build')));
3 Likes
9

Thank you !!! that worked!!

10

Omg!!! this worked, thanks a lot !!

11

Hi @jenovs . i really impressed with you, that how you explain all this. I do the same but when i put Proxy to the package.json file and deploy it get invalid header on browser. Can you please help me . My server file, route files and client files are same