Angular

This guide shows you how to deploy an Angular application to Edgio.

Setup requires:

An Edgio account. Sign up for free.
An Edgio property. Learn how to create a property.
Node.js. View supported versions and installation steps.
Edgio CLI.

Install the Edgio CLI

If you have not already done so, install the Edgio CLI.

Bash
npm i -g @layer0/cli@latest

Getting Started

If you don’t already have an Angular application, you can create one using the following steps:

1. Create a new Angular App

Bash
npm install -g @angular/cli
ng new my-layer0-angular-app

You should now have a working starter app. Run ng serve to see the application running on localhost:4200.

2. Add SSR

To deploy your Angular application on Edgio it needs to support server-side rendering (SSR). To add SSR support, run:

Bash
ng add @nguniversal/express-engine --clientProject &lcub;&lcub;PROJECT&lowbar;NAME&rcub;&rcub;

(Note: the {{PROJECT&lowbar;NAME}} value comes from the package.json file and should match the value of the name key.

Read more about server-side rendering in Angular here.

The previous command created:

A server-side application module (app.server.module.ts)
A bootstrapper for the server app (main.server.ts)
server.ts which exports an Express app
TypeScript configuration for the server (tsconfig.server.json)

You can now run npm run build:ssr && npm run serve:ssr to access your server-side rendered app at localhost:4000.

To prepare your Angular application for deployment on Edgio:

3. Initializing your Project

Initialize your project for use with Edgio by running the following command in your project’s root directory:

10 init

This will automatically add all of the required dependencies and files to your project. These include:

The @layer0/core package
The @layer0/angular package
The @layer0/cli package
layer0.config.js- Contains various configuration options for Edgio.
routes.js - A default routes file that sends all requests to the Angular Universal server. Update this file to add caching or proxy some URLs to a different origin.

4. Use the right angular project

If you have several projects and the defaultProject as specified in angular.json is not the project with the SSR build, specify the correct project with the ANGULAR_PROJECT environment variable. For example: ANGULAR_PROJECT=my-ssr-project 0 build.

Routing

The default routes.js file created by 0 init sends all requests to Angular server via a fallback route.

JavaScript
// This file was automatically added by 0 deploy.
// You should commit this file to source control.

const { Router } = require('@layer0/core/router')
import { angularRoutes } from '@layer0/angular'

export default new Router().use(angularRoutes)

Caching

The easiest way to add edge caching to your Angular app is to add caching routes before the middleware. For example, imagine you have a route /pages/c/:categoryId:

JavaScript
new Router()
  // Prevent search engine bot(s) from indexing
  // Read more on: https://docs.layer0.co/applications/cookbook#blocking-search-engine-crawlers
  .noIndexPermalink()
  .get('/pages/c/:categoryId', ({ cache }) => {
    cache({
      browser: {
        maxAgeSeconds: 0,
        serviceWorkerSeconds: 60 * 60 * 24,
      },
      edge: {
        maxAgeSeconds: 60 * 60 * 24,
        staleWhileRevalidateSeconds: 60 * 60,
      },
    })
  })
  .use(angularRoutes)

Running Locally

To test your app locally, run:

10 run

You can do a production build of your app and test it locally using:

Bash
0 build && 0 run --production

Setting --production runs your app exactly as it will be when deployed to the Edgio cloud.

If you have several projects and the defaultProject in angular.json is not the project you would like to deploy, specify the correct project by setting the ANGULAR_PROJECT environment variable when running 0 run.

For example:

JSON
ANGULAR_PROJECT=my-project 0 run

Deploying

Deploy your app to the Sites by running the following command in your project’s root directory:

10 deploy