Edgio
Edgio Console

Angular

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

Example

Try the Angular SSR Site Example
View the Code

Connector

This framework has a connector developed for Edgio. See Connectors for more information.
View the Connector Code

Prerequisites

Setup requires:

Install the Edgio CLI

If you have not already done so, install the Edgio CLI.
Bash
1npm i -g @edgio/cli@^6.0.0

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
1npm install -g @angular/cli
2ng new my-edgio-angular-app
You should now have a working starter app. Run ng serve to see the application running on localhost:4200.

2. Initializing your Project

Initialize your project for use with Edgio by running the following command in your project’s root directory:
Bash
1edgio init --edgioVersion ^6.0.0
This will automatically add all of the required dependencies and files to your project. These include:
  • The @edgio/core package
  • The @edgio/angular package
  • The @edgio/cli package
  • edgio.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.

3. 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 edgio build.

Routing

The default routes.js file created by edgio init sends all requests to Angular server via a fallback route.
JavaScript
1// This file was added by edgio init.
2// You should commit this file to source control.
3

4const { Router } = require('@edgio/core/router')
5const { angularRoutes } = require('@edgio/angular')
6

7module.exports = 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
1new Router()
2  .get('/pages/c/:categoryId', ({ cache }) => {
3    cache({
4      browser: {
5        maxAgeSeconds: 0,
6        serviceWorkerSeconds: 60 * 60 * 24,
7      },
8      edge: {
9        maxAgeSeconds: 60 * 60 * 24,
10        staleWhileRevalidateSeconds: 60 * 60,
11      },
12    })
13  })
14  .use(angularRoutes)

Running Locally

To test your app locally, run:
Bash
1edgio dev
You can do a production build of your app and test it locally using:
Bash
1edgio build && edgio 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 edgio run.
For example:
Bash
1ANGULAR_PROJECT=my-project edgio run --production

Deploying

Deploy your app to the Sites by running the following command in your project’s root directory:
Bash
1edgio deploy
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 edgio deploy.
For example:
JSON
1ANGULAR_PROJECT=my-project edgio deploy
See Deployments for more information.