CODEWITHSUNDEEP
reactjsexpressherokudeploymentmlab
L-R
L-R

Reputation: 418

Heroku Express Creat-React-App Mlab deployment - cannot GET

Looking for some help. I've just deployed my first react/express/mongo app to heroku but it loads up with cannot GET and I can't seem to see any errors which indicate why.

This is my folder structure:

folder structure

My top level package.json file looks like 

{
  "name": "russia_2018",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "engines": {
    "node": "9.5.0"
  },
  "scripts": {
    "build": "concurrently \"cd client && yarn build\" \"cd server && 
yarn build\"",
    "clean": "concurrently \"rimraf node_modules\" \"cd client && rimraf 
node_modules build\" \"cd server && rimraf node_modules build\"",
    "heroku-postbuild": "yarn build",
    "install": "(cd client && yarn) && (cd server && yarn)",
    "start": "concurrently \"cd client && PORT=3000 yarn start\" \"cd 
server && PORT=3001 yarn start\"",
    "start:prod": "cd server && yarn start:prod",
    "heroku-postbuild": "cd client && yarn && yarn run build"
  }

Procfile:

web: yarn start:prod

Server package.json

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel . --ignore node_modules,build --out-dir build",
    "start": "nodemon -r babel-register server.js",
    "start:prod": "node server.js",
    "seeds": "mongo < db/seeds.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^1.17.5"
  },
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "mongod": "^2.0.0",
    "mongodb": "^3.1.1"
  }
}

And server.js:

const express = require('express');
const app = express();
const path = require('path');
const parser = require('body-parser');
const MongoClient = require('mongodb').MongoClient;
const createRouter = require('./helpers/create_router.js');

const staticFiles = express.static(path.join(__dirname, 
'../../client/build'))

app.use(staticFiles)

app.use(parser.json())

  MongoClient.connect('mongodb://full-url... 
 ||'mongodb://localhost:27017'', (err, client) => {
  if(err){
    console.log(err);
  }

  const db = client.db('russia');

  const games = db.collection('games');
  const gamesRouter = createRouter(games);
  app.use('/api/games', gamesRouter);

  app.use('/*', staticFiles)


  app.listen(process.env.PORT || 3001, function(){
    console.log('listening on port 3001');
  })

});

I can't see where the error is coming from as the logs show that the app has connected to the home route fine. The only line which looks like it may be an error is Stopping all processes with SIGTERM but the app continues to connect after that.

Thanks

Upvotes: 0

Views: 297

Answers (1)

Chaim Friedman
Chaim Friedman

Reputation: 6253

Seems like heroku is never getting your build folder. Your procfile species this command for herkou to call on deploy web: yarn start:prod. Looking at your top level package.json it seems that start:prod only does this "start:prod": "cd server && yarn start:prod" which does not include any instructions about building the react app.

You may need change your procfile to call a command which will build the client folder for you and then start the server once that's done.

You can also build the folder locally, and remove it from the client side .gitignore so that heroku can just start the server and already have the build folder available.

You may have already seen this article, but if not, it's a very good read on the topic.

Upvotes: 1

Related Questions