Improved Static Website Support on Heroku with Front-End Web Cloud Native Buildpack

Recently, we expanded Heroku’s industry-shaping primitives, adding support for client-side browser apps, composed of HTML, CSS, and JavaScript. This built-in support for static web apps joins the existing Heroku Buildpacks: Ruby, Python, Go, Java, Clojure, Scala, Node.js, PHP, and .NET.

With the new Front-End Web Cloud Native Buildpack (CNB), you get a complete static web deployment solution:

• Easy default web hosting of a public/index.html file
• A high-performance static web server
• JavaScript builds powered by Heroku’s Node.js Cloud Native Buildpack
• Build-time web server configuration with project.toml
• Runtime app configuration with env as HTML data.

This is static web hosting the Heroku way, designed to fulfill the needs of front-end developers, with deployment from git and GitHub, twelve-factor app configuration, and collaborative workflow through Heroku Pipelines and Review Apps, all running in Heroku’s trusted, scalable dynos.

Cloud Native Buildpack (CNB) exclusive

This new Front-End Web support is exclusively available as a Cloud Native Buildpack. With the recent support for CNB added for Cedar-generation apps, it is now available for all Heroku customers, and is an open, standardized buildpack system that:

• Builds & runs OCI container images that are interoperable with other cloud providers and support local development, replacing brittle Dockerfiles with the elegance of Buildpacks
• Provides a composable, open architecture, allowing buildpacks to configure each other
• Leads toward higher supply chain trust with SBOMs
• Runs natively on Heroku, with Base image updates via CNB rebase, keeping each container’s OS up-to-date, including patches against security vulnerabilities.

Purpose-built to deliver websites

Front-End Web Cloud Native Buildpacks on Heroku solves common website requirements, all configured with project.toml. In addition to the fundamentals of static web app deployment, additional front-end conveniences include:

• Client-side routing support via Not Found fallback
• Response headers to enforce security and control caching
• Error responses for custom error pages
• Static responses for site redirects, health checks, or any other custom HTTP server responses
• Clean URLs to drop .html extensions from URLs
• HTTP basic authorization to hide site contents before going public
• Static build command to support static site generators.

See the details in the technical usage reference of the static web server.

Since the beginning, developers have been finding ways to deploy static websites on Heroku. If you’re one of many who currently run static web apps on Heroku using existing community buildpacks, consider migrating to this new CNB. Checkout the migration guides for heroku-community/nginx and create-react-app-buildpack.

Try out the new Front-End Web Cloud Native Buildpack

Using a unix-like terminal shell, start in a directory where you’ve created a web page in public/index.html, create a project.toml containing:

[_]
schema-version = "0.2"

[[io.buildpacks.group]]
id = "heroku/static-web-server"

[com.heroku.static-web-server]
root = "public"
index = "index.html"

Initialize the git repo, and commit these files:

git init
git commit -a -m "Trying it out"

Next, create a Heroku CNB app using Heroku CLI, and then deploy with a push:

heroku apps:create my-web-app --stack cnb
git push heroku

Visit the app’s herokuapp.com URL in a web browser.

To go further by setting up Node.js build and more, dive into using the buildpacks.

A product of our own experience

At Heroku, our own front-end engineering team is adopting the Front-End Web Cloud Native Buildpack (CNB) to deliver customer-facing interfaces like dashboard.heroku.com. We’d love to hear your feedback and ideas in the Front-end Web Cloud Native Buildpack’s GitHub issues.