DevShare.

Deploying a Website to Azure Static Web Apps

Cover Image for Deploying a Website to Azure Static Web Apps
Kanugu Rajesh
Kanugu Rajesh

Prerequisites:

1. Azure Account: Make sure you have an active Azure account. If not, you can create one here.

2. GitHub Repository: Your website's source code should be hosted on a GitHub repository.

3. Azure CLI: Install the Azure Command-Line Interface (CLI) if you haven't already. You can download it from here.

Steps:

1. Create a GitHub Repository: If you don't have a GitHub repository for your website, create one and push your website's source code to it.

2. Set Up Azure Static Web Apps: Go to the Azure Portal.

Click on Create a resource and search for Static Web Apps.

Click on Static Web Apps in the results and then click the Create button.

Fill in the required information, including your subscription, resource group, instance details, and build settings. Make sure to choose the GitHub repository that contains your website's source code.

Click Review + create and then Create to deploy the Static Web App.

3. Configure Build Settings: Azure Static Web Apps can automatically build and deploy your application. Ensure that the build settings are configured correctly. This usually involves specifying the build folder (e.g., dist or public) and the build script (e.g., npm install && npm run build for a Node.js app).

4. Review and Complete Deployment: Review your settings and click Review + create to ensure everything is correct. Click Create to start the deployment process.

5. Wait for Deployment: Azure will now deploy your Static Web App. This may take a few minutes. You can monitor the progress in the Azure Portal.

6. Access Your Website: Once the deployment is complete, go to the Static Web App resource in the Azure Portal. Navigate to the Settings tab and find the URL. This is the URL where your website is hosted.

7. Custom Domain (Optional): If you have a custom domain, you can configure it in the Custom domains section of your Static Web App in the Azure Portal.

Congratulations! Your website is now deployed to Azure Static Web Apps. Any changes you push to your GitHub repository will automatically trigger a new deployment, making the process seamless.