HomeGuidesReferenceLearn
ArchiveExpo SnackDiscord and ForumsNewsletter

Publish websites with Metro

Different ways to publish the Expo web app with third-party services.


In SDK 50 and above, metro is the default bundler for web apps. The previous documentation for publishing with webpack is available here.

A web app created using Expo can be served locally for testing out the production behavior. Once the testing phase checks out, you can choose from a variety of third-party services to host it.

Output targets

The web.output target can be configured in the app config to set the export method for the web app:

app.json
{
  "expo": {
    "web": {
      "output": "server",
      "bundler": "metro"
    }
  }
}

Expo Router supports three output targets for web apps.

OutputExpo RouterAPI RoutesDescription
single (default)Outputs a Single Page Application (SPA) with a single index.html in the output folder and has no statically indexable HTML.
serverCreates client and server directories. Client files are output as separate HTML files. API routes as separate JavaScript files for hosting with a custom Node.js server.
staticOutputs separate HTML files for every route in the app directory.

Create a build

Creating a build of the project is the first step to publishing a web app. Whether you want to serve it locally or host it on a third-party service, you'll need to export all JavaScript and assets of a project. This is known as a static bundle. It can be exported by running the following command:

Run the universal export command to compile the project for web:

Terminal
npx expo export -p web

The resulting project files are located in the dist directory. Any files inside the public directory are also copied to the dist directory.

Serve locally

Use Serve CLI to quickly test locally how your website will be hosted in production. Run the following command to serve the static bundle:

Terminal
npx serve dist --single

Open http://localhost:5000 to see your project in action. This method is HTTP only, so permissions, camera, location, and many other secure features will not work.

You need to create a custom server to host the websites with API routes. Learn more about serving locally with Express.

Terminal
npx serve dist

Open http://localhost:5000 to see your project in action. This method is HTTP only, so permissions, camera, location, and many other secure features will work.

Hosting on third-party services

Netlify

Netlify is a mostly-unopinionated platform for deploying web apps. This has the highest compatibility with Expo web apps as it makes few assumptions about the framework.

Manual deployment with the Netlify CDN

1

Install the Netlify CLI by running the following command:

Terminal
npm install -g netlify-cli

2

Configure redirects for single-page applications.

If your app uses static rendering, then you can skip this step.

expo.web.output: 'single' generates a single-page application. It means there's only one dist/index.html file to which all requests must be redirected. This can be done in Netlify by creating a ./public/_redirects file and redirecting all requests to /index.html.

public/_redirects
/*    /index.html   200

If you modify this file, you must rebuild your project with npx expo export -p web to have it safely copied into the dist directory.

3

Deploy the web build folder by running the following command:

Terminal
netlify deploy --dir dist

You'll see a URL that you can use to view your project online.

Continuous delivery

Netlify can also build and deploy when you push to git or open a new pull request:

  • Start a new Netlify project.
  • Pick your Git hosting service and select your repository.
  • Click Build your site.

Vercel

Vercel has a single-command deployment flow.

1

Install the Vercel CLI.

Terminal
npm install -g vercel@latest

2

Configure redirects for single-page applications.

Create a vercel.json file at the root of your app and add the following configuration:

vercel.json
{
  "buildCommand": "expo export -p web",
  "outputDirectory": "dist",
  "devCommand": "expo",
  "cleanUrls": true,
  "framework": null,
  "rewrites": [
    {
      "source": "/:path*",
      "destination": "/"
    }
  ]
}

If your app uses static rendering, then you may want to add additional dynamic route configuration.

3

Deploy the website.

Terminal
vercel

You'll now see a URL that you can use to view your project online. Paste that URL into your browser when the build is complete, and you'll see your deployed app.

AWS Amplify Console

The AWS Amplify Console provides a Git-based workflow for continuously deploying and hosting full-stack serverless web apps. Amplify deploys your PWA from a repository instead of from your computer. In this guide, we'll use a GitHub repository. Before starting, create a new repo on GitHub.

1

Add the amplify-explicit.yml file to the root of your repository. Ensure you have removed the generated dist directory from the .gitignore file and committed those changes.

2

Push your local Expo project to a GitHub repository. If you haven't pushed to GitHub yet, follow GitHub's guide to add an existing project to GitHub.

3

Login to the Amplify Console and select an existing app or create a new app. Grant Amplify permission to read from your GitHub account or the organization that owns your repo.

4

Add your repo, select the branch, and select Connecting a monorepo? to enter the path to your app's dist directory and choose Next.

The Amplify Console will detect the amplify.yml file in your project. Select Allow AWS Amplify to automatically deploy all files hosted in your project root directory and choose Next.

5

Review your settings and choose Save and deploy. Your app will now be deployed to a https://branchname.xxxxxx.amplifyapp.com URL. You can now visit your web app, deploy another branch, or add a unified backend environment across your Expo mobile and web apps.

Follow the steps in the Learn how to get the most out of Amplify Hosting drop-down to Add a custom domain with a free SSL certificate and more information.

Firebase hosting

Firebase Hosting is production-grade web content hosting for web projects.

1

Create a firebase project with the Firebase Console and install the Firebase CLI by following these instructions.

2

Using the CLI, login to your Firebase account by running the command:

Terminal
firebase login

3

Then, initialize your firebase project to host by running the command:

Terminal
firebase init

The settings will depend on how you built your Expo website:

  1. When asked about the public path, make sure to specify the dist directory.
  2. When prompted Configure as a single-page app (rewrite all urls to /index.html), only select Yes if you used web.output: "single" (default). Otherwise, select No.

4

In the existing scripts property of package.json, add predeploy and deploy properties. Each has the following values:

package.json
"scripts": {
  %%placeholder-start%%... %%placeholder-end%%
  "predeploy": "expo export -p web",
  "deploy-hosting": "npm run predeploy && firebase deploy --only hosting",
}

5

To deploy, run the following command:

Terminal
npm run deploy-hosting

Open the URL from the console output to check your deployment, for example: https://project-name.firebaseapp.com.

In case you want to change the header for hosting add the following config for hosting section in firebase.json:

firebase.json
  "hosting": [
    {
      %%placeholder-start%%... %%placeholder-end%%
      "headers": [
        {
          "source": "/**",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "no-cache, no-store, must-revalidate"
            }
          ]
        },
        {
          "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "max-age=604800"
            }
          ]
        }
      ],
    }
  ]

GitHub Pages

GitHub Pages allows you to publish a website directly from a GitHub repository.

GitHub Pages deployment requires Expo SDK 50 or higher, and uses experimental baseUrl functionality that may not work as intended.

1

Start by initializing a new git repository in your project. If this is already done, skip this step.

If not then you'll want to run the following command in your project's root directory:

Terminal
git init

2

Add the GitHub repository as a remote in your local git repository.

Terminal
git remote add origin https://github.com/username/expo-gh-pages.git

Running the above command configures git know which repository you want to push your source code to.

3

Install the gh-pages package as a dev-dependency in your project:

Terminal
yarn add -D gh-pages

4

Configure your project to be deployed to a subdomain with the baseUrl feature in the app.json Set its value to the string /{repo-name}.

For example, if the GitHub repository is expo-gh-pages, the following will be the value of the experimental baseUrl property:

app.json
{
  "expo": {
    "experiments": {
      "baseUrl": "/expo-gh-pages"
    }
  }
}

5

Because Expo uses underscores in generated files, you need to disable jekyll by creating a .nojekyll file in the public directory.

Terminal
mkdir public && touch public/.nojekyll

This file will be copied to the dist directory when you build your project.

You also need to run gh-pages with the -t flag to ensure files starting with . are included in the deployment.

6

In the package.json file, modify the scripts property by adding predeploy and deploy properties. Each has its own value as shown:

package.json
"scripts": {
 %%placeholder-start%%... %%placeholder-end%%
  "deploy": "gh-pages -t -d dist",
  "predeploy": "expo export -p web"
}

7

To generate a production build of your app, and deploy it to GitHub Pages, run the following command:

Terminal
yarn deploy

Your web app is now available at the URL http://{username on GitHub}.github.io/{repo-name}.

When you publish code to your repository, for example: gh-pages, it will create and push the code to a branch in your repo. This branch will have your build code, however, not your development source code.