Deploy Angular App to Azure

Introduction

In this post, you will find step by step instructions to deploy an Angular app to Azure Web App without Linux.

Background

I wanted to deploy my Angular 7 app on Azure portal using the free trial account.

I could not find instructions that helped me to do it and I finally figured it out by trial and error!

Using the Tips

1. Build your Angular app in prod mode (no need to modify the base href):
   1. ng build --prod=true
   2. Create a web.config (if you were not using Visual Studio (not code)).
   3. Add the settings to the web.config that is listed at the end of this ordered list.
2. Copy all the files from the “dist” folder under your project to some place on your HDD.
3. On your GitHub, create a new repository and name it whatever you want.
4. Use bash.
5. Go to the folder where you have the built files from step 1.1 above (the folder you just copied the files to).
6. git init (if this is the first time)
7. git add . (this is a dot and not a mistake!)
8. git commit -m “some type of comment”
9. git remote add origin (your github url for this repository - if this is the first time)
10. git push -u origin master
11. Go to portal.azure.com (sign up for a free account if you don’t have one).
12. Create a new Web APP (not node.js or anything else).
13. Go to Deployment Center by clicking the link (which is on the left hand side on your app page).
14. Use your Github account.
15. Leave the default Kudu as is.
16. Point it to your github path where you have your deployment files.
17. Keep clicking next until you see the deployment has been setup.
18. Eventually, you should see Success in the STATUS column.
19. Go back to the Overview (first option you will see on your app’s dashboard).
20. Your app’s URL will be on the top right.
21. It might have https:// but if your app uses a REST service without https, then use your app without https:

<system.webServer> 
  <rewrite> 
    <rules> 
      <rule name="Angular Routes" stopProcessing="true"> 
        <match url=".*" /> 
          <conditions logicalGrouping="MatchAll"> 
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
          </conditions> 
        <action type="Rewrite" url="/" /> 
      </rule> 
    </rules> 
  </rewrite> 
</system.webServer> 

If you still could not bring up the site, then use the App Service Edition (Preview) that is under the Development Tools on your App page. Take a look at the base href value in the index.html and Rewrite url value in web.config. They both should be the same as a single forward slash.

Points of Interest

It took me a while to figure it out. You have to remember to verify that the url in the web.config file has the same value as in the base href value in index.html.

History

• 12^th March, 2019: Initial version