What does this blueprint for React apps on Domino help me achieve?

This blueprint shows you how to implement a complete CI/CD pipeline for React applications on Domino Data Lab. It helps you automate deployments across development, UAT, and production environments, enforce quality gates with automated testing, maintain environment isolation, and use GitHub Actions plus Domino APIs to reduce manual errors and accelerate time-to-production for data science applications.

When should I use automated app deployment for React applications in Domino?

You should consider this automated CI/CD pattern if you have multiple Domino environments for development, UAT, and production, need quality gates for customer-facing or business-critical apps, require audit trails and governance, follow GitOps practices with pull requests, want to scale deployments across many React apps or frequent updates, or need developer self-service for app deployment under clear guardrails.

What prerequisites are required before setting up this CI/CD pipeline?

You need three Domino projects (Development, UAT, Production), Domino API access and tokens stored as GitHub secrets, a compute environment with Node.js and npm configured for React apps, and model API environment variables for development. On the GitHub side you need a repository with branch protection, GitHub Actions enabled, UAT and production environments with required secrets and variables (such as DOMINO_URL, APP_NAME, ENVIRONMENT_ID, PROJECT_NAME, REPO_URI, MODEL_API_URL), and basic familiarity with React and Domino’s app publishing model.

How does the promotion workflow between development, UAT, and production work?

Developers work in the dev branch and preview the React app in a Domino workspace using the development project. When ready, they create a pull request from dev to the UAT branch, which triggers a GitHub Actions workflow that tests, builds, and deploys the app to the UAT Domino project via the Domino API. After UAT validation, another pull request promotes changes to the production branch, triggering a similar workflow that deploys the app to the production Domino project. Each stage uses separate Domino projects and GitHub environments to keep environments isolated while standardizing promotion.

How are GitHub Actions and the Domino API used together in this CI/CD pipeline?

GitHub Actions orchestrates the CI/CD workflows by running on merges to the UAT and production branches. The workflows execute tests, build the React application, and then call Domino APIs using configured secrets and variables. Through these APIs, the pipeline provisions or updates Domino projects, manages Git credentials and repositories, configures app environments and hardware tiers, and deploys the app. GitHub Actions also reports deployment status so you can track whether UAT and production deployments have succeeded.

React app deployment with CI/CD on Domino

Overview and goals

Modern data science platforms need to support not just model development but also the deployment of interactive applications that make insights accessible to business users. React applications have become a standard for building rich, responsive user interfaces, but deploying them in enterprise environments requires robust CI/CD practices to ensure quality, security, and reliability.

This blueprint demonstrates how to implement a complete CI/CD pipeline for React applications on Domino Data Lab, enabling teams to:

Automate deployment workflows across development, UAT, and production environments
Enforce quality gates through automated testing before promotions
Maintain environmental isolation while streamlining the promotion process
Leverage GitHub Actions for orchestration while using Domino APIs for execution
Reduce manual errors and accelerate time-to-production for data science applications

By following this blueprint, you'll establish a production-ready deployment pipeline that balances developer velocity with operational control, ensuring that only tested and approved applications reach your production Domino environment.

When should you consider automated app deployment in Domino?

This CI/CD pattern is particularly valuable when:

You have multiple Domino environments: Organizations running separate Domino projects or instances for development, UAT, and production need automated promotion workflows to maintain consistency and reduce manual deployment overhead.
Your applications require quality gates: When deploying customer-facing or business-critical applications, automated testing and approval workflows ensure that bugs and issues are caught before reaching production users.
You need audit trails and governance: Regulated industries or compliance-focused organizations benefit from the documented approval process, automated testing records, and version control that CI/CD provides.
Your team follows GitOps practices: If your organization uses Git as the single source of truth and follows pull request workflows for changes, extending this pattern to application deployments creates consistency across your software delivery lifecycle.
You want to scale application deployments: Teams deploying multiple React applications or frequently updating existing ones will see significant time savings and reliability improvements through automation.
Developer self-service is a priority: This approach empowers data scientists and application developers to deploy their own applications following guardrails, without requiring manual intervention from platform administrators for each deployment.

How can you achieve automated app deployment in Domino workflows?

Architecture overview

The deployment pipeline follows a three-tier promotion workflow:

Key components

1. GitHub repository with branch strategy

dev branch: Active development and testing
uat branch: User acceptance testing
production master/main branch: Production-ready code

2. Domino projects

Development project: Manual testing and preview inside a workspace
UAT project: Automated deployment from uat branch
Production project: Final deployment after UAT validation

3. GitHub Actions workflows

Triggered on PR merges to uat and production branches
Execute tests, build the application, and deploy via the Domino API
Provide deployment status

4. Domino API integration

Project, Git credentials, and app creation
Environment management
Status monitoring and validation

Prerequisites for deploying a React app with CI/CD

Before implementing this CI/CD pipeline, ensure you have:

Domino environment

Three Domino projects set up (Development, UAT, Production). These can be on a single Domino or on multiple Domino deployments.
Domino API access with appropriate permissions
Domino API keys or service account tokens for authentication (stored as GitHub secret)
Compute environments configured with Node.js runtime for React apps
For a development project, set the MODEL_API_URL and MODEL_API_TOKEN environment variables

GitHub environment

GitHub repository with appropriate branch protection rules
GitHub Actions enabled for the repository
UAT and production GitHub environments with secrets and variables

Required secrets configured:
- DOMINO_USER_API_KEY: Your Domino API authentication token
- GH_PAT: GitHub PAT required to create Domino GitHub credentials and clone repos in GitHub actions (repo and workflow scopes)
- MODEL_API_TOKEN: Model API access token required for React app to connect to Domino Model API endpoint
Required variables:
- DOMINO_URL: Your Domino instance URL (e.g., https://your-domino.company.com)
- APP_NAME: React app name
- DOMINO_USERNAME: Domino user name
- ENVIRONMENT_ID: Domino compute environment ID (e.g. 68c09e16ff02ad64bfb459d3)
- GIT_PROVIDER_NAME: Domino Git credentials nickname (e.g. github_creds_001)
- HARDWARE_TIER_ID: Domino app hardware tier ID (e.g. small-k8s)
- PROJECT_NAME: Project Name (e.g. app_cicd_project01)
- REPO_NAME: Name of the repo in Domino project’s code section (e.g. Domino_React_App01)
- REPO_URI: GitHub Repository with React app code and CI/CD workflow configuration (e.g. https://github.com/ddl-wasanthag/domino-react-app)
- MODEL_API_URL: Domino model API url where inference backend for this app is running (e.g. https://cloud-cx.domino.tech:443/models/6608b3be91229570a972aa95/latest/model)

Development tools

Node.js and npm installed compute environment for local development
Git configured with access to your GitHub repository
Familiarity with React application structure
Basic understanding of Domino's application publishing model

Permissions and access

Repository write access for developers creating PRs
Repository admin access for configuring GitHub Actions
Domino project owner or collaborator role in target projects
Approval permissions for production deployments (if using GitHub environments)

Implementation guide for deploying a React app with CI/CD

Step 1: Repository structure setup

Clone the blueprint repository and examine its structure:

Bash / Shell

git clone https://github.com/ddl-wasanthag/domino-react-app.git
cd domino-react-app
git checkout dev

Your repository should follow this structure:

Bash / Shell

.
├── app-code/                              # Example app code template
│   ├── eslint.config.js
│   ├── index.html
│   ├── package.json
│   ├── public/
│   ├── README.md
│   ├── src/
│   └── vite.config.js
├── app.sh                                 # Domino app definition script
├── cicd/                                  # Python script with Domino API to provision Domino artifacts
│   ├── app-configs.yaml
│   ├── create_git_based_project_and_app.py
│   └── requirements.txt
├── endpoint/                              # Domino model API endpoint setup notebook
│   ├── cali-house-price-prediction.ipynb
│   └── README.md
├── my-vite-app/                           # Actual app code to be deployed to UAT/prod
│   ├── dist/
│   ├── eslint.config.js
│   ├── index.html
│   ├── node_modules/
│   ├── package.json
│   ├── package-lock.json
│   ├── public/
│   ├── README.md
│   ├── src/
│   └── vite.config.js
├── README.md                              # Main project documentation
└── setup_app_preview.sh                   # Workspace dev and preview steps

Step 2: Set up the model API endpoint

The example React app is a frontend to a model API endpoint in the backend that predicts house prices given various features. There is a notebook in the endpoint folder that creates an example house price prediction endpoint. Execute the notebook and note down:

1. The model API endpoint

2. Model API token

Step 3: Configure GitHub environments and secrets

Navigate to your GitHub repository settings, environments, and configure UAT and production environments as mentioned in the prerequisites sections.

Step 4: Create GitHub Actions workflows

UAT and production deployment workflows are in the .github/workflows/deploy-uat.yml

Step 5: Development and preview

In this step, the app is developed and previewed inside a Domino workspace. Create a Domino workspace in the development project with the dev branch.

Now, develop and preview the app. The provided setup_app_preview.sh script can be used to set up Node, NPM, Vite framework, and deploy the code.

App can be accessed for preview with a Jupyter Proxy URL available inside Domino.

Clicking this link will open up the app in the browser.

Note that the Vite app is referencing the Model API endpoint hosted using the environment variable in app-code/App.jsx

JavaScript

const callAPI = async (inputData) => {
    try {
      // Debug: Check what environment variables are available
      console.log('=== DEBUG: Environment Variables ===');
      console.log('VITE_MODEL_API_URL:', import.meta.env.VITE_MODEL_API_URL);
      console.log('VITE_MODEL_API_TOKEN:', import.meta.env.VITE_MODEL_API_TOKEN);
      
      // Read from OS environment variables (as set in Domino)
      const modelApiUrl = import.meta.env.VITE_MODEL_API_URL || import.meta.env.MODEL_API_URL;
      const modelApiToken = import.meta.env.VITE_MODEL_API_TOKEN || import.meta.env.MODEL_API_TOKEN;