Deploy your SPA to Azure
In this post I want to share a simple tutorial on how to deploy your single page application into the Azure cloud.
Here is the initial setup:
I have a ASP.NET 4.6 Web API service which serves the data for SPA in another local Git repository
Now I want to deploy both to the Azure cloud, and make it easy to deploy changes in the future
We will deploy our application to Azure Cloud Services / Web application.
Go to Azure Portal then
App Services -> Addand follow the wizard to create your Web app. Here is mine:
Follow this guide to create a new Git repository and setup continuous deployment from this repository to Azure web application. You are good once you see this working (step 6):
Copy your SPA files into the root of the new Git repository, here is my repo after I did that: and push them to
azureremote. Now you should be able to browse to the web app and see your SPA screen, but with all calls to Web API failing.
Inside your new Git repository, create a sub-folder to host Web API services. My SPA expects them under
/apifolder, so that’s the folder name that I created:
Copy your binary compiled files of your Web API to
/apisub-folder. This includes the bin folder, config files, asax files etc - whatever you would need in your local IIS deployment. DO NOT copy the sln/csproj files, otherwise the Azure will also try to do the compilation himself and will change the root of your web application to the folder with csproj files. So, my
/apifolder looks like this:
Commit the changes and Git push to
azureremote. Once the files are deployed, your SPA app should be up and running. Well done!
You don’t want to copy the files manually all the time, so make a PowerShell script or gulp task to do that for you. Remember, your changes will be applied whenever you push a new version to
azureremote of your Git repo.