--- modificationDate: April 02, 2026 title: Publish websites with Webpack description: Different ways to publish the Expo web app with third-party services with webpack. --- ## Submitting Feedback If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved: curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/archive/publishing-websites-webpack/","feedback":"🤖 Agent feedback: "}' Only submit when you have something specific and actionable to report. # Publish websites with Webpack Different ways to publish the Expo web app with third-party services with webpack. > For the complete documentation index, see [llms.txt](/llms.txt). Use this file to discover all available pages. > **[Deprecated](/more/release-statuses#deprecated)**: In SDK 50 and later, publishing with `webpack` is deprecated in favor of `metro`. Learn more in [migrating from Webpack to Expo Router](/router/migrate/from-expo-webpack). 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. | Bundler | Expo Router | API Routes | Description | | --- | --- | --- | --- | | `webpack` | ✗ | ✗ | Outputs a Single Page Application (SPA) with a single **index.html** in the output directory. | ## Create a web build Creating a web 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 have 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 webpack export command to compile the project for web: ```sh npx expo export:web ``` The resulting project files are in the **web-build** directory. Any files inside the **web** directory are also copied to the **web-build** directory. If you make changes to your project, rebuild it for production. Do not edit the **web-build** directory directly. ## Serve locally Use [Serve CLI](https://www.npmjs.com/package/serve) to quickly test locally how your website will be hosted in production. Run the following command to serve the static bundle: Run the following command to serve the single-page application: ```sh npx serve web-build --single ``` Open [`http://localhost:5000`](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. ## Server a sub-directory If you want to serve your site in a sub-directory, add its path to your **package.json** as shown below: ```json { "homepage": "/path/to/sub-directory" } ``` ## Hosting on third-party services ### Netlify [Netlify](https://www.netlify.com/) 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 Install the Netlify CLI by running the following command: ```sh npm install -g netlify-cli ``` 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: ```bash /* /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 directory by running the following command: ```sh netlify deploy --dir web-build ``` 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](https://app.netlify.com/signup). - Pick your Git hosting service and select your repository. - Click **Build your site**. ### Vercel [Vercel](https://vercel.com/) has a single-command deployment flow. Install the [Vercel CLI](https://vercel.com/docs/cli). ```sh npm install -g vercel@latest ``` Configure redirects for single-page applications. Create a **vercel.json** file at the root of your app and add the following: ```json { "buildCommand": "expo export:web", "outputDirectory": "web-build", "devCommand": "expo", "cleanUrls": true, "framework": null, "rewrites": [ { "source": "/:path*", "destination": "/" } ] } ``` Deploy the website. ```sh vercel ``` 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. ### AWS Amplify Console The [AWS Amplify Console](https://console.amplify.aws) provides a Git-based workflow for continuously deploying and hosting full-stack serverless web apps. Amplify deploys your PWA from a repository instead of your computer, so you must use a GitHub repository. Before starting, [create a new repo on GitHub](https://github.com/new). Add the [**amplify-explicit.yml**](https://github.com/expo/amplify-demo/blob/master/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](https://docs.github.com/en/get-started/importing-your-projects-to-github/importing-source-code-to-github/adding-locally-hosted-code-to-github). Login to the [Amplify Console](https://console.aws.amazon.com/amplify/home) 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. ### GitHub Pages [GitHub Pages](https://pages.github.com/) allows you to publish a website directly from a GitHub repository. 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: ```sh git init ``` Add the GitHub repository as a `remote` in your local git repository. ```sh 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. Install the `gh-pages` package as a `dev-dependency` in your project: ```sh yarn add -D gh-pages ``` 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: ```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: ```json "scripts": { ... "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: ```sh 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](https://console.firebase.google.com/) is production-grade web content hosting for web projects. Create a firebase project with the [Firebase Console](https://console.firebase.google.com) and install the Firebase CLI by following these [instructions](https://firebase.google.com/docs/hosting). Using the CLI, login to your Firebase account by running the command: ```sh firebase login ``` Then, initialize your firebase project to host by running the command: ```sh firebase init ``` 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: ```json "scripts": { ... "predeploy": "expo export:web", "deploy-hosting": "npm run predeploy && firebase deploy --only hosting", } ``` To deploy, run the following command: ```sh 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**: ```json "hosting": [ { ... "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" } ] } ], } ] ```