Integrating React Native Web API with Azure and GitHub Actions for web-view

Have you ever faced the challenge of making your React Native app accessible to web users? In this short tutorial, I will guide you through a detailed process for deploying a React Native app for web-view using the React Native Web API, GitHub Actions, and Azure Web Services.

Before we can proceed, please ensure that you have access to the following prerequisites listed:

• An existing React Native project.
• GitHub repository for your project.
• An Azure account with an active subscription.
• A basic understanding of GitHub Actions and Azure App Service.

Setting Up Your React Native Project for the Web

To begin, make sure you have a React Native project set up. Then, install react-native-web using npm and yarn to ensure compatibility across package managers and enable the web integration feature.

npm install react-native-web
yarn add react-native-web

Next, update your .babelrc configuration to integrate react-native-web. This configuration step ensures that the app can compile and run correctly on web platforms:

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": ["react-native-web"]
}

Then, modify your entry file (e.g., index.js or index.web.js) to register your app with react-native-web:

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { registerRootComponent } from 'expo';

registerRootComponent(App);
AppRegistry.registerComponent(appName, () => App);
AppRegistry.runApplication(appName, {
  initialProps: {},
  rootTag: document.getElementById('app-root'),
});

Let's update the package.json file with the following script to initiate the web view:

"scripts": {
  "web": "expo start --web && npx serve -s dist"
}

Deploying to Azure

Now that our React Native app can run on web-view, we will deploy it using Azure Web App from the App Services. We will begin by creating an Azure Web App in the Azure Portal. Set up the environment details:

• Publish: Code
• Runtime stack: Node 18 LTS or later
• Region: Choose an appropriate region
• Subscription: Your active subscription

Configure deployment from GitHub by connecting your GitHub account and selecting your repository and branch. Azure will set up a deployment pipeline, so you can easily automate the initial deployment.

Ensure the Azure App Services configuration includes the startup command using npx serve -s dist to serve the static files. This setup ensures that our yaml realise.zip will extract in the dist/* folder.

Automating Deployment with GitHub Actions

We will integrate a GitHub Actions workflow file into our repository to automate the deployment of our web application. Each push request made to our main branch will result in the triggering of the GitHub action. Below is a sample workflow file (.github/workflows/deploy.yml):

name: Deploy React Native Web App to Azure

on:
  push:
    branches:
      - main
    paths-ignore:
      - "README.md"
      - ".husky"
      - ".github/**"
      - "**/*.csv"
      - .env*
  pull_request:
    branches:
      - main
    paths-ignore:
      - "README.md"
      - ".husky"
      - ".github/**"
      - "**/*.csv"
      - .env*
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'

      - name: Install dependencies
        run: npm install --legacy-peer-deps

      - name: Build for web deployment
        run: npx expo export -p web

      - name: Zip artifact for deployment
        run: zip release.zip dist/* .env -r

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: node-app

      - name: Unzip artifact for deployment
        run: unzip release.zip

      - name: Deploy to Azure Web App
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'react-web-api'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE }}
          package: .

That's all; if our build goes well, our web-view application will be available at our unique URL, where you may update your custom domain by connecting Azure Web Services to your DNS. With this automation solution, you can minimize manual intervention and ensure that every deployment keeps your web app up-to-date.

In addition, look for logs in Azure App Service and GitHub Actions if the deployment fails. Examine and resolve all problems with the starting command, build artifacts, or environment setup.

Conclusion

Integrating the React Native Web API into your app offers users various ways to access your platform. Moreover, Azure Web App and GitHub Actions streamline the deployment of your React Native app for web viewing, ensuring an efficient and seamless process by leveraging CI/CD automation flow.

Resources

Here is some of the documentation that was helpful for this article:

React Native Documentation
GitHub Actions Documentation
Azure App Service Documentation