Developer Best Practices – Structuring Your Repository for Static Web Apps for Azure DevOps Developer

Static web apps that solve the problem of delivering contemporary JavaScript apps.

What are the requirements for deploying a contemporary JavaScript web app? Is it possible that copying the files to the server would be difficult? At first, you may believe.

Modern JavaScript programs are more complex to deploy than just transferring files to a server. Consider a Single Page Application (a static web application) developed using React, Vue, Angular, or similar technology that interacts with an API, allows user logins and roles, and must secure particular server-side routes. At the very least, you’d need to perform the following to deploy the app:

  1. Create the application and the packages.
  2. Depending on the technology, create APIs.
  3. Create a server that will host the SPA packages as well as the APIs.
  4. Configure CORS or a reverse proxy if the static web app and APIs are on different servers.
  5. Set up SSL on the server.
  6. Create a unique domain for your website.
  7. 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.
  8. Install the SPA packages on your server.
  9. Install API binaries or scripts on the server.

Is there anything more to consider? Absolutely! Listed below are a few more:

  1. Build a “development” environment that is identical to the production environment so that you can do testing and quality assurance before going live.
  2. Secure application routes by integrating user authentication and permission from a cloud provider or a third party.
  3. Create a build pipeline to automate the construction of the static web app and APIs.
  4. Use a CDN or several servers across the world to distribute the static web app.
  5. 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.

  1. Log in to the Azure Portal, type “Static Web App” into the search box, then click the Create button.
  2. Complete the form, sign in to Github, then choose your repository and branch.
  3. Specify the locations of your app, APIs, and build output.
  4. Choose create and wait for the magic to unfold!
  5. 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.

If you’re new to Azure Functions and want to host APIs in your app, here’s a brief explanation of what they are and what you can do with them. Azure Functions provides a “serverless” environment for hosting a wide range of APIs that may deliver data over HTTP or connect with other Azure services. A JavaScript Azure Function consists of an index.js file with your code and a function. The inputs and outputs of the function are defined in a JSON file.

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.

Conclusion

However, delivering contemporary JavaScript apps may be difficult when all of the needed activities are considered, Azure static Web Apps considerably simplifies the process and makes it a piece of cake to deploy an app after it is created and configured.

Stay Connected!

Let's Build Your App

Book your FREE call with our technical consultant now.

Let's Schedule A Meeting

Totally enjoyed working with Karan and his team on this project. They brought my project to life from just an idea. Already working with them on a second app development project.

They come highly recommended by me.

Martins
Owner, Digital Babies

This is the best job I’ve hired Aelius Venture for. The team does quality work and highly recommends them and their capable team.

Martins
Owner, Digital Babies

We appreciate the help from Aelius Venture’s team with regards to our React Native project.

Oh D
Owner, Startup

Are you looking for Azure DevOps Developer?

This website uses cookies and asks your personal data to enhance your browsing experience.