Running Applications

This guide covers building framework applications and running them locally or in production.

Building Applications

To build all framework applications for production:

npm run build

This compiles each framework into optimized production builds. The process runs in parallel and takes a few minutes to complete all frameworks.

You can also build individual frameworks:

npm run build:react
npm run build:vue
npm run build:angular
npm run build:svelte
# ... and so on for all frameworks

Build outputs are saved to each framework's build directory (usually dist/ or build/).

Running the Server

After building, start the production server:

npm start

This starts a Flask server on port 3000 that serves all framework applications and the comparison website. Visit http://localhost:3000 to see the homepage, or http://localhost:3000/react to view a specific framework.

The server includes: - Framework routing (serves each app at /{framework}/) - Static asset handling - Health check endpoint at /health - 404 error pages for missing frameworks

Development Mode

For development with hot reloading, you can run individual framework dev servers:

npm run dev:react     # React development server
npm run dev:vue       # Vue development server  
npm run dev:angular   # Angular development server
# ... etc for all frameworks

These run on port 3000 and provide framework-specific development features like hot module replacement.

To run all dev servers simultaneously:

npm run dev:all

Static Website Generation

The comparison website can be built as a static site for deployment:

python scripts/run/build_website.py

This generates a complete static website in dist-website/ with: - Pre-rendered HTML pages for all frameworks - Interactive charts and visualizations
- All static assets and styles - Optimized for CDN deployment

Common Patterns

Local development: Use individual dev servers (npm run dev:react) for working on specific frameworks.

Testing builds: Use npm run build followed by npm start to test production builds locally.

CI/CD deployment: Use npm run build then static website generation for hosting platforms.

Build Directories

Each framework saves builds to its standard location: - React, Vue, Solid, etc: apps/{framework}/dist/ - Angular: apps/{framework}/dist/weather-app-angular/ - Svelte: apps/{framework}/build/ - Vanilla, Alpine: No build step (served directly)

The main server automatically detects and serves from the correct build directory for each framework.