Creating and Publishing React Apps

Version/Environment (if relevant):

Applies to creating a React app in a Domino Workspace and deploying it as a Domino App. This example uses Create React App, though an existing React app can also be uploaded directly to a project instead.

Resolution:

Create the app structure

If you’re using a Domino Standard Environment on Domino 5.9.x, Node.js and npm may already be included. If not present in your environment, add your preferred version by following the Node.js installation instructions (using nvm or fnm is recommended for Linux). Once Node.js and npm are available, open a Terminal in your Domino Workspace and run the following, substituting your own app name for domino-react: npx create-react-app domino-react Running npx create-react-app in a Domino Workspace terminal

Running npx create-react-app in a Domino Workspace terminal

You may be prompted to confirm installing the create-react-app package — confirm to proceed. Once installed, it will create your React app. On success, you’ll see output similar to: Successful create-react-app output in terminal

Successful create-react-app output in terminal

This creates the React project’s files and folder structure inside your /mnt folder: React app folder structure in /mnt

A large number of files will now be available to sync from your Workspace. All of these need to be synced at least once for the app to run — given the file count, this initial sync may take a while. Syncing React app files from Workspace

Starting the app

Once the React app’s folder/file structure has synced from your Workspace to your project, add an app.sh to start the app. App URLs are dynamic — they include the run ID — so the app’s homepage field in package.json must be set at runtime. The sample app.sh below does this, assuming a React app named domino-react:

URL_BASE="https://<platform-domino-url>/$DOMINO_PROJECT_OWNER/$DOMINO_PROJECT_NAME/r/notebookSession/$DOMINO_RUN_ID"
HOME_STRING="\"homepage\": \"$URL_BASE\","
cd domino-react/

#Set hostname to the base url for the app

if grep -F '"homepage"' package.json; then
#replace homepage if exists
sudo sed -i "s|\"homepage\":.*|$HOME_STRING|" package.json
else
#add homepage if line doesn't exist
sudo sed -i "4i $HOME_STRING" package.json
fi

#install necessary packages
sudo npm install create-react-app
sudo npm i web-vitals --save-dev
sudo npm install -g serve

#Below lines run a Production Build (does not auto refresh upon changes to src)
sudo npm run build
serve -s build -l 8888

This script writes a homepage line to package.json if one doesn’t already exist, or overwrites the existing line with the current run’s app URL. With this app.sh in place, publish your App. It will take a few minutes to prepare; once ready, you can view it: Published React app running in Domino

Managing the app’s resources

Creating the app with create-react-app generates a large number of subfolders and files in node_modules. These are required for the app to run, but you may want to exclude them from syncing on future runs or Workspace startups. Add this folder to your .dominoignore file to do so: Adding node_modules to .dominoignore

Notes/Information:

The sed -i "4i ..." fallback in app.sh assumes the homepage line should be inserted at line 4 of package.json. This works for the default file layout produced by Create React App, but if your package.json has a different structure, adjust the line number accordingly.

​Version/Environment (if relevant):

​Resolution:

​Create the app structure

​Starting the app

​Managing the app’s resources

​Notes/Information: