Develop React Native application with Wazaterm

This tutorial explains how to develop React Native application using Wazaterm.

What you need
  • PC with internet connection
  • Expo app (iPhone or Android Phone)
  • Unix environment or software with SSH Local Port Forwarding (autossh is recommended) that comes with OS.

1. Start Wazaterm

Start Wazaterm with referring to this article.

2. Install nvm

Install node by using nvm tool.

$ curl -o- <a href="https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh">https://raw.githubusercontent.com/nvm-sh/nvm/v0.39...</a> | bash
$ vi ~/.bashrc
# add below
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
$ nvm install node
$ nvm use node
$ node --version 

3. Install React Native(expo)

$ yarn global add expo-cli
$ expo init AwesomeProject
$ cd AwesomeProject
$ yarn add @expo/ngrok -D # Use later for tunneling

4. Start React Native process

When you start the process with yarn start, the development tools will run on localhost. We will do Local Port Forwarding on this port.

$ yarn start yarn run v1.9.2 $ expo start Starting project at /tmp/AwesomeProject Developer tools running on http://localhost:19002 Starting Metro Bundler.

5. Use autossh on your PC for local port forwarding

$ autossh -M 50600 -NT -o "ServerAliveInterval 60" -o TCPKeepAlive=yes -o "ServerAliveCountMax 120" -L 19002:localhost:19002 username@hostname.wazaterm.com &

6. Tunneling configuration

Type localhost:19002 into your browser to launch the development tool. Now, click on the tunneling tab below to start tunneling.

Untitled-2021-12-20-0750.png

7. Connect from the Expo app

There is a QR code in the development tool, so download the Expo app (a.k.a. Pe) and load it with a camera app or similar. Then it will start loading and you will be able to develop React Native. From here, you can develop in each editor.

IMG_9697 2 (1).png

IMG_9697 2 (1).png

(Extra) How to connect directly from the Expo app

Although not secure, you can change the port by using the following command, which will load the Wazaterm instance directly after reading the QR code.

$ REACT_NATIVE_PACKAGER_HOSTNAME=r34.wazaterm.com expo start --port 3000