Achraf Ben Alaya
No Result
View All Result
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
  • Cloud
  • Motivation
  • General Tips & Fix
  • Exam Preparation
    • AZ-104
    • AZ-400
  • About
    • Resume
SUBSCRIBE
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
  • Cloud
  • Motivation
  • General Tips & Fix
  • Exam Preparation
    • AZ-104
    • AZ-400
  • About
    • Resume
No Result
View All Result
Achraf Ben Alaya
No Result
View All Result
ADVERTISEMENT
Home Blog

How To Host a React Static Website on Azure

Deploy React application with Azure Static Web App Service and GitHub Actions

achraf by achraf
September 27, 2020
in Blog, Cloud
5 min read
0
How To Host a React Static Website on Azure
0
SHARES
805
VIEWS
Share on FacebookShare on Twitter

Code

For our demo We are going to build a simple basic react application , so you don’t have to know a lot about react , all we are going to build or use is a demo project .

If you want to read more about the Azure Static Web App Service follow this link .

Creating the react application

 

to build a react application we are going to use a couple of commands :

“Make sure you have a recent version of Node.js installed”

npx create-react-app my-app

now we need to go where we have created our app using

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

now , you are inside the react application , if you open the solution using visual studio code you should see this content :

Now if you run npm start in the project folder and open http://localhost:3000

 

Pushing code to GitHub

 

Now after building our project on our local computer ,we are now going to push it to github .

For that we need to create a new repository :

Now to push our solution to GitHub we are going to use a couple of commands :

git add -A
git commit -m "first commit"
git branch -M master
git remote add origin https://github.com/achrafbenalaya/ReactDemo.git
git push -u origin master

Run those commands one by one and your code will be pushed to GitHub as in picture below .

github

 

Create Static Web App

If you don’t have an azure account you can create your Azure free account today and 12 months of free services

from this link .

Now when you login to the portal you should look for static web app and clique on create and you will have the same as in the picture below :

azure

 

Now , you should fill the data with a resource group (you can create a new one by cliquing on Create new) .

You should also give your application a name and choose a region, next we are going to build a trust connection between azure and GitHub by  cliquing on Sign in with GitHub .

 

azure

A new fields will appear where you need to choose your organization , the repository that you have created for the application and the branch (in our case we only have one branch and its the Master ) .

After you fill those fields, a new field will appear were you have to choose the framework that you have worked with ,in our case it’s react

azure

azure

In our case , we don’t have an api  ,we are not going to consume and api we are just going to build a static web app, for that , be carful to to delete the ‘build’ for the app artifact location .

App artifact location is the path of your build output relative to your apps location. For example, setting a value of ‘build’ when your app location is set to ‘/app’ will cause the content at ‘/app/build’ to be served.

 

azure

Now when you are going to clique on ‘Create’ Azure will use GitHub actions to deploy your webpage. If you head over to the app overview tab you will notice a “Workflow File” link.

 

github

If you open the file, you will see it  contains the GitHub action config for CI/CD pipeline.

if you go and clique on Actions , you will see that the pipeline already started

github action

Now let’s check the service that we have created on azure :

azure

Now clique on the Url to navigate to our application and you will see that we have our app live !

azure

 

Now  ,all you have to do , is to pull the project since there is a new file published , do your modifications on your source code and then push it and GitHub action will do all for you and you will see your app published on azure .

You can watch the video below for the full Demo .

 

ShareTweet
Previous Post

Goodbye my lover Xamarin, Hello MAUI!

Next Post

Azure Static Web App Service

Related Posts

Switch to Azure Container Registry from Docker Hub
Azure

From Docker Hub, switch to Azure Container Registry & AKS

January 16, 2023
132
How to setup nginx reverse proxy && load balancer for aspnet core apps with Docker and azure kubernetes service (AKS)
Azure

How to configure an ingress controller using TLS/SSL for the Azure Kubernetes Service (AKS)

November 25, 2022
229
How to setup nginx reverse proxy && load balancer for aspnet core apps with Docker and azure kubernetes service (AKS)
Azure

How to setup nginx reverse proxy && load balancer for aspnet core apps with Docker and azure kubernetes service (AKS)

November 23, 2022
102
How to setup nginx reverse proxy for aspnet core apps with and without  Docker compose
Azure

How to setup nginx reverse proxy for aspnet core apps with and without Docker compose

November 23, 2022
153
Win free certifications at the Microsoft Build Cloud Skills Challenge | May 2022 🎁
Blog

Win free certifications at the Microsoft Build Cloud Skills Challenge | May 2022 🎁

May 28, 2022
107
Generating report for SSL Certificates for Websites with PowerShell
Azure

Generating report for SSL Certificates for Websites with PowerShell

April 10, 2022
386
Next Post
Azure Static Web App Service

Azure Static Web App Service

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Terraform

Certifications

Microsoft certified trainer (MCT)

Recommended

Setting up Serilog in ASP.NET Core

Setting up Serilog in ASP.NET Core

September 15, 2020
1.7k
Welcome to Azure Resource Mover service

Welcome to Azure Resource Mover service

February 2, 2021
149
Win a free certifications at the Microsoft spring skills challenge  🎁

Win a free certifications at the Microsoft spring skills challenge 🎁

March 20, 2022
381

How To host an Angular app on Azure

September 29, 2020
1k
Goodbye my lover Xamarin, Hello MAUI!

Goodbye my lover Xamarin, Hello MAUI!

September 25, 2020
439

How To host a Next.js app on Azure

October 5, 2020
1k
Facebook Twitter LinkedIn Youtube
Switch to Azure Container Registry from Docker Hub

From Docker Hub, switch to Azure Container Registry & AKS

January 16, 2023
How to setup nginx reverse proxy && load balancer for aspnet core apps with Docker and azure kubernetes service (AKS)

How to configure an ingress controller using TLS/SSL for the Azure Kubernetes Service (AKS)

November 25, 2022
How to setup nginx reverse proxy && load balancer for aspnet core apps with Docker and azure kubernetes service (AKS)

How to setup nginx reverse proxy && load balancer for aspnet core apps with Docker and azure kubernetes service (AKS)

November 23, 2022

Categories

  • Apps (1)
  • Azure (39)
  • blazor (2)
  • Blog (62)
  • c# (7)
  • Cloud (37)
  • Dapr (4)
  • docker (3)
  • Games (1)
  • General Tips & Fix (1)
  • Motivation (3)
  • motivation (2)
  • News (9)
  • Resume (1)
  • sql (4)
  • Tricks, Tips and Fixes (3)
  • xamarin (5)
No Result
View All Result
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
  • Cloud
  • Motivation
  • General Tips & Fix
  • Exam Preparation
    • AZ-104
    • AZ-400
  • About
    • Resume