How to build and deploy the Angular Server Side Rendering (SSR) build files to Azure Web App service thought the FileZilla ftp? – Angular

The Problem:

Unable to deploy Angular Server Side Rendering (SSR) build files to Azure Web App service using FileZilla. Tried various approaches, including deploying browser and server folders, content within browser and server folders, but facing errors such as ‘permission denied’ or ‘resource unavailable’. Need guidance on the correct deployment procedure for Angular SSR to Azure Web App service.

The Solutions:

Solution 1: Deploy via FileZilla FTP

To deploy your Angular SSR application to Azure App Service using FileZilla FTP:

1. Build your application using npm run build:ssr to generate the dist folder.
2. Connect to your Web App Service FTP using FileZilla and navigate to the wwwroot folder.
3. Upload the contents of the dist/browser folder (including the index.html file) to the wwwroot folder.
4. In the Azure App Service configuration, under Default Documents, add index.html as the default page.
5. Enable Application logging to capture any errors in the log stream.

Solution 2: Deploy via Azure Devops

Alternatively, you can deploy using Azure Devops:

1. Create a GitHub repository and push your code to it.
2. Use a YAML script to automate the build and deployment process, similar to the example provided.
3. Create a build pipeline in Azure Devops and trigger it when changes are made to your GitHub repository.