Deployment of Angular App to Azure with git
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 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:
[config]
command = deploy.cmd
deploy.cmdxcopy %DEPLOYMENT_SOURCE%\dist\ %DEPLOYMENT_TARGET% /Y
So it simply copies the content of \dist\ng build --prod
3. Push to the repositorygit add .
git commit -m "deployment "
git push
So simple.
Next step will be to automate the build on Azure side. Stay tuned!