Different ways to publish the Expo web app with third-party services.
npx expo export:web
(expo build:web
in the legacy Expo CLI).
web-build/
directory. Don't edit this folder directly.npx expo export:web --help
Tips
{
"homepage": "/webapp"
}
npx serve web-build
http://localhost:5000
http
only, so permissions, camera, location, and many other things won't work.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.
Add the amplify-explicit.yml file to the root of your repo.
Push your local Expo project to your 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 choose Get started under Deploy. Grant Amplify permission to read from your GitHub account or organization that owns your repo.
The Amplify Console will detect that the amplify.yml file is in your repo. Choose Next.
Review your settings and choose Save and deploy. Your app will now be deployed to a https://branchname.xxxxxx.amplifyapp.com
URL.
Vercel has a single-command zero-config deployment flow. You can use vercel
to deploy your app for free!
For more information on unlimited hosting, check out their pricing.
Build your Expo web app with npx expo export:web
(SDK 45 and lower should use expo build:web
via the legacy global Expo CLI).
To deploy:
cd web-build
vercel
Paste that URL into your browser when the build is complete, and you will see your deployed app.
Install the Surge CLI if you haven't already by running npm install -g surge
. Run the surge
command, then promptly log in or create a new account.
When asked about the project path, make sure to specify the web-build
folder, for example:
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.
Learn more about Netlify.
Install the Netlify CLI by running npm install netlify-cli -g
.
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.
2.1. Run cd web-build
to navigate inside the directory.
2.2. Run the command echo "/* /index.html 200" > "_redirects"
to create _redirects file with rule.
To deploy:
3.1. Run the netlify deploy
command and choose web-build as the publish directory.
3.2. You should see a URL that you can use to view your project online.
With this setup Netlify will build and deploy when you push to git or open a new pull request:
Build your site
Learn more about GitHub Pages.
We'll use
yarn
but you can usenpm
if you want.
Before starting, be sure to create a new repo on GitHub. Then, run the following in your root directory:
git init
git remote add origin <YOUR_GITHUB_PAGES_URL>
yarn add -D gh-pages
Add the following to your package.json:
{
"homepage": "http://evanbacon.github.io/expo-gh-pages",
"scripts": {
"deploy": "gh-pages -d web-build",
"predeploy": "expo export:web"
}
}
In projects running SDK 45 or lower, use
expo build:web
instead ofexpo export:web
.
Finally, deploy with:
-
yarn deploy
Here are the formal instructions for deploying to GitHub Pages:
This is probably already done, but if not then you'll want to run git init
and set the remote.
$ git init
Initialized empty Git repository in /path/to/expo-gh-pages/.git/
Add the GitHub repository as a "remote" in your local git repository.
$ git remote add origin https://github.com/evanbacon/expo-gh-pages.git
gh-pages
package knows where you want it to deploy your app.master
branch).Install the gh-pages
package as a dev-dependency
of the app.
yarn add -D gh-pages
Configure your package.json for web hosting.
homepage
property. Set its value to the string http://{username on GitHub, without the curly brackets}.github.io/{repo-name}
. For example: If my GitHub name is evanbacon
and my GitHub repository is expo-gh-pages
, I'll asign the following:%%placeholder-start%%... %%placeholder-end%%
"homepage": "http://evanbacon.github.io/expo-gh-pages"
scripts
property, add a predeploy
property and a deploy
property, each having the values shown below:"scripts": {
%%placeholder-start%%... %%placeholder-end%%
"deploy": "gh-pages -d web-build",
"predeploy": "expo export:web"
}
In projects running SDK 45 or lower, use
expo build:web
instead ofexpo export:web
.predeploy
is automatically run beforedeploy
.
Generate a production build of your app, and deploy it to GitHub Pages.
$ yarn deploy
Your web app is now available at the URL you set as homepage
in your package.json.
When you publish code to
gh-pages
, it will create and push the code to a branch in your repo calledgh-pages
. This branch will have your built code but not your development source code.
Learn more about Firebase Hosting.
Create a firebase project with the Firebase Console.
Install the Firebase CLI if you haven't already by following these instructions.
Run the firebase login
command, then promptly log in.
Run the firebase init
command, and select your project and hosting.
When asked about the public path, make sure to specify the web-build
folder.
Answer 'Configure as a single-page app (rewrite all urls to /index.html)' with 'Yes'.
In the existing scripts
property, add a predeploy
property and a deploy
property, each having the values shown below:
"scripts": {
%%placeholder-start%%... %%placeholder-end%%
"predeploy": "expo export:web",
"deploy-hosting": "npm run predeploy && firebase deploy --only hosting",
}
In projects running SDK 45 or lower, use
expo build:web
instead ofexpo export:web
.
Run the npm run deploy-hosting
command to deploy.
Open the URL from the console output to check your deployment, for example, https://PROJECTNAME.firebaseapp.com
In case you want to change the header for hosting add the following config in hosting
section in firebase.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"
}
]
}
],
}
]