Deploy to Heroku without create-react-app and with API

[chrismv48]

Hi there,

Love the blog/repo, very informative. I'm currently trying to deploy an app to a single Heroku dyno which does not use create-react-app but has an express server for webpack and a rails API backend.

I'm having issues getting express to proxy my requests to the API (but works fine locally), here is the error from Heroku logs:

2017-12-03T16:00:18.436271+00:00 app[web.1]: Error: connect ECONNREFUSED 127.0.0.1:3005
2017-12-03T16:00:18.436308+00:00 app[web.1]:     at Object.exports._errnoException (util.js:1018:11)
2017-12-03T16:00:18.436309+00:00 app[web.1]:     at exports._exceptionWithHostPort (util.js:1041:20)
2017-12-03T16:00:18.436311+00:00 app[web.1]:     at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1090:14)

I made sure to use buildpacks for both node and rails as described here.

Here is the relevant code:

Procfile

web: npm run start:prod
api: bundle exec rails server --port=3005 --environment=production -b 127.0.0.1

package.json

{
  "name": "stage_sidekick_v2",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "proxy": "http://127.0.0.1:3005/",
  "engines": {
    "node": "6.10.2",
    "yarn": "0.24.5",
    "npm": "5.5.1"
  },
  "scripts": {
    "start": "NODE_ENV=development node server",
    "start:prod": "yarn run build && NODE_ENV=production node server",
    "build": "NODE_ENV=production webpack -p --config ./webpack.prod.js --progress --colors --display-error-details"
  },

server.js

const express = require('express');
const proxy = require('express-http-proxy');

const app = express();

const port = process.env.PORT || 3000;
const path = require('path')
const webpack = require('webpack')

const proxyHost = '127.0.0.1';
const proxyPort = '3005';

app.use('/api', proxy(`${proxyHost}:${proxyPort}`));

const isProd = process.env.NODE_ENV === 'production'

let config

if (isProd) {
  config = require('./webpack.prod.js')
} else {
  config = require('./webpack.dev.js')
}

const publicPath = config.output.publicPath || '/';
const outputPath = config.output.path || path.resolve(process.cwd(), 'dist');

if (!isProd) {
  console.log('Development env detected: Initializing hot reloading')
  const webpackDevMiddleware = require('webpack-dev-middleware')
  const webpackHotMiddleware = require('webpack-hot-middleware')
  const compiler = webpack(config)

  app.use(webpackHotMiddleware(compiler, {
    log: console.log,
    path: '/__webpack_hmr'
  }))

  app.use(webpackDevMiddleware(compiler, {
    entry: config.entry,
    publicPath: config.output.publicPath,
    stats: {
      colors: true
    }
  }))

  app.use('*', function (req, res, next) {
    const filename = path.join(compiler.outputPath, 'index.html')
    compiler.outputFileSystem.readFile(filename, (err, result) => {
      if (err) {
        return next(err)
      }
      res.set('content-type', 'text/html')
      res.send(result)
      res.end()
    })
  })

} else {
  app.use(publicPath, express.static(outputPath));
  app.get('*', (req, res) => res.sendFile(path.resolve(outputPath, 'index.html')));
}

app.listen(port, (err) => {
  if (err) {
    console.log(err.message)
  } else {
    console.log(`Server Started at port ${port}`);
  }
});

Any help would be greatly appreciated!

[clerdson]

this is my problem