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:
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
/distalongside your source code; - The biggest drawback here is that you can never forget of running your build script before
git pushto Heroku; - Setup is easy and fast.
Express with server side building
Follow those steps, you will find code in the end.
- Run
npm install express --save. - Create a new file in root folder named
server.js. - Create another file in root called
Procfile(exactly like this, no extension). - Open
package.jsonand add to scriptsheroku-prebuildandheroku-postbuild. Here we need heroku-prebuild to be set (although empty), so Heroku stops executing our dev pre-build command. - Still in
package.jsonadd"node": "6.11.1"to engines. - Now runs
git rm package-lock.json. - Then
git rm yarn.lock. - 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.
- First thing to do is define buildpack with command:
heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git. - Create in your root folder a file named
static.json. - Now runs
git rm package-lock.json. - Then
git rm yarn.lock. - Open your
.gitignoree removedistfrom 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.
