Azure Web App Service and GitHub Actions (Video Tutorial)

%3CLINGO-SUB%20id%3D%22lingo-sub-1406280%22%20slang%3D%22en-US%22%3EAzure%20Web%20App%20Service%20and%20GitHub%20Actions%20(Video%20Tutorial)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1406280%22%20slang%3D%22en-US%22%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20last%20time%20we%20met%2C%20I%20spent%20some%20time%20showing%20you%20how%20to%20deploy%20an%20application%20using%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fazure%2Fdevops%2F%3Fview%3Dazure-devops%26amp%3BWT.mc_id%3Dblog-devto-jagord%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EAzure%20DevOps%3C%2FA%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Eand%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fazure%2Fapp-service%2Foverview%3FWT.mc_id%3Dblog-devto-jagord%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EAzure%20Web%20App%20Service%3C%2FA%3E.%20It's%20helpful%20to%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DEzdOp1jlN0A%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ewatch%20the%20last%20video%3C%2FA%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Eto%20get%20you%20some%20context%20on%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fazure.microsoft.com%2Fget-started%2Fweb-app%2F%3FWT.mc_id%3Dblog-devto-jagord%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehow%20to%20create%20a%20Web%20App%20Service%20in%20Azure%3C%2FA%3E.%20Today%20we'll%20add%20a%20new%20step%20by%20introducing%20the%20same%20process%20of%20deploying%20from%20the%20master%20branch%20of%20the%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fjaydestro%2Freact-clock-basic%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ereact-block-basic%20GitHub%20repository%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CDIV%20class%3D%22%20fluidvids%22%3E%3CIFRAME%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2Fhac7iI3qLAk%22%20width%3D%22710%22%20height%3D%22399%22%20allowfullscreen%3D%22allowfullscreen%22%20class%3D%22%20fluidvids-elem%22%20loading%3D%22lazy%22%20data-mce-fragment%3D%221%22%3E%3C%2FIFRAME%3E%3C%2FDIV%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId--1330398015%22%20id%3D%22toc-hId--1330395371%22%3E%3CA%20class%3D%22anchor%22%20href%3D%22https%3A%2F%2Fdev.to%2Fazure%2Fazure-web-app-service-and-github-actions-video-tutorial-2oc%23github-actions%22%20name%3D%22github-actions%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3E%3C%2FA%3EGitHub%20Actions%3C%2FH2%3E%0A%3CDIV%20id%3D%22tinyMceEditorjaydestro_0%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Ffeatures%2Factions%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EGitHub%20Actions%3C%2FA%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Eis%20an%20API%20for%20cause%20and%20effect%20on%20GitHub%3A%20orchestrate%20any%20workflow%2C%20based%20on%20any%20event%2C%20while%20GitHub%20manages%20the%20execution%2C%20provides%20rich%20feedback%20and%20secures%20every%20step%20along%20the%20way.%20With%20GitHub%20Actions%2C%20workflows%20and%20steps%20are%20just%20code%20in%20a%20repository%2C%20so%20you%20can%20create%2C%20share%2C%20reuse%2C%20and%20fork%20your%20software%20development%20practices.%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3EGet%20Fast%20CI%2FCD%20-%20Any%20language%20or%20platform.%3C%2FLI%3E%0A%3CLI%3EYAML%20builds%3C%2FLI%3E%0A%3CLI%3ELive%20logging%3C%2FLI%3E%0A%3CLI%3EWorkflows%20are%20reusable%20-%20like%20code!%20(Hello%20fellow%20StackOverflow%20Devs!)%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CH2%20id%3D%22toc-hId-1157114818%22%20id%3D%22toc-hId-1157117462%22%3E%3CA%20class%3D%22anchor%22%20href%3D%22https%3A%2F%2Fdev.to%2Fazure%2Fazure-web-app-service-and-github-actions-video-tutorial-2oc%23simple-stateless-react-app%22%20name%3D%22simple-stateless-react-app%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3E%3C%2FA%3ESimple%20stateless%20react%20app%3C%2FH2%3E%0A%3CP%3EI%20love%20to%20use%20this%20app%2C%20react-clock-basic%20to%20help%20people%20learn%20with.%20It's%20simple%20has%20minimal%20dependencies%20and%20is%20stateless.%20There's%20no%20data%20source%20to%20configure%20for%20this%2C%20we%20just%20simply%20want%20a%20clock%20to%20tell%20us%20the%20time.%3C%2FP%3E%0A%3CDIV%20class%3D%22ltag-github-readme-tag%22%3E%0A%3CDIV%20class%3D%22readme-overview%22%3E%0A%3CDIV%20id%3D%22tinyMceEditorjaydestro_1%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId--650339645%22%20id%3D%22toc-hId--650337001%22%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fjaydestro%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ejaydestro%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FA%3E%2F%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fjaydestro%2Freact-clock-basic%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ereact-clock-basic%3C%2FA%3E%3C%2FH2%3E%0A%3CH3%20id%3D%22toc-hId-40221829%22%20id%3D%22toc-hId-40224473%22%3EA%20basic%20clock%20that%20displays%20the%20current%20date%20and%20time%3C%2FH3%3E%0A%3C%2FDIV%3E%0A%3CDIV%20class%3D%22ltag-github-body%22%3E%0A%3CDIV%20id%3D%22readme%22%20class%3D%22md%22%20data-path%3D%22README.md%22%3E%0A%3CARTICLE%20class%3D%22markdown-body%20entry-content%22%3E%0A%3CH1%20id%3D%22toc-hId-1826670084%22%20id%3D%22toc-hId-1826672728%22%3EReact%20Clock%3C%2FH1%3E%0A%3CP%3EThis%20is%20a%20fork%20of%20this%20clock%20app%20that%20includes%20deployments%20for%20Azure%20Kubernetes%20Service%20and%20Docker.%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId-720280199%22%20id%3D%22toc-hId-720282843%22%3EApp%20Service%20Deployment%20Method%3A%3C%2FH3%3E%0A%3CP%3EIn%20Azure%20cloud%20shell%3A%3C%2FP%3E%0A%3CPRE%3E%3CCODE%3Egit%20clone%20https%3A%2F%2Fgithub.com%2Fjaydestro%2Freact-clock-basic.git%0Aaz%20group%20create%20%20--name%20%24NAME%20--location%20eastus%0Aaz%20network%20vnet%20create%20--name%20%24nameVNET%20--resource-group%20%24NAME%20%20--subnet-name%20default%0Aaz%20acr%20create%20--resource-group%20%24NAME--name%20%24NAMEacr%20--sku%20Basic%20--admin-enabled%20true%0A%0Aaz%20acr%20build%20%20--registry%20%24NAMEacr%20--image%20react-clock-basic%3Av1%20.%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3EGo%20to%20portal%20in%20Azure%2C%20create%20a%20new%20app%20service%2C%20select%20your%20resource%20group%2C%20pick%20linux%2C%20pick%20docker%20container%2C%20create%20a%20new%20service%20plan%2C%20select%20dev%2Ftest%20-%20click%20Docker%3C%2FP%3E%0A%3CP%3EDrop%20down%20source%2C%20select%20Azure%20Container%20Registry.%20Click%20the%20registry%20you%20created%20above%20then%20select%20the%20image%20name%20and%20version.%3C%2FP%3E%0A%3CP%3EClick%20Review%20and%20create.%3C%2FP%3E%0A%3CP%3EA%20basic%20clock%20that%20displays%20the%20current%20date%20and%20time%3C%2FP%3E%0A%3CP%3EGo%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3E%3CA%20href%3D%22http%3A%2F%2Freact-clock-basic.drminnaar.me%2F%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%20target%3D%22_blank%22%3Ehere%3C%2FA%3E%3C%2FSTRONG%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Efor%20live%20demo.%3C%2FP%3E%0A%3CP%3EComponent%20Diagram%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CDIV%20id%3D%22tinyMceEditorjaydestro_2%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThis%20project%20also%20demonstrates%3A%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3Ea%20typcial%20React%20project%20layout%20structure%3C%2FLI%3E%0A%3CLI%3Ebabel%20setup%20and%20configuration%3C%2FLI%3E%0A%3CLI%3Ewebpack%E2%80%A6%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3C%2FARTICLE%3E%0A%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3CDIV%20class%3D%22gh-btn-container%22%3E%3CA%20class%3D%22gh-btn%22%20href%3D%22https%3A%2F%2Fgithub.com%2Fjaydestro%2Freact-clock-basic%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EView%20on%20GitHub%3C%2FA%3E%3C%2FDIV%3E%0A%3C%2FDIV%3E%0A%3CH2%20id%3D%22toc-hId-709777095%22%20id%3D%22toc-hId-709779739%22%3E%3CA%20class%3D%22anchor%22%20href%3D%22https%3A%2F%2Fdev.to%2Fazure%2Fazure-web-app-service-and-github-actions-video-tutorial-2oc%23your-links-to-start%22%20name%3D%22your-links-to-start%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3E%3C%2FA%3EYour%20links%20to%20start%3C%2FH2%3E%0A%3CP%3EThe%20video%20should%20help%20provide%20you%20with%20a%20great%20start%20on%20using%20this%20service%20with%20your%20Azure%20Web%20App%20Service.%20Utilizing%20resources%20like%20GitHub%20actions%20can%20help%20you%20on%20your%20journey%20to%20becoming%20a%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Flearn%2Fcertifications%2Fdevops-engineer%3FWT.mc_id%3Dblog-devto-jagord%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EMicrosoft%20DevOps%20Certified%20Expert%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3EHere%20are%20links%20to%20documentation%20and%20guidance%20on%20the%20next%20steps%20including%20Microsoft%20Learn%2C%20Learn%20TV%2C%20and%20more!%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3EMicrosoft%20Learn%3A%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Flearn%2Fpaths%2Fazure-fundamentals%2F%3FWT.mc_id%3Dblog-devto-jagord%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EAzure%20Fundamentals%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3EMicrosoft%20Learn%3A%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Flearn%2Fmodules%2Fhost-a-web-app-with-azure-app-service%2F%3FWT.mc_id%3Dblog-devto-jagord%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EHost%20a%20web%20application%20with%20Azure%20App%20service%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3EMicrosoft%20Docs%3A%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fazure%2Fapp-service%2F%3FWT.mc_id%3Dblog-devto-jagord%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EApp%20Service%20Documentation%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fhelp.github.com%2Fen%2Factions%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EGitHub%20Actions%20Documentation%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fjaydestro%2Freact-clock-basic%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ereact-clock-basic%20demo%20app%3C%2FA%3E%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fazure.microsoft.com%2Ffree%2F%3FWT.mc_id%3Dblog-devto-jagord%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EGet%2012%20Months%20of%20free%20service%20and%20%24200%20for%20Microsoft%20Azure%3C%2FA%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CDIV%20class%3D%22%20fluidvids%22%3E%3CIFRAME%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FzcYqejz6Iig%22%20width%3D%22710%22%20height%3D%22399%22%20allowfullscreen%3D%22allowfullscreen%22%20class%3D%22%20fluidvids-elem%22%20loading%3D%22lazy%22%20data-mce-fragment%3D%221%22%3E%3C%2FIFRAME%3E%3C%2FDIV%3E%0A%3CP%3E%3CLI-WRAPPER%3E%3C%2FLI-WRAPPER%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIf%20you%20need%20more%20help%2C%20reach%20out%20in%20the%20comments%20or%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Ftwitter.com%2Fjaydestro%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Esend%20me%20a%20tweet%3C%2FA%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Eor%20find%20me%20on%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fwww.linkedin.com%2Fin%2Fjaygordon0042%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3ELinkedIn%3C%2FA%3E.%20Make%20sure%20you%20like%20and%20subscribe%20to%20my%20channel%20on%20YouTube%20and%20stay%20up%20to%20date%20on%20my%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fchannel%2FUCJb-wY2KO2soCZichdCNR1A%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Enew%20tutorials%3C%2FA%3E.%20See%20you%20next%20time%20as%20we%20learn%20Azure%20together.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1406280%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EApp%20Services%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EAzure%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EAzure%20Essentials%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EDeveloper%20Tools%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EDevOps%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EOpen%20at%20Microsoft%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Highlighted
Microsoft

 

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!

 

 

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.

0 Replies