How to publish dist folder to Heroku

Guilherme Latrova -

Introduction

Depending on your webpack's setup, maybe when you want to publish your app you can end up with a /dist (or something like public_html) folder. In this tutorial we're going to use React Slingshot which already comes with a build script to generate our /dist, but you still can adapt to others cases like an Angular application and etc.

Before getting started

You need to know that we are not going to setup an application ourselves, neither show how to manage Heroku apps, so we can focus in our topic.

Get ready

We need to clone project and make sure everything is working fine. So you can start by running:

git clone https://github.com/coryhouse/react-slingshot.git
cd react-slingshot
npm run setup
npm run start -s

If your application is open and running ok, then we just need to define one more detail. We have two ways of handling this deploy to Heroku. In the end of day we always will have just an app running in Heroku, but you should understand which way better suits your needs.

A. Using express with server side building

  • When pushing your source code, Heroku will be in charge to build it;
  • Has more steps to setup and;
  • Deploy gets slower since we're now waiting Heroku do our build to confirm git push.

B. Using buildpack

  • You need to build your app locally and deploy /dist alongside your source code;
  • The biggest drawback here is that you can never forget of running your build script before git push to Heroku;
  • Setup is easy and fast.

Express with server side building

Follow those steps, you will find code in the end.

  1. Run npm install express --save.
  2. Create a new file in root folder named server.js.
  3. Create another file in root called Procfile (exactly like this, no extension).
  4. Open package.json and add to scripts heroku-prebuild and heroku-postbuild. Here we need heroku-prebuild to be set (although empty), so Heroku stops executing our dev pre-build command.
  5. Still in package.json add "node": "6.11.1" to engines.
  6. Now runs git rm package-lock.json.
  7. Then git rm yarn.lock.
  8. Finally, just run: heroku config:set NPM_CONFIG_PRODUCTION=false. This step is required, so Heroku will download dev dependencies to perform build.

Code

To know more about Procfile, you can take a look into Heroku's docs

Buildpack

Follow those steps, you will find code in the end.

We can use buildpack static for this case.

  1. First thing to do is define buildpack with command: heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git.
  2. Create in your root folder a file named static.json.
  3. Now runs git rm package-lock.json.
  4. Then git rm yarn.lock.
  5. Open your .gitignore e remove dist from there.

It's quick, but don't forget that you're responsible for always building app with npm run build (or another script you may have setup if not using React Slingshot) and pushing this to Heroku.

You can learn more from buildpacks here.

Code

Conclusion

Great, regardless of which option you choose, now you just need to do a commit and push to Heroku and everything will work as expected.

Although we used React Slingshot as example, you probably noted that it isn't too hard to adapt to some specific case. Angular also generates a dist folder, and you can easily setup your express/static.json to fulfill your needs.

References