In this tutorial we will setup react native web app locally and deploy on Render.

Before we start with the react-native-web setup, I assume that you have installed Node.js, Yarn and react-native-cli on your machine.

1. Setup React Native App with Typescript

To create react native app you need to run following command

react-native init ReactNativeWebApp

This command will create react native app and your app directory will look like as shown in the following image (image 1.1)

image 1.1: Project root

To add typescript to our app first we need to install react-native-typescript-transformer

yarn add --dev react-native-typescript-transformer typescript

Then create a new file named tsconfig.json in your project’s root directory and copy-paste the JSON as shown in following code snippet (snippet 1.1)

snippet 1.1: tsconfig.json

Add tslint.json in the project’s root directory and copy-paste the JSON content from the following code snippet (snippet 1.2)

snippet 1.2: tslint.json

Next rename App.js to App.tsx and add types for react and react native

yarn add --dev @types/react @types/react-native

Final changes of App.tsx shown in the following code snippet (snippet 1.3)

snippet 1.3: App.tsx

Now run yarn ios or yarn android and you will see screen as shown in following image (image 1.2)

image 1.2: Final snapshot of mobile

2. Setup React Native Web & Webpack

Add react-dom and react-native-web to the project

yarn add react-dom react-native-web

Create a directory named web in the project’s root directory and add index.html (snippet 1.4) inside the web directory

sinppet 1.4: index.html
image 1.3: After adding index.html

Add webpack and its configuration inside web directory

To know more about webpack visit https://webpack.js.org/ and to know about webpack-dev-server visit https://webpack.js.org/configuration/dev-server

yarn add --dev webpack webpack-cli webpack-dev-server

To add webpack configuration first we need to create a file with name webpack.config.js inside web directory, then copy-paste content from following snippet (snippet 1.5) into webpack.config.js

snippet 1.5 webpack.config.js

We have used html-webpack-plugin, ts-loader and we need to add them to our project before we start development

yarn add --dev html-webpack-plugin ts-loader

Now add index.web.ts to the project’s root directory and copy-paste content from following snippet (snippet 1.6) to index.web.ts

snippet 1.6: index.web.ts

Now add web script command inside package.json as shown in following image (image 1.4)

image 1.4: yarn web command

Run yarn web command and visit localhost:8080. You will see a screen as shown in following image (image 1.5)

image 1.5: Final snapshot for web

3. Deploy web app

Add the following script command to package.json and to create a deployable dist source directory.

"build:web": "cd web && webpack"
image 1.6: diff for the yarn build:web script command

Then run yarn build:web which will create a new folder named dist with the required files needed to run the web app.

Open .gitignore and then add /dist inside the .gitignore file.

/dist

We will deploy the web app on Render cloud platform. To setup continuous deployment follow the below steps:

  • Create an account (Render supports only Github/GitLab).
  • If you are successfully created an account then you will see a dashboard as shown in following image (image 1.7)
image 1.7: Render dashboard
image 1.8: Your repository
  • Select your repo and add following settings shown in image 1.9, except Name, choose different and unique name for your app and then click on create web service
image 1.9: Render settings
  • If everything goes as expected then you can visit your site with the link provided by render, link highlighted in image 1.10
image 1.10: you will see your link in the highlighted area

I hope you had successfully setup React Native Web app. If you are curious to learn more then check my repo available at https://github.com/vemarav/ReactNativeWebPlayground