01.Aug.17

Vladimir Milev

Vladimir Milev

Deploying Angular 4 CLI apps to IIS on Azure

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:

upload-location

Next, navigate to the deployment credentials page and set your password:

upload-credentials

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:

ng-build

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!

Need consulting on this topic?

Yes No