I am looking to leverage Azure Static app to host a angular based SPA application and for this application I have an REST API which is hosted on Azure App Service. Based on my analysis all the examples including Microsoft documentation, I see that Azure Function App is used to host the API which is not in my case.
Can anyone help me to get some examples which includes APIs hosted on Azure App Service or may be hosted on other cloud providers like AWS, GCP
You have a few options here, and choosing one is something you need to do yourself. In the end, regardless of where the API is running, it's just an API you want to connect to from a static web application. So if you setup CORS correctly, you can have the API be published anywhere (as long as it's internet-accessible) and connect to it from your frontend.
Here are some things to consider:
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS also relies on a mechanism by which browsers make a "preflight" request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.
More info: Cross-Origin Resource Sharing (CORS)
Setup CORS so your statically hosted website can access the API you have running elsewhere. When using Static Web Apps, this is managed for you.
You can serve static content (HTML, CSS, JavaScript, and image files) directly from a container in a general-purpose V2 or BlockBlobStorage account.
More info: Host a static website in Azure Storage
This is static website hosting from a storage account, which is different from Static Web Apps (see below). In this case you host the static assets for a website in a storage account. If you need anything like certificates, custom domains et cetera, you need to add additional Azure Resources like a CDN. When using Static Web Apps, this is managed for you.
With Static Web Apps, static assets are separated from a traditional web server and are instead served from points geographically distributed around the world. This distribution makes serving files much faster as files are physically closer to end users. In addition, API endpoints are hosted using a serverless architecture, which avoids the need for a full back-end server all together.
More info: What is Azure Static Web Apps?
You can, however, choose to only use the static assets-part of Azure Static Web Apps and have your API run somewhere else.
As far as a tutorial goes: you might find this one interesting: Host a RESTful API with CORS in Azure App Service
Azure App Service provides a highly scalable, self-patching web hosting service. In addition, App Service has built-in support for Cross-Origin Resource Sharing (CORS) for RESTful APIs. This tutorial shows how to deploy an ASP.NET Core API app to App Service with CORS support. You configure the app using command-line tools and deploy the app using Git.
Look this https://stackoverflow.com/a/70675328/6727650
I had an error in an AngularJS application, simple but using directives. The resolution was as follows.
Creating a file staticwebapp.config.json in the root of the repo and adding the following config worked:
{
"globalHeaders": {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, OPTIONS"
}
}
Publish your application and re-test. successfully solved! Below how my AngularJS is project to project
