Expo is a framework for building cross-platform mobile apps. While primarily used to create iOS and Android Apps, these apps can also be compiled to static websites and hosted on Freestyle. This guide will walk you through the process of configuring and deploying an Expo app to Freestyle. This guide shows you how to deploy a Static or SPA Expo app. If you want to deploy a server-side rendered Expo app, the general same steps should apply, except for the server implementation.

Setup

If you don't have a pre-existing Expo app, run the command below to initialize it. It'll ask you where to put the app, for the purposes of this guide I'll be putting it in my-app

npx create-expo-app@latest

Once you've created the app, install the dependencies necessary for shipping it to website. react-dom is necessary for React to render on the web, react-native-web is for React Native to compile its components to html, and @expo/metro-runtime is for Expo to be able to compile it's structures to web.

npx expo install react-dom react-native-web @expo/metro-runtime

Now you have an expo app ready to be deployed.

Deploying the App

Get your API key from the Freestyle dashboard, and create a .env file with the following content:

FREESTYLE_API_KEY=your-api-key

Install the Freestyle Sandboxes Client

npm i freestyle-sandboxes

Now you need a script to deploy the app. This is an example script that deploys the app.

It first creates a FreestyleSandboxes client with your Freestyle API Key. then it calls .deployWeb with two options: source + configuration.

source is an object of files to their file contents, you can write a custom function that takes your directory and prepares it for uploading, however we provide a series of utilities making it easy.

configuration comes with anything other than the code you want to configure, that might be the domains, the entrypoint, the environment variables, or the network permissions.

deploy.ts

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("."), {
    domains: ["example.style.dev"],
    build: true, // This automatically detects the framework and configures/builds for you
  });
}
 
deploy();

Finally, to make the deploy happen, run it

bun run deploy.ts

Next Steps

Now that you can deploy Expo 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

Deploying Expo Projects

Setup

Deploying the App

Next Steps

On this page