Deploying Angular on Scalingo

Angular applications can be hosted on Scalingo. It requires some specific instructions as usually the application generates static files during the deployment. And these files require a web server to be served to your clients.

Deploying an Angular application requires to use the Multi Buildpacks. It will be used to generate the static files using Node.js during the deployment, and run a Nginx to serve the generated files.

Buildpacks Configuration

Create a .buildpacks file:

https://github.com/Scalingo/nodejs-buildpack
https://github.com/Scalingo/nginx-buildpack

Package.json Configuration

Make sure your package.json contains the appropriate build scripts for Angular:

{
  "name": "my-angular-app",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --configuration=production",
    "build:prod": "ng build --configuration=production --output-path=dist",
    "test": "ng test",
    "lint": "ng lint"
  },
  "engines": {
    "node": ">=18.0.0",
    "npm": ">=9.0.0"
  },
  "dependencies": {
    "@angular/animations": "^20.0.0",
    "@angular/common": "^20.0.0",
    "@angular/compiler": "^20.0.0",
    "@angular/core": "^20.0.0",
    "@angular/forms": "^20.0.0",
    "@angular/platform-browser": "^20.0.0",
    "@angular/platform-browser-dynamic": "^20.0.0",
    "@angular/router": "^20.0.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^20.0.0",
    "@angular/cli": "^20.0.0",
    "@angular/compiler-cli": "^20.0.0",
    "typescript": "~5.6.0"
  }
}

Nginx Configuration

Configure Nginx to serve the generated files by creating a nginx.conf file. The following configuration assumes that the files have been generated in the dist folder:

root /app/dist/browser;

location / {
    try_files $uri $uri/ /index.html =404;
    
    # Cache configuration for assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    # Security configuration
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "no-referrer-when-downgrade" always;
    add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
}

# API configuration (optional)
location /api/ {
    # Proxy to your backend API if needed
    proxy_pass http://backend-service;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

Procfile Configuration

Then instruct Scalingo how to start the application with a Procfile:

web: bin/run

The bin/run script is generated during the deployment by the Nginx buildpack and starts a Nginx listening on the port defined in the PORT environment variable.

Angular Configuration

Production Configuration

Create or modify your angular.json file to optimize production builds:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ],
              "outputHashing": "all",
              "sourceMap": false,
              "optimization": true,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        }
      }
    }
  }
}

Environment Variables

environment.prod.ts

export const environment = {
  production: true,
  apiUrl: 'https://your-api.scalingo.io/api',
  appName: 'My Angular 20 App'
};

environment.ts

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
  appName: 'My Angular 20 App (Dev)'
};

Angular Optimizations

Lazy Loading and Code Splitting

Use lazy loading to optimize performances:

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

Service Worker (Optional)

To add PWA support:

ng add @angular/pwa

Then configure in ngsw-config.json

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }
  ]
}

Deployment

Ensure all configuration files are present, commit changes, and deploy to Scalingo:

git push scalingo main

Troubleshooting

Common Errors

Build Error:

Check that Node.js and npm version are compatible with Angular.

404 Error on Routes:

Ensure the Nginx configuration includes try_files $uri $uri/ /index.html =404;.

Performance Issues:

Enable gzip compression in Nginx and optimize bundles with tree-shaking.

Last update: 13 Aug 2025 Suggest edits