To learn more about setting up and running front end with an simple web api in Azure. I started building a simple clint app in Angular, that calls a ping method in a web API using .net. Setting up the environment was not that hard as there are a lot of examples on how to do that, and I have done it before. Making the a proxy.config.json to proxy call to the local API etc.
But how to host it? I knew you could host it as a static page in a Storage account. Here is where my miss comprehension of CORS put me on the wrong path. I though the client, had to set Allowed Origins to the api. Not the other way around, where API server has to set Allowed Origins. If I had taken the time to read about CORS (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). I would only need to deploy my web api, set Allowed Origins to the static site url, and be done width my little test.
But no I was still in the shadow of my miss comprehension, and did not think it could work (or was more difficult) using the static site in a storage account (but why even have static site, Morten??). I then started looking at how to host angular web app using app service, and express as the hosting server.
I read though John Papa blog post on deploying a angular app to Azure (https://johnpapa.net/deploy-angular-to-azure-vsts-angular-cli/). This was just for testing, so I just looked at the github project on how to set it up, not the devops part (basically not the blog 😁). I got it working locally. I hade to set up the angular.json different, since the in the github solution it is using the older .angular-cli.json file.
I got it working locally, and deployed it to azure using Visual Studio code. But the app did not work, since the express part missed the node_module folder. The node_module is excluded when deploying. I could manually deploy it but did not feel like the right solution. After some more testing and reading I found that I was missing the .deployment (see under) file in the express part of the solution. Now the app worked.
.deployment
[config]
SCM_DO_BUILD_DURING_DEPLOYMENT=true
Hosting was working but the original problem of setting up CORS did not work. I tried to set it up in the app service, hmmm did not work. Then tried to set it up in the Express app, still not working. Ok I have missed something. Maybe reading a little more on how CORS really works 😉? After about two minutes of reading it was clear. All the express stuff, and trying to get that to work was unnecessary (except from learning about hosting and deploying using express). So then I just deployed the client to the storage account. Then set the static site to be trusted in the CORS settings in the API app service. Wow it worked.
So what did I learn (ones more)? How to set up an express server to host an Angular app in Azure (not ones more). But more importantly. Thinking that one have understood something based on loosely hearing about it, does not mean on really understands it. Before one starts a task or project. It is important to think about what is assumptions, and take some time reading about them. It can save a lot of time. This was just me learning stuff, but in a real project it can be very expensive when one just assume things.
Top comments (0)