Everything About Hosting Your Frontend App
Host static sites and single-page applications (SPAs) on Code Capsules. Frontend Capsules build your project from your Git repository, serve the output over HTTPS, and redeploy automatically when you push to your branch.
When to use a Frontend Capsule
A Frontend Capsule is a good fit when:
- Your project is plain HTML, CSS, and JavaScript
- You use a framework such as React, Angular, Vue, or Svelte that builds to a folder of static files
- Your site doesn't need a server-side runtime, server-side rendering (SSR), or API routes
If your app needs SSR or API routes, use a Backend Capsule instead. See Supported Runtimes for details.
Choose how to host
Both hosting options build your project the same way and serve the files your build produces. The difference is whether a web server runs in a container to serve them.
| Static | Container | |
|---|---|---|
| How it's served | Your built files are stored and served directly. No server is running. | A web server runs in a container that stays on. |
| Plans | Free or Paid | Paid. You choose the CPU, memory, and replicas. |
| Pricing | From $0. Paid is a flat monthly rate. | Based on the resources you allocate |
| Scaling | Not needed. There are no compute resources to manage. | Scale CPU, memory, and replicas |
| Logs and metrics | Access logs, and storage and traffic use on the Details tab | Runtime logs, access logs, and metrics |
| Best for | Most sites and SPAs, from personal projects to production sites | Sites where you want runtime logs and metrics, or room to scale |
To start, click the yellow + button in your Space, select New Capsule, and choose Frontend Capsule. On the Hosting step, choose Static or Container.
You can't change between Static and Container after the capsule is created. To use the other option, create a new Frontend Capsule. You can upgrade a Free static capsule to Paid at any time.
Static hosting and the Free plan depend on your cluster. If the Static option shows Not available on this cluster, use Container.
Documentation
- Static
- Deploy: create a static capsule from your Git repository
- Free and Paid Plans: limits for each plan, what happens when you reach them, and how to upgrade
- Container
- Deploy: create a container capsule from your Git repository
- Framework Guides: step-by-step guides for React, Angular, Vue, Svelte, and static HTML
- Supported Runtimes: frameworks, build settings, and Node.js pinning
- Configure: build command, output folder, and environment variables
- Scale: allocate resources to a container capsule, or upgrade a Free static capsule
- Monitor: view metrics and usage
- Logs: view build, runtime, and access logs
- Custom Domains: serve your site from your own domain
- Notifications: set up notifications for capsule events