Deploying a React Native app to netlify

For a school project I’m working on, I needed a web version of my application which can be used to pair with the mobile application. Since I didn’t want to build two seperate applications, I researched a way that I could have only one codebase that would run on IOS, Android and web platforms. The front-end will fetch an API, so if I wanted, I could use two seperate applications for mobile & web-platforms, but it’s so much easier managing all code at once.

My exact setup will be te following:

React Native front-end
Back-end will be RESTful, so doesn’t really matter what you use
Github for version-control
Travis CI to build, test and deploy
Netlify to host the application

Starting a React Native application using Expo

Starting a new React Native app using Expo isn’t that hard and is even guided through on the official documentation.

Firstly, install the expo-cli so we can run expo commands:

yarn -g add expo-cli

To then bootstrap a new application we can just simply use

expo init yourProject

Now you have a basic template to get you started, just build your app like you would normally do. Except you have an extra layer upon React Native (which we’ll need to publish for the web).

Building a CI/CD system

If you don’t want automatic deploys to you hosting service and don’t need to test your code, you can skip this step. expo-cli can also be run locally, then you can deploy the web-build folder manually using something like netlify-cli.

Since the project uses expo-cli to build the project, we can’t really use the built-in Netlify CI (although there are workarounds like configuring a seperate build/deploy script in your package.json). In this example I use Travis CI. I really like the UI and the accessibility of the website, but use Jenkins, Github Actions or any CI/CD system you like. As long as it works for you.

The configuration

The configuration for Travis isn’t really too hard to understand, still I’ll explain what happens here.

Basically, we tell Travis to set up 3 build containers. The first two will install Node.js, NPM and the expo-cli. Then we’ll tell it to install the NPM/Yarn packages and keep the node_modules folder in the cache. If those are done, a new job will start that actually builds and deploys the application to the web. We run yarn just to be sure, but since it has the node_modules in cache, it’ll finish right away and tell you it’s up to date. Next, the expo build:web command is triggered, which will build our application for web platforms and puts the output in the web-build folder which is then published to Netlify. The deploying command also expects two secrets which should be configured as environment variables. $NETLIFY_ID is the specific ID of the website you’re publishing to on Netlify and $NETLIFY_AUTH is the deploy key you generate from the Netlify website which tells Netlify you are authorized to publish to the website mentioned in the $NETLIFY_ID. In this example I also tell Travis to only trigger the deploy job on the main branch, but modify that to your liking.

# .travis.yml
language: node_js
node_js:
  - node
  - lts/*
cache:
  directories:
    - ~/.npm
    - node_modules
before_script:
  - npm install -g npm@latest
  - npm install -g yarn
  - npm install -g expo-cli
script:
  - yarn
jobs:
  include:
    - stage: deploy website
      script:
        - yarn
        - expo build:web
      deploy:
        provider: netlify
        site: $NETLIFY_ID
        auth: $NETLIFY_AUTH
        dir: "web-build"
        prod: true
        edge: true
        on:
          branch: main

Deploying to Netlify

In this example I used Netlify to deploy the application, but any static hosting service (like Github pages or Vercel) can be used since Expo will generate a static build of your site. I won’t go further here on how you can set up Netlify, since I wrote a blogpost about that before.

Elian.codes