This guide shows you how to deploy an Angular application on Layer0:
This Angular example app uses server-side rendering and prefetching to provide lightening-fast transitions between pages.
This framework has a connector developed for Layer0. See Connectors for more information.
Layer0 only supports Node.js version 14.x
If you do not have Node.js installed on your system, download and install it from the official Node.js v14.x downloads page. Select the download that matches your operating system and run the installer. Note that the installer for Node.js will also install npm.
Note that while you can use any version of Node.js >= 14 locally, your app will run in Node 14 when deployed to the Layer0 cloud. Therefore we highly suggest using Node 14 for all development.
If you don't already have an Angular application, you can create one using the following steps:
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
.
To deploy your Angular application on Layer0 it needs to support server-side rendering (SSR). To add SSR support, run:
ng add @nguniversal/express-engine
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 Layer0:
npm install -g @layer0/cli
layer0 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 Layer0.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.
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 layer0 build
.
The default routes.js
file created by layer0 init
sends all requests to Angular server via a fallback route.
// This file was automatically added by layer0 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)
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
:
new Router()
.get('/pages/c/:categoryId', ({ cache }) => {
cache({
browser: {
maxAgeSeconds: 0,
serviceWorkerSeconds: 60 * 60 * 24,
},
edge: {
maxAgeSeconds: 60 * 60 * 24,
staleWhileRevalidateSeconds: 60 * 60,
},
})
})
.use(angularRoutes)
To test your app locally, run:
layer0 run
You can do a production build of your app and test it locally using:
layer0 build && layer0 run --production
Setting --production
runs your app exactly as it will be when deployed to the Layer0 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 layer0 run
.
For example:
ANGULAR_PROJECT=my-project layer0 run
Deploying requires an account on Layer0. Sign up here for free. Once you have an account, you can deploy to Layer0 by running the following in the root folder of your project:
layer0 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 layer0 deploy
.
For example:
ANGULAR_PROJECT=my-project layer0 deploy
See deploying for more information.