GuidesExpo Application ServicesAPI Reference
ArchiveExpo SnackDiscordForumsChangelog

Publish websites

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


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.

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:

Terminal
npx expo export:web

The above command uses webpack to optimize the project. It creates a production-ready static bundle in the web-build directory at the root of your project.

If you make changes to your project, you'll need to rebuild it for production. Don't edit the web-build directory directly.

Tip: If you want to serve your site in a subfolder, add its path to your package.json as shown below:

package.json
{
  "homepage": "/path/to/subfolder"
}

Serve Locally

Serve CLI provides a quick way to test locally how your app works in production. Run the following command to serve the static bundle:

Terminal
npx serve web-build

Then, open http://localhost:5000 to see your project in action. This method is HTTP only, so permissions, camera, location, and many other things won't work.

Hosting on third-party services

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 repo.

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 choose Get started under Deploy. Grant Amplify permission to read from your GitHub account or the organization that owns your repo.

4

The Amplify Console will detect that the amplify.yml file is in your repo. 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.

Vercel

Vercel has a single-command zero-config deployment flow.

For more information on unlimited hosting, check out Vercel's pricing.

2

Build your Expo web app with the npx expo export:web command.

3

To deploy, navigate to the web-build directory and run the vercel command:

Terminal
cd web-build

vercel

You should 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 will see your deployed app.

Surge

Surge offers static web publishing directly from a command line interface.

2

Run the surge command, then log in or create a new account.

3

You will be prompted to specify the project path. Make sure to specify the web-build folder. For example:

Terminal
project path: /path/to/expo-project/web-build

To support routers that use the HTML 5 pushState API, you'll need to rename the web-build/index.html to web/200.html before deploying.

Netlify

Netlify is a platform for deploying web apps.

Manual deployment with the Netlify CDN

1

Install the Netlify CLI by running the following command:

Terminal
npm install -g netlify-cli

2

If your app uses routes, add a _redirects file inside the web-build directory so the client has complete control over the routing logic. This file should contain the /* /index.html 200 rule.

Navigate inside the web-build directory and run the following command to create _redirects file with rule:

Terminal
cd web-build

echo "/* /index.html 200" > "_redirects"

3

To deploy your app, choose web-build as the publish directory. You start the deployment process by running the following command:

Terminal
netlify deploy

You will 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.

GitHub Pages

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

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 makes git know to which repository you want to push your source code. It also makes the gh-pages package (installed in the next step) know where you want to deploy your app.

3

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

Terminal
yarn add -D gh-pages

4

Configure your project's package.json for web hosting. Start by adding a homepage property. Set its value to the string http://{username on GitHub}.github.io/{repo-name}.

For example, if a GitHub username is called dev and the GitHub repository is expo-gh-pages, the following will be the value of the homepage property:

package.json
{
  "homepage": "http://dev.github.io/expo-gh-pages"
}

In the same 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 -d web-build",
  "predeploy": "expo export:web"
}

5

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 you set as homepage in your package.json.

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.

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

When asked about the public path, make sure to specify the web-build directory. Also, when prompted Configure as a single-page app (rewrite all urls to /index.html), select Yes.

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: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"
            }
          ]
        }
      ],
    }
  ]