Wrangling Janus and your robot server into a React App

This is part II of a series about building a web controlled robotics platform. Part I was setting up Janus and serving demos with Node.js. Part III will be hooking up a robot!

Today, we’re going to build a react app to manage Janus, and create and serve streams programatically. This should make it easy to add robots and create pages for them.

1. Clone create-react-app

First things first, ssh in to your server and follow instructions at https://github.com/facebook/create-react-app to create a template. Basically

ssh yourserver
npx create-react-app robot-server
cd robot-server
npm start

Hoooray! If you browse over to http://yourserver:3000 you should see the basic react template.

Optional: SFTP

If you love editing in the console, or you use something like rmate, or you wanna edit locally, git push, and then pull from the server, you can skip this step. I’ve tried all of those things, but nothing beats the instantaneousness of editing a file locally and seeing it update instantly on the server, so I use SFTP.

I use sublime, and the SFTP plugin. A sweet way to sync a local folder to an SFTP mount point and then get a native-like experience is documented here https://codexns.io/products/sftp_for_sublime/sidebar

Basically, create a local folder to mirror the SFTP folder, open it in sublime, right click, and SFTP->Map to Remote. Make sure you add modules to your sftp’s ignore list, or you’ll be syncing forever.

2. Get Janus.js in npm

To use Janus, we need a javascript API, and we’re going to use the one included in the distro, Janus.js. Another day, I’ll cover using a more minimal, flexible API like mozilla’s minijanus or michaelfranzl’s minnie-janus.

It takes a little work to get it react ready, but the Janus documentation provides canonical instructions here, under ‘“Using janus.js directly with Webpack and other bundlers.”

Unfortunately, those instructions require modifying your webpack configuration, and create-react-app doesn’t allow us to modify webpack.config.js by default, so we’re going to use an extension to override it. Download react-app-rewired as a dev dependency in your project

npm i -D react-app-rewired

And then create a file called config-overrides.js in the root directory.

├── src
├── package.json
└─ config-overrides.js

The contents of my config-overrides.js are as follows:

After that, change the scripts in package.json, so npm start and npm build use react-app-rewired:

/* package.json */
  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

Now, you should be able to import the Janus API in your project. You can add the github repo to your dependencies, or you can simply

npm install janus-gateway

3. Build your app!

To be continued..