Mondo Diaz
2054181228
- Downgrade from Angular 19 to Angular 17.3.0 - Switch from Vite-based build (@angular/build) to webpack (@angular-devkit/build-angular) - Eliminates Vite, esbuild, and rollup dependencies that were causing issues in restricted npm environments - Update tsconfig.json for webpack compatibility (moduleResolution: bundler) - Update angular.json to use browser builder instead of application builder - Update docker-compose.yml to use prebuilt Dockerfile for air-gapped deployment - Add build-for-airgap.sh helper script for local builds - Update DEPLOYMENT.md with Angular 17 webpack strategy notes - Bundle size: 329.73 kB raw / 86.54 kB gzipped This change improves compatibility with enterprise environments that have restricted package registry access. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
121 lines
3.2 KiB
Markdown
121 lines
3.2 KiB
Markdown
# Deployment Options
|
|
|
|
This project supports two deployment strategies for the Angular frontend, depending on your environment's network access.
|
|
|
|
## Option 1: Standard Build (Internet Access Required)
|
|
|
|
Use the standard `Dockerfile.frontend` which builds the Angular app inside Docker.
|
|
|
|
**Requirements:**
|
|
- Internet access to npm registry
|
|
- Docker build environment
|
|
|
|
**Usage:**
|
|
```bash
|
|
./quickstart.sh
|
|
# or
|
|
docker-compose up -d --build
|
|
```
|
|
|
|
This uses `Dockerfile.frontend` which:
|
|
1. Installs npm dependencies in Docker
|
|
2. Builds Angular app in Docker
|
|
3. Serves with nginx
|
|
|
|
---
|
|
|
|
## Option 2: Pre-built Deployment (Air-Gapped/Restricted Environments)
|
|
|
|
Use `Dockerfile.frontend.prebuilt` for environments with restricted npm access.
|
|
|
|
**Requirements:**
|
|
- Node.js 18+ installed locally
|
|
- npm installed locally
|
|
- No internet required during Docker build
|
|
|
|
**Note:** This project uses Angular 17 with webpack bundler (not Vite) for better compatibility with restricted npm environments.
|
|
|
|
**Usage:**
|
|
|
|
### Step 1: Build Angular app locally
|
|
```bash
|
|
cd frontend
|
|
npm install # Only needed once or when dependencies change
|
|
npm run build:prod
|
|
cd ..
|
|
```
|
|
|
|
### Step 2: Update docker-compose.yml
|
|
Edit `docker-compose.yml` and change the frontend dockerfile:
|
|
|
|
```yaml
|
|
frontend:
|
|
build:
|
|
context: .
|
|
dockerfile: Dockerfile.frontend.prebuilt # <-- Change this line
|
|
ports:
|
|
- "4200:80"
|
|
depends_on:
|
|
- api
|
|
```
|
|
|
|
### Step 3: Build and deploy
|
|
```bash
|
|
docker-compose up -d --build
|
|
```
|
|
|
|
This uses `Dockerfile.frontend.prebuilt` which:
|
|
1. Copies pre-built Angular files from `frontend/dist/`
|
|
2. Serves with nginx
|
|
3. No npm/node required in Docker
|
|
|
|
---
|
|
|
|
## Troubleshooting
|
|
|
|
### Build Tool Package Issues
|
|
|
|
If you see errors about missing packages like:
|
|
```
|
|
Cannot find package "vite"
|
|
Cannot find package "esbuild"
|
|
Cannot find package "rollup"
|
|
```
|
|
|
|
**Solution:** This project uses Angular 17 with webpack bundler specifically to avoid these issues. If you still encounter package access problems in your restricted environment, use Option 2 (Pre-built) deployment above, which eliminates all npm dependencies in Docker.
|
|
|
|
### Custom NPM Registry
|
|
|
|
For both options, you can use a custom npm registry:
|
|
|
|
```bash
|
|
# Set in .env file
|
|
NPM_REGISTRY=http://your-npm-proxy:8081/repository/npm-proxy/
|
|
|
|
# Or inline
|
|
NPM_REGISTRY=http://your-proxy ./quickstart.sh
|
|
```
|
|
|
|
---
|
|
|
|
## Recommendation
|
|
|
|
- **Development/Cloud**: Use Option 1 (standard)
|
|
- **Air-gapped/Enterprise**: Use Option 2 (pre-built) ⭐ **RECOMMENDED**
|
|
- **CI/CD**: Use Option 2 for faster, more reliable builds
|
|
- **Restricted npm access**: Use Option 2 (pre-built) ⭐ **REQUIRED**
|
|
|
|
---
|
|
|
|
## Build Strategy for Restricted Environments
|
|
|
|
**This project uses Angular 17 with webpack** instead of Angular 19 with Vite specifically for better compatibility with restricted npm environments. Webpack has fewer platform-specific binary dependencies than Vite.
|
|
|
|
If you encounter any package access errors during builds:
|
|
- `Cannot find package "vite"`
|
|
- `Cannot find package "rollup"`
|
|
- `Cannot find package "esbuild"`
|
|
- Any platform-specific binary errors
|
|
|
|
**Solution:** Use Option 2 (Pre-built) deployment. This completely avoids npm installation in Docker and eliminates all build tool dependency issues.
|