From your source code to worldwide availability, Azure Static Web Apps addresses the difficult difficulties. While you concentrate on designing your project, Azure Static Web Apps creates and hosts it using GitHub or Azure DevOps.
Libraries and frameworks such as Angular, React, Svelte, and Vue are often used to create static web apps. HTML, CSS, JavaScript, and picture assets are used to construct these apps. When employing a standard web server design, these files, together with any relevant API endpoints, are provided from a single server.
Static assets are isolated from a standard web server and instead served from points globally spread around the world with Azure Static Web Apps. Because files are physically closer to users, this distribution makes serving files significantly faster. Optional API endpoints are hosted utilizing a serverless architecture, which eliminates the requirement for a full back-end server entirely.
The Azure Static Web Apps approach is that you get exactly what you need, nothing more, nothing less.
You're a web developer who has developed a web app. A web app is often composed of HTML, JavaScript, or CSS files and can be developed manually or by using a framework.
Before you can deploy the app to Azure, you need to build it.
- Create a repository for your app on GitHub.
- Run the app locally and view it via a browser.
With the copy created locally, you’re all set to start working on your code and site. Now you’ll explore how to deploy your site to the cloud. You’ll use Azure Static Web Apps to host your site. Using Azure Static Web Apps will allow you to quickly post your web site to the world. You can explore more Azure Tips and Tricks: Static Web Apps to learn more.
Next, open Visual Studio Code then Open Folder in the editor.
- If Azure Static Webs exptension isn't installed then install it first. Inside Visual Studio Code, select the Azure logo in the Activity Bar to open the Azure extensions window.
Note: You are required to sign in to Azure and GitHub in Visual Studio Code to continue. If you are not already authenticated, the extension will prompt you to sign in to both services during the creation process.
- Under theStatic Web Apps label, select the plus sign.
- The command palette opens at the top of the editor and prompts you to select a subscription name.
Select your subscription and press Enter.
- Next, name your application.
- Select a region close to you.
Note: Azure Static Web Apps globally distributes your static assets. The region you select determines where your optional staging environments and API function app will be located.
- Select Custom
Enter the location for the application files and press Enter.
This app does not produce a build output. Ensure the build output location is empty and press Enter.
- Select “Open Actions in GitHub.” This will launch the GitHub Actions tab in your browser. You will see the workflow run as it is creating the app. When your webapp is built and deployed,you will see a check for the workflow run.
Once the app is created, navigate back to Visual Studio Code -a confirmation notification is shown there. The Visual Studio Code extension also reports the build status to you as the deployment is in progress–and will update you when your app is built and deployed.
Once the deployment is complete, you can navigate directly to your website.
- To view the website in the browser, right-click on the project in the Static Web Apps extension, and select Browse Site.
With your app deployed, Let's pushed your code to GitHub. You can push it in multiple ways. We do it with GitHub Desktop.
- Do changes in code if required and save your changes in VS Code.
- Navigate to GitHub Desktop and ensure that your Current Repository is opened (GitHub Desktop should reflect your recent changes like below)
- In the bottom left of GitHub Desktop, give your changes a title (like “Added My Name” and add a description.
- Select “Commit to Main”
- Now, push your changes to GitHub by selecting “Push Origin”
- Navigate to Actions in GitHub and view your web app’s build progress
- When the build is complete, refresh your app and the changes should be reflected
Note: If you want to host your app which is build using framework then follow this Publish an Angular, React, Svelte, or Vue JavaScript app with Azure Static Web Apps
Learn more ways of using Azure Static Web Apps: Azure Static Web Apps
Checkout Azure Static Web Apps documentation to see how it can help you out in your web development journey.