tl;dr Use Android with Termux to code and host your React webapp from your smartphone. The beginning Sometimes when i hang around i just cannot keep myself from thinking about coding, this is one of the worst things that can happen where you’re a developer because is somewhat alienating but on the other hand it can lead to something good for your application! Well, if you’re like me and you really love having crazy ideas when you’re in a shopping center or driving, in those moments you are probably feeling that something is missing… like a nice keyboard under your fingertips. After a while i was perceiving this as a problem, but it was showing up mostly when i was bored so after all it was good to keep me alive in some situation! Well, in the end here’s what I came up with: I always thought that smartphones were meant to something more than mass surveillance, and entertainment and yes they are a great aid for teamwork and productivity, but to me is not enough. I want to work on my smartphone/tablet. And i want to do it the way (or the most similar one) i would do with my Mac. Here’s what you should do The best keyboard for the job is , the better is an . Hacker’s Keyboard external bluetooth keyboard Install , launch and update it with the . Termux apt command $ apt update && apt upgrade then . reach the external storage $ termux-setup-storage install . some core utilities and other $ apt install coreutils$ apt install curl$ apt install tar$ apt install zsh$ chsh -s zsh //to set zsh as the default login shell$ apt install gnupg$ apt install vim$ apt install nano$ apt install nodejs$ apt install git if you want to remote your shell you can use OpenSSH (thanks to for this part). The Oliverse $ apt install openssh # create the permission file$ touch ~/.ssh/authorized_keys # Set Permissions to the file$ chmod 600 ~/.ssh/authorized_keys # Make sure the folder .ssh folder has the correct permissions$ chmod 700 ~/.ssh # generate OpenSSH key pair (skip passphrase with enter)$ ssh-keygen # add the key to authorizex_keys file$ cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys$ chmod 600 ~/.ssh/authorized_keys # test from the device itself$ ssh localhost -p 8022 -i %PATH_TO_KEY-FILE%/%NAME_OF_KEY% # then you can copy ~/.ssh/id_rsa to your client (your computer)# with this command you will find the file in the root of your device$ cp ~/.ssh/id_rsa ~/storage/shared # change the file name and copy it on your ~/.ssh folder on the computer or into ~/.ssh/known_hosts file # access your device from the remote shell like this$ ssh <device_ip> -p 8022 -i ~/.ssh/<your_new_filename> Let’s React! Let’s now try to setup a minimal development environment for React. # install yarn with npm$ npm install --global yarn # test yarn$ yarn --version # install react$ npm install -g create-react-app # go to your home and create a project folder$ mkdir projects$ create-react-app my-app$ cd my-app/ The command won’t work so you have to edit package.json file in your project adding another property to the script part of the json. you can use command to do it. npm start nano package.json "onandroid": "node node_modules/react-scripts/scripts/start.js" Now you can start the server using the script you just wrote. $ npm run onandroid# you can access your react website from # or from another host of the net from http://<device_ip>:3000 http://localhost:3000 From now you can access your React website from http://localhost:3000 . Or you can even access it from any host of the network you’re connected with using http://<device_ip>:3000 Watch your page while you code If you really want to enjoy this you should try using (paid app). With a Termux normal session you can reach your project folder and start the development server with , then after it started launch Termux:Float and you will have a resizable moving shell window where you can code with Vim! You can also open with the browser and keep it in the background. Now code on the floating window and watch the page change at every save thanks to livereloading! Termux:Float npm run onandroid http://localhost:3000 Conclusions Thanks to Termux in a short amount of time you can make your mobile device a satellite development station and code way more comfortably that you ever imagined. When you’re done you can commit the changes with and keep your normal workflow. git Other links . Termux Help page Another great article about developing on your mobile with Termux: and . Building a Node.js application on Android — Part 1: Termux, Vim and Node.js Part 2

Code a React website on your Android smartphone or tablet like you never imagined

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

GraphQL nested mutations with Apollo: small fatigue, max gain

Java bits: 0xFF and 0xFFL

10 Things You Didn't Know You Could Do With Google Keep

10 Things to check on Android code reviews

10 Mistakes In Mobile App Development That Make You Look Dumb

10 good rules for bad App

GraphQL nested mutations with Apollo: small fatigue, max gain

Java bits: 0xFF and 0xFFL

10 Things You Didn't Know You Could Do With Google Keep

10 Things to check on Android code reviews

10 Mistakes In Mobile App Development That Make You Look Dumb

10 good rules for bad App

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps