Deploy Angular 2 with Azure Webapp

Question

How can can I deploy an angular 2 webapp to azure? I guess I need some type of final compilation script.

Thanks in advance.

Answer 1

I managed to do it successfully without actually doing too much. Here are the steps :

1. I used GitHub as my source control. So, after taking a build of my Angular 4 project with the command ng build on the VS Code terminal, I pushed the entire dist folder (which is generated in the project directory/folder after you run ng build) also to GitHub. If somehow the IDE can't detect the dist folder as changes, you can also manually upload the folder into your GitHub repository. Use the Drag & Drop feature to upload the entire folder.
2. Now get a new App Service created in your Azure Subscription.

3. Go to Deployment Options and choose GitHub, provide credentials, and give the name of the repository you'd be using.

4. Go to Application Settings ,then to Virtual Applications and Directories, and change the root directory to site\wwwroot\dist

5. Now everything is set. Go back to Deployment Options again, and you shall see that a Build is in progress. After updating the code at GitHub repository through check-in, you could just Sync in order to take a fresh build. (P.S : In my case, the new build was automatically triggered after a new check-in to GitHub)

6. Bingo! Now you can access your website on azure. :D