Build and Deploy Steps

1. Clone and Initial Setup

# Clone the repository
git clone [e-mail]:PSMRI/ubi-wallet-ui.git
cd ubi-wallet-ui

# Install dependencies
npm install

# Set up Git hooks (Husky)
npm run prepare
git config core.hooksPath .husky/_
chmod +x .husky/pre-commit
chmod +x .husky/commit-msg

2. Environment Variables Configuration

Create a .env file in the root directory with the following variables:

# Wallet backend URL
WALLET_APP_API_URL="http://localhost:3018"

# URL of beneficiary app - i.e, the app that will load the wallet app in an iframe
REACT_APP_PARENT_APP_ALLOWED_ORIGIN="http://localhost:5173"

Notes

• Never commit .env with real values to version control.

• For production deployment, ensure HTTPS URLs and secure API tokens.

• Verify all external services are accessible before running the UI.

3. Production Build

1. Create production build:

   npm run build

2. The build output will be in the dist/ directory

4. Build Output

The dist/ directory will contain:

• HTML entry point

• JavaScript bundles

• CSS bundles

• Static assets

• Source maps (if enabled)

5. Deployment Options

• You can host the UI on any hosting provider you prefer, such as S3 and CloudFront.

  Here is an example pipeline showing deployment to S3 & CloudFront Invalidation using a CI/CD tool such as GitHub Actions.

  • We are currently deploying the frontend on S3 (not using Docker). For detailed instructions, refer to the Frontend Deployment Documentation.