> ## Documentation Index
> Fetch the complete documentation index at: https://docs.domino.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Creating and Publishing React Apps

> Walks through creating a React app in a Domino Workspace with Create React App, configuring app.sh to set the dynamic app URL, publishing it as a Domino App, and managing node_modules sync via .dominoignore.

### ***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](https://create-react-app.dev/), 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](https://docs.dominodatalab.com/en/latest/user_guide/0d73c6/domino-standard-environments/) 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](https://nodejs.org/en/download/package-manager) (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](https://dominodatalab.file.force.com/sfc/dist/version/download/?oid=00D15000000EQXr\&ids=068UY00000HroMg\&d=%2Fa%2FUY0000018nnl%2FStZVxFtcPJdPpRU2GYb.8PTMT4bbmjydIPlsbiFxAdQ\&asPdf=false)

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](https://dominodatalab.file.force.com/sfc/dist/version/download/?oid=00D15000000EQXr\&ids=068UY00000HroMh\&d=%2Fa%2FUY0000018nnm%2FJ2qwecN3RISYbOrmDuAn9W1zzIWBb37Po4HIiJj7l74\&asPdf=false)

This creates the React project's files and folder structure inside your `/mnt` folder:

![React app folder structure in /mnt](https://dominodatalab.file.force.com/sfc/dist/version/download/?oid=00D15000000EQXr\&ids=068UY00000HroMi\&d=%2Fa%2FUY0000018nnn%2FFn2SRy4sc8O6u85HMP7NyXtG40zmf5HSxQ6OEYmPMDg\&asPdf=false)

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](https://dominodatalab.file.force.com/sfc/dist/version/download/?oid=00D15000000EQXr\&ids=068UY00000HroMj\&d=%2Fa%2FUY0000018nno%2FfEtpE8Mjjpw.0byOVMNXV.ENjBllEEMT45MV4M_8g70\&asPdf=false)

### 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](https://dominodatalab.file.force.com/sfc/dist/version/download/?oid=00D15000000EQXr\&ids=068UY00000HroMk\&d=%2Fa%2FUY0000018nnp%2Fssle5igej16aSbvLu9GcSTFMPJgrGSgW3OTn07MPDMY\&asPdf=false)

### 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](https://dominodatalab.file.force.com/sfc/dist/version/download/?oid=00D15000000EQXr\&ids=068UY00000HroMl\&d=%2Fa%2FUY0000018nnq%2F7fcZxYNfL8TRtVrcFrNW_6u6jPl2W2xu.V47AGHqlhs\&asPdf=false)

### **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.


## Related topics

- [How-to guides](/knowledge-base/how-to-guides-overview.md)
- [Create an App](/cloud/platform-capabilities/features/apps/create-an-app.md)
- [Publish and deploy App versions](/cloud/platform-capabilities/features/apps/publish-and-deploy-app-versions.md)
- [Configuration settings for Apps](/cloud/platform-capabilities/features/apps/app-logs-and-versioning/app-configuration-settings.md)