Publish websites with Metro

Install the Netlify CLI by running the following command:

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.

/*    /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.

Deploy the web build folder by running the following command:

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

Install the Vercel CLI.

Configure redirects for single-page applications.

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

{
  "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.

Deploy the website.

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.

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.

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.

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.

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.

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.

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

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

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

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.

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

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

To deploy, run the following command:

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:

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

Start by initializing a new git repository in your project and configuring it to push to a GitHub repository. If you are already syncing your changes with a GitHub repository, skip this step.

Create a repository on the GitHub website. Then, run the following commands in your project's root directory:

The above commands initialize a new Git repository and configure it to push your source code to the specified GitHub repository.

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

To deploy the project, configure it to a subdomain with the baseUrl property in app config. 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:

{
  "expo": {
    "experiments": {
      "baseUrl": "/expo-gh-pages"
    }
  }
}

Modify the scripts in the package.json file by adding predeploy and deploy scripts. Each has its own value:

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

Since Expo uses underscores in generated files, you need to disable Jekyll with the --nojekyll flag.

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

This publishes a build of the web app to the gh-pages branch of your GitHub repository. This branch only contains build artifacts from the dist directory, plus the .nojekyll file generated by gh-pages. It does not include development source code.

Now that the web app is published to the gh-pages branch, configure GitHub Pages to serve the app from that branch.

• Navigate to the Settings tab of the GitHub repository.
• Scroll down to Pages section.
• Ensure the Source is set to Deploy from a branch.
• Under Branch section, select gh-pages and the root directory.
• Click Save.

Once the web app is published and the GitHub Pages configuration is set, a GitHub action will deploy your website. You can monitor its progress by navigating to your repository's Actions tab. Upon completion, your web app will be available at the URL http://username-on-github.github.io/repo-name.

For subsequent deployments and updates, run the deploy command and the GitHub action will start automatically to update your web app.