Developing and Serving React Apps from Chromebooks

Yesterday I started to collect some notes on setting up React, Typescript, Babel, Webpack, Karma.... Holy cow! How many tools do you need just to get hello-react running?  Fortunately, a web search short circuited most of that when the Interweb powers showed me Facebook's create-react-app script "bundled" with recent versions of npm.

A couple of command-line entries later, node was scanning a directory, transpiling Typescript, running tslint and unit tests, and serving up the results.  It was so easy, you must be able to do this on a Chromebook....

There aren't many steps here.  First install Termux, nominally an Android terminal emulator, but green-circle gateway to Linux from ChromeOS.  We'll briefly use its package manager to bootstrap into the npm world.

pkg install git    # you have to save your work
pkg install nodejs
npx create-react-app lookout-unicorns
cd lookout-unicorns
npm start

Now point your browser to http://localhost:3000.  Chrome, surprisingly doesn't recognize the URL, but Firefox for Android running on ChromeOS does.

If you want to use Chrome to view your fruits....  ChromeOS assigns the Android emulator a private IP address which you can get from ifconfig in Termux or Crouton.  This won't be the same IP address assigned to your Chromebook by the network, but oddly ChromeOS will expose port 3000 to the world on your Chromebook's IP address to the rest of the network, just not to its own Chrome browser....