How to deploy a Parcel build to Heroku


This article goes over how to deploy a Parcel build to Heroku.

Parcel

Given you have a Parcel app:

In your package.json, ensure there’s a build script:

{
  "scripts": {
    "build": "parcel build"
  }
}

Heroku runs the build script if it exists during deploy.

Heroku

Add the Heroku buildpacks in order:

  1. heroku/nodejs
  2. heroku-buildpack-static

The Node.js buildpack must come before the static buildpack since the site has to be built before it can be served.

The buildpacks can be added via the Heroku CLI:

heroku buildpacks:set heroku/nodejs --app <MY_APP_NAME>
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git --app <MY_APP_NAME>

Replace <MY_APP_NAME> with your Heroku app name.

Or they can be added with app.json:

{
  "buildpacks": [
    {
      "url": "heroku/nodejs"
    },
    {
      "url": "https://github.com/heroku/heroku-buildpack-static"
    }
  ]
}

Create a static.json:

touch static.json

And configure the options for your static application:

{
  "root": "dist/",
  "routes": {
    "**": "index.html"
  },
  "https_only": true,
  "error_page": "index.html",
  "headers": {
    "/**": {
      "Cache-Control": "public, max-age=0, must-revalidate"
    },
    "/**.css": {
      "Cache-Control": "public, max-age=31536000, immutable"
    },
    "/**.ico": {
      "Cache-Control": "public, max-age=31536000, immutable"
    },
    "/**.jpg": {
      "Cache-Control": "public, max-age=31536000, immutable"
    },
    "/**.jpeg": {
      "Cache-Control": "public, max-age=31536000, immutable"
    },
    "/**.js": {
      "Cache-Control": "public, max-age=31536000, immutable"
    },
    "/**.png": {
      "Cache-Control": "public, max-age=31536000, immutable"
    }
  }
}

Push and deploy the Heroku app. The build log should look like:

-----> Building on the Heroku-20 stack
-----> Using buildpacks:
       1. heroku/nodejs
       2. https://github.com/heroku/heroku-buildpack-static
-----> Node.js app detected
-----> Creating runtime environment
-----> Installing binaries
-----> Restoring cache
-----> Installing dependencies
-----> Build
-----> Pruning devDependencies
-----> Caching build
-----> Build succeeded!
-----> Static HTML app detected
-----> Installed nginx 1.19.0 to /app/bin
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
-----> Launching...
       Released v1
       https://myappname.herokuapp.com/ deployed to Heroku

There’s no need for a Procfile since Heroku automatically creates a dyno for your static app:

web bin/boot

Resources



Please support this site and join our Discord!