How can I deploy a Node Express and React app to Heroku, after running with Travis CI?

Question

Following Setup:

• A Node Express server, running on localhost:5000.
• A client folder created with create-react-app directly in the server folder.
• CI Integration with Travis CI

I want to deploy my app to heroku when it's passing. Therefore I created following .travis.yml:

language: node_js
before_install: 
  - npm install && node index.js &
before_script: cd ./client && npm install
node_js:
  - "stable"
cache:
  directories:
  - node_modules
script:
  - npm run test
  - npm run lint
  - npm run build
notifications:
    slack: clicker-web:myslack
deploy:
  provider: heroku
  api_key: "mykey"
  app: test999111test
  on: heroku-deployment-testing

So I got it to deploy to heroku and not failing with travis. But in the heroku app itself I just get the error (in the console):

npm ERR! code ELIFECYCLE
2018-04-15T15:15:31.033343+00:00 app[web.1]: npm ERR! errno 1
2018-04-15T15:15:31.034412+00:00 app[web.1]: npm ERR! Clicker@0.1.0 start: `node scripts/start.js`
2018-04-15T15:15:31.034622+00:00 app[web.1]: npm ERR! Exit status 1
2018-04-15T15:15:31.034841+00:00 app[web.1]: npm ERR! 
2018-04-15T15:15:31.035019+00:00 app[web.1]: npm ERR! Failed at the Clicker@0.1.0 start script.

So I'm pretty sure it has to be something wrong with my setup.

This is the package.json I have set up in the server (root) directory (just a snippet of code you need):

"engines": {
    "node": "8.1.1",
    "npm": "5.0.3"
  },
  "scripts": {
    "client": "npm start --prefix client",
    "buildclient": "npm build --prefix client",
    "server": "nodemon index.js",
    "dev":
      "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\"",
    "build": "concurrently \"npm run server\" \"npm run client\"",
    "test": "npm run server",
    "start": "node index.js",
    "heroku-postbuild":
      "npm run install --prefix client && npm run build --prefix client"

I use a proxy in my application for development which is working just fine. But in prod on heroku I don't need it. I have created these lines in the index.js (in server root):

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

But I always get the same error from Heroku. What did I do wrong and how to deploy a project with server + client combined to heroku from Travis with best practice?

Here is the Project, where you can see the file structure. I'm on the heroku-deployment-testing branch right now.

Github Repo

Also here is the herokuapp which isn't showing anything besides an error:

Heroku App

Last but not least the travis logs (the last part where it's deploying):

Answer 1

Try to use this config

language: node_js
node_js:
- '8'
cache:
  directories:
  - node_modules
  - client/node_modules
install:
- npm install
- npm run build
script:
- nohup npm run start &
- sleep 3
- npm run test
- npm run lint
deploy:
  provider: heroku
  api_key:
    secure: API_KEY
  app: YOUR_APP_NAME

I believe you don't need before_install and before_script sections.

And also you don't need to run npm run build script since you're building your application with "heroku_postbuild" script in your package.json.