Deploying Vite Projects

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. We support Vite with a small bit of configuration.

Setup

First, you'll need to create a Vite project. You can do this by running the following command:

npm create vite@latest

Follow Vite's instructions relating to framework choices, installing dependencies, and CD'ing into the app.

Build the App

npm run build

This will create a dist folder with the production build of your app. This folder contains all the static files needed to run your app.

Preparing the App for Deployment

Freestyle requires a JavaScript or TypeScript entrypoint for your apps. To serve the Vite app, we need to create a server that serves the files in the dist folder.

The simplest way to do this is to use hono, a lightweight web framework that I like:

npm i hono

Then create a file called main.ts in the root of your project. This file will be the entrypoint for your server.

import { Hono } from "hono";
import { serveStatic } from "hono/deno";

const app = new Hono();

app.use("*", serveStatic({ root: "./dist" }));

Deno.serve(app.fetch);

Deploying the App

CLI

Install the Freestyle CLI.

npm i freestyle-sh

Now deploy it

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

API

You can also deploy the app using the API.

Install the Freestyle API client.

npm i freestyle-sandboxes

Then you can use the following code to deploy the app:

import { FreestyleSandboxes } from "freestyle-sandboxes";
import { prepareDirForDeploymentSync } from "freestyle-sandboxes/utils";

// Create a sandboxes client
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();

Finally, to make the deploy happen, run it

bun run deploy.ts

Next Steps

• If you want to add SSR to your Vite app check this guide out.
• Now that you can deploy Vite apps to Freestyle, you'll probably want to deploy them to custom domains. To deploy to your own custom domains, you can use the UI in the Freestyle dashboard, and to start building self serve to deploy to your users domains you should check out this guide