- August 14, 2021
- Posted by: Aelius Venture
- Category: Cloud Consulting
- Create the application and the packages.
- Depending on the technology, create APIs.
- Create a server that will host the SPA packages as well as the APIs.
- Configure CORS or a reverse proxy if the static web app and APIs are on different servers.
- Set up SSL on the server.
- Create a unique domain for your website.
- Set a default fallback route so that the client-side routes of the static web app operate properly and you don’t receive a 404 error.
- Install the SPA packages on your server.
- Install API binaries or scripts on the server.
Is there anything more to consider? Absolutely! Listed below are a few more:
- Build a “development” environment that is identical to the production environment so that you can do testing and quality assurance before going live.
- Secure application routes by integrating user authentication and permission from a cloud provider or a third party.
- Create a build pipeline to automate the construction of the static web app and APIs.
- Use a CDN or several servers across the world to distribute the static web app.
- If the APIs of the program must manage varying loads, deploy them to a cluster of servers.
That’s a lot of effort! Isn’t it supposed to be simple to set up and operate a static web app? When you consider the development of a “staging” site, authentication/authorization, server setup, dealing with server-side and client-side routes, worldwide distribution of your app (if necessary), and other considerations, your head might start to spin.
Is there anything out there that can aid with the deployment of static web apps and their related APIs? You could always do it yourself by utilizing various cloud provider services, but you’d have to set up storage, web hosting, APIs, manage builds and deploys, SSL certs, custom domains, handle security, and a lot more. You may also utilize Netlify (https://netlify.com), Firebase (https://firebase.google.com), and a number of other services.
Thankfully, there’s a new child (or service) in the neighborhood. Azure Static Web Apps are a type of static web application that runs on the Azure platform. We currently utilize Azure for all of our deployments, thus this additional capability that Microsoft has added to Azure is really exciting to us.
Static Web Apps in Azure Devops Developer
At the Build 2020 conference, Microsoft revealed Azure Static Web Apps. They’ve since made the service “GA” (generally available), and it now supports two plans. The free plan allows you to get started for free, but the standard plan provides all of the free capabilities as well as the opportunity to modify functions like authentication and APIs.
You may get price information for the basic plan at https://azure.microsoft.com/en-us/pricing/details/app-service/static.
To get started with Azure Static Web Apps, follow these simple steps:
Github your app’s code.
- Log in to the Azure Portal, type “Static Web App” into the search box, then click the Create button.
- Complete the form, sign in to Github, then choose your repository and branch.
- Specify the locations of your app, APIs, and build output.
- Choose create and wait for the magic to unfold!
- Take a look at your static web application.
You’ll need an Azure account to complete these tasks. If you don’t already have one, go to https://azure.microsoft.com/free to sign up for a free trial account. Let’s take a look at each of these processes one by one.
Step 1: Publish Your App’s Source Code to Github
This first step is the simplest if you’re already using Github to save your work. If you’re new to Github, learn how to get started. The hard part is over once your static web app is on Github and ready to use!
Azure Functions (Node.js 12, .NET Core 3.1, or Python 3.8 are supported – check the docs for changes) may be used to host APIs in your project. Of course, Azure Static Web Apps may be used without using any APIs. Perhaps you have a completely static web application that doesn’t require data from a server. It’s also OK if your software has APIs but they’re hosted elsewhere. They can adapt to any situation.
You’re ready to establish a static web app service in Azure after your static web app and Azure Functions APIs are both on Github. Let’s have a look at it.
Step 2: Log in to the Azure Portal, Search for Static Web Apps, and Click Create
To find the Static Web Apps service, go to https://portal.azure.com, login, and utilize the search box at the top. To get to the information page for the service, click it. Take a few seconds to learn more about the service before clicking the Create button to get started.
Step 3: Complete the Form, Login to Github, and Choose a Repository
To pick your repository, fill out the Static Web Apps form and sign in to Github. The fields to complete are as follows:
- Choose a subscription to Azure.
- Create a Resource Group, or select one from the drop-down menu, which serves as a container for related resources like your new static web app functionality.
- Choose a name for your app.
- Choose a locale.
- Choose an SKU or a plan.
- Select your org, repo, and branch on Github.
After you’ve completed the form, click the Next: Build > button.
Step 4: Identify the Locations of Your Application, APIs, and Build Output
The next step is to identify the locations of your app in the repository, your Azure Functions APIs, and your build artifacts (bundles). You may even get a sneak peek at the workflow file that will be uploaded to your Github repository.
Step 5: Press the Create Button and Wait for the Magic to Begin!
It’s time to put your static web app online! Click the Create button after reviewing the summary information presented. While a Github Action generates your code and deploys it to Azure automatically, go grab a coffee, sit back, relax, and watch a (very brief) YouTube video.
Step 6: Take a Look at Your Static Web Apps
Click the Go to resource button after your static web app is finished.
Click the blue arrow above the site’s URL or the GitHub Action executes link to view the build-in action on Github.