Setting up the web app on Azure
Before we deploy our application to the cloud you first need to create the appropriate web app resource. A free plan is more than enough to test things out. Once you’ve created the web app, your next step would be to go to the overview page and take note of the FTP host and user name that will be used for deployment:
Next, navigate to the deployment credentials page and set your password:
Preparing your Angular CLI App for deployment
In your local work environment, make sure you have checked out the correct branch and have the appropriate commit ready for deployment. Next, run “ng build --prod” to produce a distributable build of your angular app ready for deployment:
This creates the “dist” folder in your local environment which we need to upload via FTP to our web app on Azure.
Adding a web.config file to the root of the “dist” directory
You need to configure the IIS instance running your app to not get confused by your SPA URLs. We do this with a rewrite rule which basically tells IIS to not interpret your URL structure as a file or directory request and instead pass it on to the angular router to handle.
You may also want to configure your IIS with appropriate mime types for .json or .woff file types if you use these. I’ve shown how to do that too in the sample above.
Upload and done!
Now you just need to upload everything in your dist folder to the Web App root at “/site/wwwroot” in the FTP. When the upload is complete you can test if everything works correctly at your site’s test URL: http://<your-name>.azurewebsites.net/. That’s it, you are done!
I hope you enjoyed this quick little guide and as always – Happy Coding!