Local Setup & Configuration
Relevant source files
The following files were used as context for generating this wiki page:
This page describes the environment requirements and procedures to initialize the Sunrise Communication project locally. The project consists of an Angular v22 frontend utilizing Server-Side Rendering (SSR) and a Python-based backend.
Environment Requirements
The project requires specific runtime environments for development and production builds.
| Requirement | Specification | Source |
|---|---|---|
| Angular CLI | Version 22.0.7 | README.md:3 |
| Package Manager | npm@11.9.0 | package.json:15 |
| Node.js | Version 20.x or higher | package.json:34 |
| Build Framework | @angular/build v22.0.7 | package.json:28 |
Frontend Setup
The frontend resides in the sunrise-angular directory. It uses a standalone component architecture with Angular Signals for state management.
Installation and Execution
- Navigate to the
sunrise-angulardirectory. - Install dependencies using
npm install. - Start the local development server with
ng serve.
Sources: README.md:5-11, package.json:14
Development Workflow
The following diagram illustrates the local development and build flow for the Angular application.
The diagram shows the transition from installation to local hosting and the production build pipeline. Sources: README.md:10-25, package.json:5-13
Application Configuration
The application uses specific configuration standards to ensure performance and SEO optimization.
Angular Signals and SSR
The project implements Angular Signals for state management and utilizes @angular/ssr for server-side rendering.
- Signals: Used for local component state and derived state via
computed(). - SSR: Configured with an Express server, using
RenderMode.Serverfor all routes.
Sources: implementation_plan.md:14-16, best-practices.md:21-23
Build and Deployment Scripts
The package.json defines several scripts for managing the build lifecycle and SEO tasks.
| Script | Command | Purpose |
|---|---|---|
start | ng serve | Launches the local dev server. |
build | ng build | Compiles project into dist/ directory. |
postbuild | node build-routes.js | Generates static route pages for deployment. |
test | ng test | Executes unit tests with Vitest. |
serve:ssr:sunrise-angular | node dist/.../server.mjs | Starts the SSR server locally. |
Sources: package.json:4-13, build-routes.js:33-51
Deployment Configuration
The application is configured for deployment on Vercel with specific routing and header rules.
Vercel Integration
The vercel.json file controls the build command and output directory for the CDN. It includes rewrites to ensure the SPA functions correctly.
{
"version": 2,
"buildCommand": "cd sunrise-angular && npm install && npm run build",
"outputDirectory": "sunrise-angular/dist/sunrise-angular/browser",
"cleanUrls": true,
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
}
Sources: vercel.json:1-11
Security Headers
The configuration enforces security headers for all routes and long-term caching for assets.
- Cache-Control:
public, max-age=31536000, immutablefor/assets/. - X-Frame-Options:
SAMEORIGIN. - X-Content-Type-Options:
nosniff.
Sources: vercel.json:12-42
Summary
Setting up the Sunrise Communication project requires Node.js and the Angular CLI. The local environment supports reactive development through Signals and validated production builds through a post-build route generation process. Following these configurations ensures the application maintains its SSR capabilities and security standards across different environments.