Angular applications are a bit different than ASP.NET Core applications in whatever needed to create a release and deploy it. Here are the steps you need to take to build the Everyday Market frontend so that we can later deploy it to Azure:
- Create a new build pipeline in your Azure DevOps project and click on the use the visual designer option.
- Select the source for your project files. The Everyday Market files can be found in https://github.com/azuker/frontend-web-dev.
- Add a new npm task to the agent tasks list:
The text in this screenshot is not important. The steps indicated in the screenshot will guide you on how to go about it.
- Select the npm task and change Command to install. Set the package.json path to the correct location:
- Add another npm task to install the Angular CLI. Change Command to custom and set the Command and arguments field to install -g @angular/cli:
- Add a Command Line Script task and write the script that will build the Angular, app ng build --prod --output-path="$(Build.ArtifactStagingDirectory)dist":
- Finally, add a Publish Artifact task. Set the Path to publish field to $(Build.ArtifactStagingDirectory)dist and the Artifact name to dist:
The text in this screenshot is not important. The purpose of this screenshot is to show you how to configure the Publish Artifact task.
- To enable Continuous Integration (CI) so that the build pipeline will run every time there's a change, go to the Triggers tab and check Enable continuous integration:
- Save the build pipeline.
Next, you will create a release pipeline to deploy to the Azure App Service you created.