{"id":59999,"date":"2020-10-23T06:00:21","date_gmt":"2020-10-23T14:00:21","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/devops\/?p=59999"},"modified":"2020-10-29T10:46:37","modified_gmt":"2020-10-29T18:46:37","slug":"azure-web-app-service-and-github-actions-video-tutorial","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/devops\/azure-web-app-service-and-github-actions-video-tutorial\/","title":{"rendered":"Azure Web App Service and GitHub Actions (Video Tutorial)"},"content":{"rendered":"<p><a href=\"https:\/\/help.github.com\/articles\/about-github-actions\">GitHub Actions<\/a> enable developers to build automated software development lifecycle workflows. With <a href=\"https:\/\/docs.microsoft.com\/azure\/developer\/github\/github-actions?WT.mc_id=blog-azuredevops-jagord\">GitHub Actions for Azure<\/a> you can create workflows that you can set up in your repository to build, test, package, release and <a href=\"https:\/\/docs.microsoft.com\/azure\/developer\/github\/deploy-to-azure?WT.mc_id=blog-azuredevops-jagord\"><strong>deploy<\/strong> to Azure<\/a>.<\/p>\n<p>One of the great integrations between Azure and GitHub Actions is the ability to deploy your code from <a href=\"https:\/\/docs.microsoft.com\/azure\/app-service\/deploy-github-actions?tabs=applevel&amp;WT.mc_id=blog-azuredevops-jagord\">GitHub right to Azure Web App Service<\/a>. You can walk through the configuration of your <a href=\"https:\/\/docs.microsoft.com\/azure\/app-service\/deploy-continuous-deployment?WT.mc_id=blog-azuredevops-jagord\">continuous integration and continuous deployment<\/a> (CI\/CD) right in the Azure portal. You won&#8217;t need to write the <a href=\"https:\/\/docs.github.com\/en\/free-pro-team@latest\/actions\/quickstart\">YAML<\/a> to configure your workflow when using the <a href=\"https:\/\/docs.microsoft.com\/azure\/app-service\/deploy-github-actions?tabs=applevel&amp;WT.mc_id=blog-azuredevops-jagord#use-the-deployment-center\">Deployment Center in Azure Web App Service<\/a>.<\/p>\n<p>With <a href=\"https:\/\/docs.microsoft.com\/azure\/developer\/github\/github-actions?WT.mc_id=azuredevops-blog-jagord\">GitHub Actions for Azure<\/a>, you can create workflows in your GitHub repositories to build, test, package, and deploy your applications. I have provided you with a repository you can fork or clone with a basic React application. It&#8217;s a static site that you can deploy with either exported HTML or run with the <a href=\"https:\/\/docs.microsoft.com\/azure\/app-service\/quickstart-nodejs?pivots=platform-linux&amp;WT.mc_id=blog-azuredevops-jagord\">Node.js<\/a> server. Let&#8217;s get started, OK?<\/p>\n<p><center>\n  <iframe title=\"Azure Web App Service and GitHub Actions\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/hac7iI3qLAk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/center><\/p>\n<h2>GitHub Actions<\/h2>\n<p><center>\n  <a href=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/007S8ZIlgy1gezckrfkmej316s0m076t.jpg\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/007S8ZIlgy1gezckrfkmej316s0m076t-300x154.jpg\" alt=\"GitHub Actions\" width=\"300\" height=\"154\" class=\"size-medium wp-image-59995\" align=\"center\" srcset=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/007S8ZIlgy1gezckrfkmej316s0m076t-300x154.jpg 300w, https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/007S8ZIlgy1gezckrfkmej316s0m076t-1024x527.jpg 1024w, https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/007S8ZIlgy1gezckrfkmej316s0m076t-768x395.jpg 768w, https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/007S8ZIlgy1gezckrfkmej316s0m076t-1536x790.jpg 1536w, https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/007S8ZIlgy1gezckrfkmej316s0m076t.jpg 1540w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n<\/center><\/p>\n<p><a href=\"https:\/\/docs.microsoft.com\/azure\/developer\/github\/github-actions?WT.mc_id=azuredevops-blog-jagord\">GitHub Actions for Azure<\/a> 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. With Actions you get:<\/p>\n<ul>\n<li>Get Fast CI\/CD &#8211; Any language or platform.<\/li>\n<li>YAML builds<\/li>\n<li>Live logging<\/li>\n<li>Workflows are reusable &#8211; like code! (Hello fellow StackOverflow Devs!)<\/li>\n<\/ul>\n<h2>Stateless react app<\/h2>\n<p>I love to use this app, <a href=\"https:\/\/github.com\/jaydestro\/react-clock-basic\">react-clock-basic<\/a> to help people learn with. It has minimal dependencies and is stateless. There&#8217;s no data source to configure for this, we just want a clock to tell us the time.<\/p>\n<p><center>\n  <a href=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/34461456-35fcbde6-ee33-11e7-908e-bc7c74b8bbd2.png\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/34461456-35fcbde6-ee33-11e7-908e-bc7c74b8bbd2-300x150.png\" alt=\"react app react-clock-basic\" width=\"300\" height=\"150\" class=\"size-medium wp-image-59994\" align=\"center\" srcset=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/34461456-35fcbde6-ee33-11e7-908e-bc7c74b8bbd2-300x150.png 300w, https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/34461456-35fcbde6-ee33-11e7-908e-bc7c74b8bbd2-1024x513.png 1024w, https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/34461456-35fcbde6-ee33-11e7-908e-bc7c74b8bbd2-768x385.png 768w, https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2020\/10\/34461456-35fcbde6-ee33-11e7-908e-bc7c74b8bbd2.png 1026w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n<\/center><\/p>\n<h2>Your links to start<\/h2>\n<p>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 <a href=\"https:\/\/docs.microsoft.com\/learn\/certifications\/devops-engineer?WT.mc_id=blog-azuredevops-jagord\">Microsoft DevOps Certified Expert<\/a>.<\/p>\n<p>Here are links to documentation and guidance on the next steps including Microsoft Learn, Learn TV, and more!<\/p>\n<p>Microsoft Learn: <a href=\"https:\/\/docs.microsoft.com\/learn\/paths\/azure-fundamentals\/?WT.mc_id=blog-azuredevops-jagord\">Azure Fundamentals<\/a><br \/>\nMicrosoft Learn: <a href=\"https:\/\/docs.microsoft.com\/learn\/modules\/host-a-web-app-with-azure-app-service\/?WT.mc_id=blog-azuredevops-jagord\">Host a web application with Azure App service<\/a><br \/>\nMicrosoft Docs: <a href=\"https:\/\/docs.microsoft.com\/azure\/app-service\/?WT.mc_id=blog-azuredevops-jagord\">App Service Documentation<\/a><br \/>\n<a href=\"https:\/\/help.github.com\/en\/actions\">GitHub Actions Documentation<\/a><br \/>\n<a href=\"https:\/\/github.com\/jaydestro\/react-clock-basic\/\">react-clock-basic demo app<\/a><br \/>\n<a href=\"https:\/\/azure.microsoft.com\/free\/?WT.mc_id=blog-azuredevops-jagord\">Get 12 Months of free service and $200 for Microsoft Azure<\/a><\/p>\n<p>If you need more help, reach out in the comments or <a href=\"https:\/\/twitter.com\/jaydestro\">send me a tweet<\/a> or find me on <a href=\"https:\/\/www.linkedin.com\/in\/jaygordon0042\/\">LinkedIn<\/a>. Make sure you like and subscribe to my channel on YouTube and stay up to date on my <a href=\"https:\/\/www.youtube.com\/channel\/UCJb-wY2KO2soCZichdCNR1A\">new tutorials<\/a>. See you next time as we learn Azure together.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":39313,"featured_media":60000,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[226,225],"tags":[],"class_list":["post-59999","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ci","category-git"],"acf":[],"blog_post_summary":"<p>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.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts\/59999","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/users\/39313"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/comments?post=59999"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts\/59999\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/media\/60000"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/media?parent=59999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/categories?post=59999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/tags?post=59999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}