The last time we met, I spent some time showing you how to deploy an application using Azure DevOps and Azure Web App Service. It's helpful to watch the last video to get you some context on how to create a Web App Service in Azure. Today we'll add a new step by introducing the same process of deploying from the master branch of the react-block-basic GitHub repository.
GitHub Actions
GitHub Actions is an API for cause and effect on GitHub: orchestrate any workflow, based on any event, while GitHub manages the execution, provides rich feedback and secures every step along the way. With GitHub Actions, workflows and steps are just code in a repository, so you can create, share, reuse, and fork your software development practices.
- Get Fast CI/CD - Any language or platform.
- YAML builds
- Live logging
- Workflows are reusable - like code! (Hello fellow StackOverflow Devs!)
Simple stateless react app
I love to use this app, react-clock-basic to help people learn with. It's simple has minimal dependencies and is stateless. There's no data source to configure for this, we just simply want a clock to tell us the time.
jaydestro
/
react-clock-basic
A basic clock that displays the current date and time
React Clock
This is a fork of this clock app that includes deployments for Azure Kubernetes Service and Docker.
App Service Deployment Method:
In Azure cloud shell:
git clone https://github.com/jaydestro/react-clock-basic.git
az group create --name $NAME --location eastus
az network vnet create --name $nameVNET --resource-group $NAME --subnet-name default
az acr create --resource-group $NAME--name $NAMEacr --sku Basic --admin-enabled true
az acr build --registry $NAMEacr --image react-clock-basic:v1 .
Go to portal in Azure, create a new app service, select your resource group, pick linux, pick docker container, create a new service plan, select dev/test - click Docker
Drop down source, select Azure Container Registry. Click the registry you created above then select the image name and version.
Click Review and create.
A basic clock that displays the current date and time
Go here for live demo.
Component Diagram
This project also demonstrates:
- a typcial React project layout structure
- babel setup and configuration
- webpack…
Your links to start
The video should help provide you with a great start on using this service with your Azure Web App Service. Utilizing resources like GitHub actions can help you on your journey to becoming a Microsoft DevOps Certified Expert.
Here are links to documentation and guidance on the next steps including Microsoft Learn, Learn TV, and more!
- Microsoft Learn: Azure Fundamentals
- Microsoft Learn: Host a web application with Azure App service
- Microsoft Docs: App Service Documentation
- GitHub Actions Documentation
- react-clock-basic demo app
- Get 12 Months of free service and $200 for Microsoft Azure
If you need more help, reach out in the comments or send me a tweet or find me on LinkedIn. Make sure you like and subscribe to my channel on YouTube and stay up to date on my new tutorials. See you next time as we learn Azure together.
Top comments (1)
The fact that this video is so simple and serves the purpose of allowing you to do something Azure documentation does not explain very well, makes it very underrated.
Thanks for that Jay