Step 2: Prepare the App

Prepare the App

During this step we are going to get the application ready for a Heroku deployment

a. Install parcel-bundler locally

Since this application used Parcel, we need to instruct Heroku’s servers to install Parcel before it tries to “build” the application in the cloud

  • In your terminal, navigate to the project folder and run the following command:

    $ npm install parcel-bundler

Do not include the -g or --global flag here

  • Check your package.json file to confirm that parcel-bundler is listed in the dependencies section


b. Update the scripts section of your package.json file

The scripts section of the package.json are commands that can be run to carry about any type of action; they are usually meant to automate the process of manually typing in commands in the terminal

We are going to add scripts that will be responsible for building and running our Parcel application both locally and in Heroku

  • Replace the contents of the scripts section of package.json to following snippet below (leave the rest of the file unchanged):
"scripts": {
  "start": "npm run prepare-prod && npm run build-prod",
  "build-prod": "./node_modules/parcel-bundler/bin/cli.js index.html",
  "prepare-prod": "parcel build index.html",
  "build-dev": "parcel index.html"
},
  • Here’s a summary of each script:
Script name command description
build-dev parcel index.html runs local Parcel web server
prepare-prod parcel build index.html Parcel command used to prepare app for production
build-prod ./node_modules/parcel-bundler/bin/cli.js index.html This command use the Parcel CLI to build the application in production (i.e. on Heroku or another host provider)
start npm run prepare-prod && npm run build-prod This command run the prepare-prod and build-prod command in sequence

Heroku is configured to run npm start during the deploy process (see docs)

c. Specify your current node version in package.json

Heroku recommends that specify a Node.js version that matches the runtime you’re developing and testing with

  • Find which version of Node your computer is currently running on by entering the following command:

    $ node -v

  • Make note of the node version that is printed as a result of the above command and update your package.json according to the instructions below

  • For example, if the result of node -v was v12.1.0 then you should update your package.json by adding an engines property to the json object and updating to look like the snippet below (leave the rest of the file unchanged):

  "scripts": {
    "start": "npm run prepare-prod && npm run build-prod",
    "build-prod": "./node_modules/parcel-bundler/bin/cli.js index.html",
    "prepare-prod": "parcel build index.html",
    "build-dev": "parcel index.html"
  },
  "engines": {
    "node": "12.1.0"
  },

The node version entered in the engines section should reflect the node version running on your local computer; do not include the “v”