Static Deployments

Static Deployments allow you to deploy static websites and frontend applications on Replit. If you don't need a backend server or can statically build your website using your frontend framework, Static Deployments allow you to deploy your website in a cost-effective manner versus deploying a Reserved VM or an Autoscale Deployment.

Setting up your Repl

Before using a Static Deployment, you should verify that your Repl is working. You can do so using the "Run" button at the top of the workspace.

Next, ensure that your Repl can build your website into static files and take note of the directory. For example, if you are using Vite, you can run npm run build or npx vite build in the workspace's shell tool to initiate the build process. Once that is complete, you should see a dist directory in your Repl's file tree (or whichever output directory your framework uses).

Creating a Deployment

First, open up the Deployments tab. You can do this by clicking the "Deploy" button at the top right of the workspace or opening a new pane and typing "Deployments".

In the Deployments tool, select the "Static" Deployment type, then proceed using the "Set up your deployment" button.

Configuring your Deployment

Configure the build command and public directory that you noted earlier. The build command is run when your Deployment is created, and the public directory is the directory to which your static files are built.

note

If you want to host all files within your Repl, use ./ as the public directory.

Index and 'Not Found' pages

Your Static Deployment's home page will be read from the index.html file in the public directory. You can also provide a custom 'Not Found' page by adding a 404.html file in the public directory. This will set the page that's served when a route that doesn't exist is requested.

Custom response headers

You can make additions to the response headers that Replit returns to clients of your Static Deployment by adding a configuration to your Repl's .replit file.

To specify a custom response header, add a section like the following:

[[deployment.responseHeaders]]
path = "/*"
name = "Access-Control-Allow-Origin"
value = "*"

• path: A pattern for matching a URL path. The given response header will only be added to requests matching this pattern.
• name: The name of the header
• value: The value of the header

To add multiple response headers, you can add the above section multiple times:

[[deployment.responseHeaders]]
...

[[deployment.responseHeaders]]
...

Path matching

• Matches must be exact unless a * is present
• * will match with the remainder of the path
• * may only be placed at the end of the path

Reserved headers

Several headers are reserved for use by Replit and may not be configured: Accept-Ranges, Age, Allow, Alt-Svc, Connection, Content-Encoding, Content-Length, Content-Range, Date, Location, Server, Set-Cookie, Trailer, Transfer-Encoding, Upgrade.

Rewrites

You can customize the file served on a path by adding rewrites to your Repl's .replit file. This means that the URL a client sees will remain the same, but the request will be internally redirected.

To specify a rewrite, add a section like the following:

[[deployment.rewrites]]
from = "/*"
to = "index.html"

• from: A pattern for matching a URL path. The rewrite will only be added to requests matching this pattern.
• to: The rewritten path. This should correspond to a file in your static Deployment.

To add multiple response headers, you can add the above section multiple times:

[[deployment.rewrites]]
...

[[deployment.rewrites]]
...

Rewrites will be resolved in the order in which they are specified. However, they are only resolved once.

Path matching

• Matches must be exact unless a * is present
• * will match with the remainder of the path
• * may only be placed at the end of the path

If a * is used in the from parameter, it may also be used in the to parameter. In this case, the section of the path that matches the * will be applied to the rewritten path. For example, if a client visits the path /v1/about-us.html and your Deployment is configured with this rewrite:

[[deployment.rewrites]]
from = "/v1/*"
to = "/v2/*"

Then the path will evaluate to /v2/about-us.html.

Shadowing

If a URL path matches a rule and the exact path of a file in your Deployment, the rule is shadowing the exact file match. In that scenario, the matched file will always be returned. For example, consider the following:

• Your Static Deployment contains two files, index.html and styles.css

• Your Deployment is configured with this rewrite:

[[deployment.rewrites]]
from = "/*"
to = "/index.html"

• A client makes a request to /styles.css

styles.css will be returned because it is an exact match.

Limitations

Rewrites may only be used to redirect requests within your Static Deployment

Starting your Deployment

After configuring your Deployment, select Deploy to start the Deployment process. Once the Deployment is complete, you can access details like the custom URL, build logs, and more. Learn more about managing your Deployment here.

Billing

Static Deployments are charged based on deployments outbound data transfer usage ($0.10/GiB). Users with Replit Core subscription have an entitlement of 100 GiB of deployments outbound data transfer. Please contact us if you need more.

Free users will need to add a credit card before creating a Static Deployment.

You will be billed for outbound storage transfer once you exceed your monthly allowance.