Dev servers allow you to create a realtime preview of changes to a website. Currently dev servers work best with NextJS sites.

To get started, you'll need to create a Freestyle git repo. It's recommended that you use our NextJS template as the source of the repo for the best performance.

import { FreestyleSandboxes } from "freestyle-sandboxes";
 
const freestyle = new FreestyleSandboxes();
 
const { repoId } = await freestyle.createGitRepository({
  name: "Test Repository",
 
  // This will make it easy for us to clone the repo during testing.
  // The repo won't be listed on any public registry, but anybody
  // with the uuid can clone it. You should disable this in production.
  public: true,
 
  source: {
    url: "https://github.com/freestyle-sh/freestyle-next",
    type: "git",
  },
});

The easiest way to create a dev server from this repo is to use our react components in NextJS.

import { FreestyleDevServer } from "freestyle-sandboxes/react/dev-server";
import { requestDevServer } from "./preview-actions";
 
export function Preview({ repoId }: { repoId: string }) {
  <FreestyleDevServer actions={{ requestDevServer }} repoId={repoId} />;
}

You'll also need to create a server action to handle the request. This action will create a dev server for the repo if one isn't already running or return the status if one is already running.

// preview-actions.ts
"use server";
 
import { freestyle } from "@/lib/freestyle";
 
export async function requestDevServer({ repoId }: { repoId: string }) {
  const { ephemeralUrl, devCommandRunning, installCommandRunning } =
    await freestyle.requestDevServer({ repoId });
 
  return { ephemeralUrl, devCommandRunning, installCommandRunning };
}

You can clone the repo locally and try pushing to it. You should see the dev server update in realtime. Note this will only work if you made the repo public, otherwise, you'll need to create git credentials to access the repo. See the Git Documentation for more information.

git clone https://git.freestyle.sh/<repoId>

For production use in App Builders, we suggest using isomorphic-git to manage git from serverless JavaScript environments.

import git from "isomorphic-git";
import fs from "fs";
import http from "isomorphic-git/http/node";
 
git.clone({
  fs,
  url: "https://git.freestyle.sh/<repoId>",
  singleBranch: true,
  depth: 1,
  http,
});

Model Context Protocol (MCP)

MCP is a protocol for allowing AI agents to discover and use tools. Dev servers automatically expose a set of tools for interacting with the file system and other core operations such as installing npm modules, running commands, and testing code. You can get the url for this server in the dev server response.

const { mcpEphemeralUrl } = await freestyle.requestDevServer({ repoId });

Run a Dev Server & MCP

Model Context Protocol (MCP)

On this page