How to Deploy an Angular 19 SSR App on AWS Amplify?

Hello guys how are you? Welcome back on my blog Therichpost. Today in this post I am going to share How to Deploy an Angular 19 SSR App on AWS Amplify?

Angular 19 came. If you are new then you must check below two links:

• Angular 19 Basic Tutorials
• Free Angular Admins

Now guys here is the complete code snippet and please follow carefully:

Deploying an Angular 19 Server-Side Rendering (SSR) application on AWS Amplify involves several steps. Here’s a detailed guide:

1. Prepare Your Angular 19 SSR App

Before deploying, ensure your Angular SSR app is production-ready.

1. Install Angular Universal: If not already done, add Angular Universal for SSR: ng add @nguniversal/express-engine
2. Build the App: Build both the client and server parts of your Angular SSR app: npm run build:ssr This will generate files in the dist/<your-project-name> directory.
3. Test Locally: Run the SSR server locally to ensure it works: npm run serve:ssr

2. Set Up AWS Amplify

Step 1: Create a New Amplify App

1. Sign in to the AWS Amplify Console.
2. Click “Get Started” under the “Deploy” section.
3. Choose your Git repository (e.g., GitHub, GitLab, Bitbucket) and connect your app.

Step 2: Configure Build Settings

In the Amplify build settings, you’ll need to specify the SSR build and deployment commands. Here’s an example of a amplify.yml file:

version: 1
applications:
  - appRoot: /
    frontend:
      phases:
        preBuild:
          commands:
            - npm ci
        build:
          commands:
            - npm run build:ssr
            - cp dist/<your-project-name>/browser/index.html dist/<your-project-name>/browser/200.html
      artifacts:
        baseDirectory: dist/<your-project-name>/browser
        files:
          - '**/*'
    backend:
      phases:
        preBuild:
          commands:
            - npm ci
        build:
          commands:
            - npm run build:ssr
            - cp dist/<your-project-name>/browser/index.html dist/<your-project-name>/browser/200.html
    customHeaders:
      - pattern: '**/*'
        headers:
          - key: Cache-Control
            value: 'max-age=0, no-cache, no-store, must-revalidate'

Replace <your-project-name> with your Angular project name.

3. Update the Express Server for Lambda

AWS Amplify uses AWS Lambda for SSR apps. Modify your server.ts to work in a Lambda environment.

Update the server.ts file to export the handler function:

Guys here are the free Angular Ecommerce Templates as well:

import 'zone.js/node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import express from 'express';
import { join } from 'path';

export const app = express();

const DIST_FOLDER = join(process.cwd(), 'dist/<your-project-name>');
const PORT = process.env.PORT || 4000;

app.engine(
  'html',
  ngExpressEngine({
    bootstrap: AppServerModule,
  }) as any
);

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

app.get(
  '*.*',
  express.static(join(DIST_FOLDER, 'browser'), {
    maxAge: '1y',
  })
);

app.get('*', (req, res) => {
  res.render('index', {
    req,
    res,
    providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
  });
});

if (!process.env.LAMBDA_TASK_ROOT) {
  app.listen(PORT, () => {
    console.log(`Node Express server listening on http://localhost:${PORT}`);
  });
}

export const handler = async (event: any, context: any) => {
  return app(event, context);
};

4. Deploy the App

1. Push your code to the connected Git branch.
2. AWS Amplify will automatically build and deploy your app.
3. After deployment, you’ll receive a URL for your app.

5. Test and Monitor

1. Test your deployed app by visiting the provided URL.
2. Monitor logs and performance in the AWS Amplify Console.

Notes:

• Domain Management: You can set up a custom domain in AWS Amplify for your app.
• Caching: Use AWS CloudFront caching to improve performance.
• Lambda Limits: Ensure your SSR app complies with AWS Lambda size and timeout limits. Optimize assets and use lazy-loading for large apps.

Guys if you will have any kind query then feel free to comment below.

Jassa

Thanks