Static web apps have grown in popularity for a wide range of applications, from basic marketing websites to large online applications. You can quickly deploy your React project as a static web app on Microsoft Azure by using a Linux virtual machine (VM) and the "Create Static Web App" option.
I'll walk you through the steps to construct a static web app on Azure utilizing a Linux VM and deploy your React app with "Create Static Web App" in this blog article.
Prerequisites
Before getting started, you'll need the following:
- An Azure account with a subscription that has permissions to create a Linux VM.
- A local copy of your React app.
Creating a Static Web App on Azure using react framework
A online presence is crucial for any organization or person in the modern digital world. While there are various ways to host a website, Azure provides a safe and dependable way to develop static web applications. Making a static web app is a simple procedure that can be finished in just a few steps thanks to Azure's user-friendly UI and comprehensive capabilities.
Step 1: Create a Resource Group
You must first create a resource group before you can construct a static web app in Azure. This is a container that houses all of the components of your web app, such as the app itself, the database, and the storage. Log into your Azure account and go to the Azure portal to create a resource group. On the left side of the screen, select the "Resource groups" tab, and then click the "Add" button.
Step 2: Create a Static Web App
After you've created a resource group, you'll need to construct a static web app. To achieve this, go to the Azure portal and click the "Create a resource" button. Then, look for "Static Web App." Choose the choice, then click "Create."
Step 3: Configure the Static Web App
To create a static web app in the Azure portal and connect it to GitHub, follow these steps:
Navigate to the App Services tab after signing in to your Azure portal account. To build a new web application, select the "+ Add" button.
Give your web app a name, choose your subscription, resource group, and app service plan, and then click "Create."
After you've finished building your web project, navigate to the Deployment Center and pick GitHub as your source control provider.
Choose your GitHub repository and provide Azure permission to access it.
- Select the React framework and indicate the location of your web app in the Build Details section.
In the "App location" section, paste the "react-scripts build" command from your package.json file under the "scripts" section. This command will create your React app.
Select "build" as the output location for your app in the "Output" section.
Click on "Save" then "Create + Review" to complete the setup.
Step 4: Deploy the Static Web App
Deploying the static web application is the last step. By doing this, Azure will automatically build and deploy the app after you send your code to the Azure repository. Your static web app will be up and available to the public once the deployment is finished.After you've used Create Static Web App to publish your app to Azure, follow these steps to find where it is:
- Navigate to your Static Web App resource in the Azure portal.
- Select the "Overview" tab.
- The "App location" field can be found in the "Deployment details" section. This will display the URL where your program is installed.
- To access your app in a new browser tab, click on the URL.
Below is an example of a deployed website:
Note:
Creating a static web app on Azure is a quick and easy procedure that can be finished in a few steps. You can develop a safe and trustworthy web presence with Azure's comprehensive features and simple interface, which will help you stand out in today's digital marketplace. So, why delay? Begin today and use Azure to take your digital presence to the next level.
Top comments (0)