This content originally appeared on DEV Community and was authored by rowjay007
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
This content originally appeared on DEV Community and was authored by rowjay007
rowjay007 | Sciencx (2024-06-18T11:08:00+00:00) Integrating React Native Web API with Azure and GitHub Actions for web-view. Retrieved from https://www.scien.cx/2024/06/18/integrating-react-native-web-api-with-azure-and-github-actions-for-web-view/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.