Deploying static assets can be useful for hosting websites, or static files in general. Freestyle lets you host them with all our support for custom domains, certificates, and analytics.

Deploying Static Assets

All deploys on Freestyle are servers, so to host the static assets you need to create a simple server that serves them. You can do this with any server you like, but we recommend hono for its simplicity and speed.

To set it up, first, you need to install the hono package:

npm init -y # Only necessary if you don't have a package.json in the root directory already  #
npm install hono

Then, you can create a simple server that serves the static assets. Here is a simple example that serves the files in a static folder, and falls back to static/index.html for any requests that don't match a file:

main.ts

import { Hono } from "hono";
import { serveStatic } from "hono/deno";
 
const app = new Hono();
 
app.use("*", serveStatic({ root: "./static" }));
 
// fallback to index.html
app.get("*", serveStatic({ path: "./static/index.html" }));
 
Deno.serve(app.fetch);

Deploying to Freestyle

Via the SDK

First, you can get your API Key from the Freestyle Dashboard.

Then, you need to install the Freestyle SDK:

npm i freestyle-sandboxes

Then you can create an instance of the client in your code:

deploy.ts

import { FreestyleSandboxes } from "freestyle-sandboxes";
 
const sandboxes = new FreestyleSandboxes({
  apiKey: process.env.FREESTYLE_API_KEY!,
});

Then, you can deploy your app with the following code:

deploy.ts

import { prepareDirForDeploymentSync } from "freestyle-sandboxes/utils";
import { FreestyleSandboxes } from "freestyle-sandboxes";
 
const sandboxes = new FreestyleSandboxes({
  apiKey: process.env.FREESTYLE_API_KEY!,
});
 
async function deploy() {
  await sandboxes.deployWeb(prepareDirForDeploymentSync("."), {
    entrypoint: "main.ts",
    // put whatever domains you want here
    domains: ["example.style.dev"],
  });
}
deploy();

This will upload everything in your current directory to Freestyle, and deploy it as a web server.

You can use the prepareDirForDeploymentSync function to prepare the directory for deployment. This will copy all the files in the current directory to a temporary directory, and return the path to that directory. You can also refer to the API Reference for constructing the deployment object yourself, or deploying through a Tar or Git Repository.

Via the CLI

First, you need to install the Freestyle CLI:

npm install -g freestyle-cli

Then, you need to login to your Freestyle account:

npx freestyle login

Then, you can deploy your app with the following command:

npx freestyle deploy --web main.ts --domain anydomain.style.dev

This will upload everything in your current directory to Freestyle, and deploy it as a web server.

Next Steps

Now that you can deploy static assets, you'll likely want to set up a custom domain for your server. You can do this by following the Custom Domains guide.

Deploying Static Assets