Deploy an Angular 8 Universal App to an Azure App Service on Linux Running Node

Question

I've deployed standard Angular apps to Azure. I just add an index.js file using express to the root, zip the dist folder and use web deploy to release the app.

The output for an Angular Universal app is different; there are two folders, one for the browser and one for the server.

What I've tried so far:

• zipped the browser and server folders
• added an index.js that sets main.js as the starting point

This just outputs the content of main.js.

How can I get the app to run using SSR?

Answer 1

To get this working required changes to the Angular app and configuring the DevOps pipeline correctly.

The Angular app required 3 changes:

1. Enable SSR

ng add @nguniversal/express-engine

2. Add a wildcard route to app-routing.module.ts

const routes: Routes = [ { ... { path: "**", redirectTo: "" } ];

To ensure an App container is up and running, Azure will send requests to robots933456.txt. If that route isn’t handled the app won’t start.

3. Update server.ts for Production

Replace this line in server.ts:

const distFolder = join(process.cwd(), 'dist/YOUR_APP_NAME/browser');

With:

let distFolder = join(process.cwd(), "browser");
if (!existsSync(distFolder)) {
 distFolder = join(process.cwd(), "dist/YOUR_APP_NAME/browser");
}

Why? Because when you build an Angular Universal app two folders are output:

1. dist/YOUR_APP_NAME/browser
2. dist/YOUR_APP_NAME/server

When your app is deployed to Azure, the contents of the server folder will be at the root directory, so to make sure your local build and production build both work, the dist folder needs to be configured differently for each environment.

That’s it for the Angular changes, the rest of the work is done in Azure DevOps.

Build Pipeline steps:

1. npm step: install the Angular CLI on the build server

   install @angular/cli -g

2. npm step: install node packages

   npm install

3. Command line step: build the Angular app using SSR

   npm run build:ssr

4: Copy files step: copy the server folder contents to a new dist folder

Source:

dist/YOUR_APP_NAME/server

Target:

client/YOUR_APP_NAME/deploy-dist

5. Copy files step: copy the browser folder to the new dist folder

Source:

client/browser/dist/YOUR_APP_NAME/browser

Target:

client/browser/deploy-dist/browser

Steps 4 & 5 are required to have the correct folder structure.

6. Command line: rename main.js

   rename main.js index.js

index.js is required to get express running.

7. Archive files step: zip the deploy-dist folder

8. Publish Pipeline Artifacts step: publish the zip

Release Pipeline step: Deploy the artifact using Azure App Service deploy