Deployment of Angular App to Azure with git

2018-08-29

This article is mostly a note for myself how to do things. It may be quickly outdated. I wrote a simple Pomodoro timer on Angular 6 and was guessing how to host it in Azure. Here are some very simple steps how to do it. Given: 1. I have a very simple standard Angular 6 application, created via Angular CLI 2. It's stored in the Git repository, hosted in Azure VS Team Projects 3. I have an Azure account (you can create a free one) 4. I don't see a simple tutorial on Azure portal :) Firstly, we need a deployment script. (How I did it - I downloaded sample from already created deployment, but here is a shortcut for you). You need 2 files in the root of the repository: .deployment
[config] command = deploy.cmd
deploy.cmd
xcopy %DEPLOYMENT_SOURCE%\dist\ %DEPLOYMENT_TARGET% /Y
So it simply copies the content of \dist\ to the wwwroot folder. Next step is to create a "deployment" branch - I called it production. In that branch go to .gitignore file and remove the line /dist Now you need to setup website in Azure: 1. Create an AppService (choose the name, all the other settings are ok) 2. Go to "Deployment options" 3. In "Configure", select Visual Studio Team Project 4. Select the name of the repository and a branch 5. Click OK Now deployment is done. For the next deployment you need: 1. Merge the latest changes to production branch 2. Run the build to compile the website in dist:
ng build --prod
3. Push to the repository
git add . git commit -m "deployment " git push
So simple. Next step will be to automate the build on Azure side. Stay tuned!

← Back to blog