How to use one port for Webpack AND api server for HEROKU?

[sascha1337]

Hi,

trying to deploy my build to heroku. this repository uses two ports, one webpack and one for api. but as i know, heroku just has one PORT option which gets self assigned with env port variable.

i cannot figure out how to combine the two services. how should i handle this big problem ?

https://myapp.herokuapp.com/ws/?EIO=3&transport=polling&t=LMr9Nni -> 
app[web.1]: [0] proxy error { [Error: connect ECONNREFUSED 127.0.0.1:3030]

[SuigetsuSake]

What I do myself is separate the api to another heroku instance. So that I have one heroku app for the website, one for the api and a mongolab instance for the database.

You just need to configure connection strings to point to the api url + package json and babel config in the api folder

[sascha1337]

okay cool, you may have a example pull request for the change?

[SuigetsuSake]

I don't think a pull request is necessary since its specific to your use case and this repo is meant to be a starter only. But i've made you a fork to use : https://github.com/SuigetsuSake/react-redux-universal-hot-example

All you have to do is take the api folder, put it in his own repository and publish it to heroku.

For configuration you can modify the main package.json and set the APIHOST to your heroku api instance (i think heroku use port 80 to serve the apps no matter what we listen)

"start-prod": {
      "command": "node ./bin/server.js",
      "env": {
        "NODE_PATH": "./src",
        "NODE_ENV": "production",
        "PORT": 8080,
        "APIPORT": 80,
        "APIHOST":"heroku_url_here"
      }
    }

I might add that i'm totally not an expert so there must be a better/updated way to configure babel etc but this should give you a starting point

[OKNoah]

@sascha1337

Procfile:

web: $WEB

In Terminal in the root of your app directory:

heroku apps:create myniceapp
heroku config:set --app myniceapp WEB="npm run start-prod"
git push heroku master

heroku apps:create myniceapp-api
heroku config:set --app myniceapp-api WEB="npm run start-prod-api"
git remote add heroku-api https://git.heroku.com/myniceapp-api.git
git push heroku-api master

So there you have two identical heroku apps, but one is running the command npm run start-prod and the other npm run start-prod-api. Both of these exist in the package.json already, each runs either the front-end alone or the back-end.

[cedricium]

Hey @OKNoah, your comment is pretty simple and makes a lot of sense when wanting to deploy a fullstack app on Heroku.

I have a project, https://github.com/cedricium/firefly, which uses Vue.js for the frontend (client/) and Express.js for the server + API (server/). With my two directories, would it be possible to use your solution to get my app deployed on Heroku?

[OKNoah]

@cedricium Probably. You can push the same repo to two different Heroku apps and just use different commands to run them. E.g. node server/index.js and node client/index.js respectively.

But there are downsides:

• You'll have way more dependencies to download. Your back-end server will need to download Vue, for example, and your frontend will need to download Sequelize. Can be a waste of bandwidth and time.

• You won't be able to use different versions of the same package between front and back. You back-end might have a dependency on a certain version of moment, but your front-end might need a newer version.

If you want easier development, some people use Vagrant or Docker to create a virtual system that runs both their seperate server repo and their front-end repo, plus any necessary databases and so on. Then they can and run their app locally with 1 command, and begin developing more quickly, while still having 2 repos. Only downside is this can be slow on older computers or lightweight models like MacBook (2015) or MacBook Air.