How to publish dist folder to Heroku

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:

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.

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.