Skip to content

heroku/buildpacks-frontend-web

Heroku Cloud Native Buildpacks: Front-end Web

This repository is the home of Heroku Cloud Native Buildpacks for Front-end Web apps, also known as: websites, static web apps (SWA), single-page apps (SPA), progressive web apps (PWA), and browser apps.

What It Is

These Front-end Web buildpacks produce an OCI (container image) that launches a web server to host a directory of HTML, CSS, and Javascript files. The build process can run Javascript or other programs to produce the website, or simply read a directory of files as the web root. All front-end frameworks are supported, while some popular frameworks are optimized with preset web server configuration.

The result is a static website:

  • high-efficiency, high-performance server
  • secure by default with minimal, purpose-built features
  • separates front-end development (web UIs) from server-side programming (backend APIs).

What It Is Not

This static web server does not run custom code on the server. If an app requires a custom server-side web process, then use the appropriate language-specific CNBs.

Included Buildpacks

This repository contains multiple buildpacks:

Component Buildpacks

Buildpacks that provide a specific server-side component.

ID Name Provides
heroku/static-web-server Static Web Server The CNB default web process; an HTTP file server configurable via project.toml

Framework Buildpacks

Lower-level buildpacks that detect specific source layouts, frameworks, or tools, to automate configuration of build process and heroku/static-web-server.

ID Name Provides
heroku/website-ember Website (Ember.js) auto-detect for Ember.js
heroku/website-cra Website (create-react-app) auto-detect for create-react-app
heroku/website-nextjs Website (Next.js) auto-detect for Next.js (static exports)
heroku/website-public-html Website (Public HTML) auto-detect for public/index.html
heroku/website-vite Website (Vite) auto-detect for Vite

Usage

Configure the Static Web Server as the last buildpack for your app, along with other language buildpacks the build might require.

The framework buildpacks are optional. They automate detection of static web apps in source code when using heroku/builder, such as when building a CNB app on Heroku, but are not required when manually configuring buildpacks and web server config.

Dev Notes

Run Tests

cargo test -- --include-ignored

Releasing A New Version

Action workflows are used to automate the release process:

  1. Run Prepare Buildpack Releases.
  2. Await completion of the preparation step.
  3. Run Release Buildpacks.

About

Build a website (static web app) as a container image with production-grade web server and runtime env as HTML data.

Resources

License

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks

Contributors

Languages