EMC - Event Management Console

Adobe Experience Console application for managing events, series, registrations, and teams.

📖 Documentation

👉 Complete Documentation Index - Start here for all guides and references

Quick Links

• Project Overview - Architecture and structure
• Dev Token Quick Start - Get up and running in 30 seconds
• Development Workflow - Official Adobe workflow

Setup

1. Install dependencies: npm install
2. Populate the .env file in the project root (see Configuration)
3. Run the app: npm run dev

Local Development

npm run dev              # Start dev server on localhost:3000
npm run dev:local        # Run with local actions (not deployed)
aio app run              # Alternative: uses default port 9080

By default the UI will be served locally but actions will be deployed and served from Adobe I/O Runtime. To start a local serverless stack and also run your actions locally use the --local option.

Testing

npm run lint             # Check code style
npm run type-check       # TypeScript validation
npm run check            # Run both lint and type-check

Deployment

Environments

Environment	URL	Command
Dev	14257-emc-dev.adobeio-static.net	npm run deploy:dev
User Workspaces	14257-emc-{username}.adobeio-static.net	npm run deploy:dev
Stage	14257-emc-stage.adobeio-static.net	npm run deploy:stage
Production	14257-emc-production.adobeio-static.net	npm run deploy:prod

Deploy Commands

npm run deploy:dev       # Build with dev APIs, deploy without publishing
npm run deploy:stage     # Build with stage APIs, deploy without publishing
npm run deploy:prod      # Build with prod APIs, deploy and publish

The ENVIRONMENT variable is baked into the bundle at build time, which controls which API tier (dev/stage/prod) the app calls at runtime.

Deployment Workflow

1. Select your target workspace:

   aio app use            # Follow prompts to select org, project, workspace

2. (Optional) Run checks before deploying:

   npm run check

3. Deploy to your target environment:

   npm run deploy:stage   # or deploy:dev / deploy:prod

4. To remove a deployment:

   aio app undeploy

Configuration

.env

Generate this file using aio app use, then add your custom variables:

# Auto-generated by aio CLI (do not commit)
AIO_RUNTIME_AUTH=...
AIO_RUNTIME_NAMESPACE=...

# Environment tier for API endpoint selection (dev/stage/prod)
# Defaults to 'dev' if not set. CI/CD sets this automatically.
ENVIRONMENT=dev

# Client identity for API requests
CLIENT_IDENTITY=emc-console-dev

# Google Places API keys (for venue autocomplete)
DEV_GOOGLE_PLACES_API=your-dev-key
STAGE_GOOGLE_PLACES_API=your-stage-key
PROD_GOOGLE_PLACES_API=your-prod-key

app.config.yaml

Main configuration file that defines the application's implementation. See Adobe documentation for details.

Environment-Based API Routing

The app uses the ENVIRONMENT variable (set at build time) to determine which API tier to use:

ENVIRONMENT	ESP API	ESL API
dev	Dev cluster	Dev cluster
stage	events-service-platform-stage.adobe.io	events-service-layer-stage.adobe.io
prod	events-service-platform.adobe.io	events-service-layer.adobe.io

Debugging

While running your local server (npm run dev), both UI and actions can be debugged. Open VS Code debugger and select the WebAndActions configuration.

TypeScript Support

The UI supports TypeScript out of the box. Use .tsx extension for React components. The tsconfig.json is already configured with the necessary settings.

Project Structure

EMC/
├── .github/workflows/     # CI/CD pipelines (pr_test.yml for PR checks)
├── web-src/               # Frontend React app
│   └── src/
│       ├── components/    # React components
│       ├── pages/         # Page components
│       ├── services/      # API services
│       ├── config/        # Configuration (env, constants)
│       ├── hooks/         # Custom React hooks
│       ├── contexts/      # React context providers
│       └── types/         # TypeScript definitions
├── docs/                  # Documentation
└── app.config.yaml        # App configuration