Publish websites with Webpack

Install the Netlify CLI by running the following command:

Configure redirects for single-page applications.

If your app implements any navigation, you'll need to configure Netlify to redirect requests to the single web-build/index.html file. This can be done in Netlify by creating a ./public/_redirects file and redirecting all requests to /index.html.

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

/*    /index.html   200

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

Deploy the web build folder by running the following command:

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

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

Deploy the website.

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

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:

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

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.

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

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:

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

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

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

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.

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:

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.

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