Skip to content
This repository has been archived by the owner on Jul 20, 2021. It is now read-only.

Latest commit

 

History

History
242 lines (165 loc) · 8 KB

DEPLOYMENT.md

File metadata and controls

242 lines (165 loc) · 8 KB
Raw

Deploying Expo Web Apps

Table of contents

Creating a Build

You can build your app with the command expo build:web from the root of your project. This will create a web-build/ directory with the static bundle in it. You can then deploy that to AWS, Netlify, etc., or host it on your own servers.

If you want to test the static build from your local machine, you'll need to run a webserver locally since it is a PWA. Opening index.html directly in your browser the way you can with a plain website doesn't work with PWAs. One way you could do this would be npm install -g http-server; http-server . inside the web-build/ directory; and then opening the URL it shows you, ex. http://127.0.0.1:8080 .

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

Now

Now has a single-command zero-config deployment flow. You can use now to deploy your app for free! 💯

For more information on unlimited hosting, check out the blog post.

  1. Install the now CLI with npm install -g now.

  2. Build your Expo web app with expo build:web.

  3. To deploy:

  • Run cd web-build
  • Run now --name your-project-name
  • You should see a now.sh URL in your output like: > Ready! https://expo-web-is-cool-nocabnave.now.sh (copied!)

Paste that URL into your browser when the build is complete, and you will see your deployed app!

Surge

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.

Netlify

Manual deployment with the Netlify CDN

npm install netlify-cli -g
netlify deploy

Choose web-build as the path to deploy.

Continuous delivery

With this setup Netlify will build and deploy when you push to git or open a new pull request:

  1. Start a new Netlify project
  2. Pick your Git hosting service and select your repository
  3. Click Build your site

GitHub Pages

We'll use yarn but you can use npm if you want.

Before starting, be sure to create a new repo on GitHub

TL;DR:

Run the following in your root dir:

git init
git remote add origin <YOUR_GITHUB_PAGES_URL>
yarn add -D gh-pages

Add the following to your package.json:

/* package.json */
{
    "homepage": "http://evanbacon.github.io/expo-gh-pages",
    "scripts": {
        "deploy": "gh-pages -d web-build",
        "predeploy": "expo build:web"
    }
}

Finally deploy with:

yarn deploy

Here are the formal instructions for deploying to GitHub Pages:

  1. Initialize a git repo

  • 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/

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

    $ git remote add origin https://github.com/evanbacon/expo-gh-pages.git
    • This will make it so the gh-pages package knows where you want it to deploy your app.
    • It will also make it so git knows where you want it to push your source code (i.e. the commits on your master branch).

  2. Install the gh-pages package as a "dev-dependency" of the app

    yarn add -D gh-pages

  3. Configure your package.json for web hosting

    • At the top level, add a homepage property. Set it's 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:
    /* ... */
"homepage": "http://evanbacon.github.io/expo-gh-pages"
    • In the existing scripts property, add a predeploy property and a deploy property, each having the values shown below:
    "scripts": {
  /* ... */
  "deploy": "gh-pages -d web-build",
  "predeploy": "expo build:web"
}

    predeploy is automatically run before deploy.

  4. Generate a production build of your app, and deploy it to GitHub Pages. (2 minutes)

    $ yarn deploy
    • !! Your app is now available at the URL you set as homepage in your package.json (call your parents and show them! 😜)

    When you publish code to gh-pages, it will create and push the code to a branch in your repo called gh-pages. This branch will have your built code but not your development source code.

Firebase Hosting

Setup Firebase

  • 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, 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'.

Update package.json

In the existing scripts property, add a predeploy property and a deploy property, each having the values shown below:

"scripts": {
  /* ... */
  "predeploy": "expo build:web",
  "deploy-hosting": "npm run predeploy && firebase deploy --only hosting",
}

Run the npm run deploy-hosting command to deploy.

Open the url from the console output to check your deployment, e.g. 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"
            }
          ]
        }
      ],
    }
  ]