Bootcamp
Search…
6.1.6: Deploy Webpack App to Heroku

Introduction

If our app uses Sequelize and we haven't configured it for production yet, we will need to configure Sequelize for production (i.e. Heroku deployment) by following instructions in 4.1.10: Deploy Sequelize App to Heroku before deployment. See the Sequelize config and models/index.mjs in Rocket's Webpack example repo for a sample.
To ensure our Webpack functionality works when deployed to Heroku, we need to add build and start scripts to package.json as per 6.1.5: Webpack with Express. If you haven't already, ensure those scripts are in package.json.

Build Script

When we push to Heroku, Heroku automatically runs npm run build and npm start. Run npm run build locally on the command line to observe what happens: Webpack compiles files into the dist folder. Testing this locally can help us pre-empt any issues when deploying to Heroku.

Add dist Folder to .gitignore

If we haven't already, add the .dist folder to .gitignore. We do not want to commit our dist files to GitHub because dist will contain imported code from node_modules, code that can be re-installed with npm i and re-Webpack-ed with Webpack on-demand. There is no need to store it in GitHub and bloat our repo. See dist in .gitignore on GitHub here.