Viam provides an open source remote control (RC) page as part of the RDK that allows for troubleshooting and control of components. RC is hosted locally on each robot as well as on Viam cloud.

To start the client development environment, navigate to web/frontend. After npm install, Run npm run build to copy PRIME static assets to the web/frontend/runtime-shared/static folder, including font icons. Finally run npm start.

In a new terminal tab, go run with the environmental variable ENV=development (e.g. ENV=development go run web/cmd/server/main.go -debug -config etc/configs/fake.json).

Visit localhost:8080 to view the app, not localhost:5173. The latter is a hot module replacement server that rebuilds frontend asset changes.

Remote Control can be run locally in production mode, which is useful in some situations, such as testing changes to the build or AppImage packaging process.

First run make build-web which will produce static assets into the web/frontend/runtime-shared/static folder. Then start the server with go run without the ENV variable (e.g. go run web/cmd/server/main.go -debug -config etc/configs/fake.json).

Note: If the build is not completed or fails, you should receive an warning message stating that files are missing. The RC page will not load in the case where a frontend build is not done.

For example: 2023-03-02T17:18:20.492-0500 WARN robot_server web/web.go:662 Couldn't find any static files when running RDK. Make sure to run 'make build-web'.

Remote Control is automatically included into the Viam AppImage using go:embed. The AppImage will automatically place all files in the runtime-shared folder based on App FileSystemCode.

The production files are generated by the Github Actions workflow after changes are merged. The workflow runs make build:web before generating the AppImage, including the files without them being commited to the Github Repository.

Remote Control components are exported to the @viamrobotics/remote-control NPM package to allow for reuse. For each frontend change, it is important to increment the version of the NPM package. Otherwise, changes will be made only to the AppImage and not to the NPM package. The publishing process does not update existing NPM versions and requires a higher version to publish changes. To update the version:

1. Change the package.json file and increase the version field by 1.
2. Include the version bump in your PR with the corresponding frontend changes.
3. Upon merging, your changes will be published to NPM using the Github Actions worklow.

The file paths listed in the files field of package.json determines what is published to NPM, and may need to be updated in the future to change what is/isn't published into the repository.

If you intend to use the Remote Control in you own application, consider whether or not your application will be creating its own connection to the robot using the Viam TypeScript SDK. If so, be aware the Remote Control also creates and manages its own SDK Client. If you intend to use the Remote Control and make your own SDK Client to make API calls, you will want to make sure you disconnect from your Client after each API call so you do not maintain multiple long-running connections to the robot.

The NPM package does not include styles. Instead, we require tailwindcss as a peer dependency, and you must include the NPM package artifacts in your tailwind config:

// tailwind.config.js
module.exports = {
  content: [
    './components/**/*.{html,js}',
    './pages/**/*.{html,js}',
    './node_modules/@viamrobotics/remote-control/**/*.js',
  ],
  // ...
};