{"id":226185,"date":"2019-08-22T15:36:49","date_gmt":"2019-08-22T22:36:49","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=226185"},"modified":"2019-08-26T12:33:11","modified_gmt":"2019-08-26T19:33:11","slug":"getting-started-with-github-actions-in-visual-studio","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/getting-started-with-github-actions-in-visual-studio\/","title":{"rendered":"Getting Started with GitHub Actions in Visual Studio"},"content":{"rendered":"<p>GitHub Actions uses a clean new syntax for expressing workflows based on YAML scripts\u2014so you can edit, reuse, share, and fork them like code. By including actions in your repositories, others would be able to easily test and build projects using the same actions used on the original projects.<\/p>\n<p>GitHub Actions allows you to build, test, and deploy applications in your language of choice including .NET, C\/C++, and Python. Feel free to explore all the <a href=\"https:\/\/help.github.com\/en\/articles\/about-continuous-integration#supported-languages\">supported languages<\/a>. This blog will go over the steps needed to add actions to a new Visual Studio project and automate deployment to a Linux environment using Visual Studio.<\/p>\n<p>As of the date of this post GitHub Actions is still a beta feature. In order for you to try it out, you will need to <a href=\"https:\/\/github.com\/features\/actions\/signup\/?account=\">sign up for the beta<\/a> first. Feel free to jump to step 4 if you already have a project published on GitHub.<\/p>\n<p style=\"padding-left: 40px;\">1- Start by creating any new Visual Studio project. For this blog, I am creating a new Flask Web Project. For more information on how to get started with Flask in Visual Studio take a look at this documentation: <a href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/python\/learn-flask-visual-studio-step-01-project-solution?view=vs-2019\">Get started with the Flask web framework in Visual Studio<\/a><\/p>\n<p><figure id=\"attachment_226188\" aria-labelledby=\"figcaption_attachment_226188\" class=\"wp-caption aligncenter\" ><img decoding=\"async\" class=\" wp-image-226188\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/2.png\" alt=\"New Flask Project\" width=\"621\" height=\"432\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/2.png 2064w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/2-300x209.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/2-768x534.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/2-1024x712.png 1024w\" sizes=\"(max-width: 621px) 100vw, 621px\" \/><figcaption id=\"figcaption_attachment_226188\" class=\"wp-caption-text\">New Flask Project<\/figcaption><\/figure><\/p>\n<p>&nbsp;<\/p>\n<p style=\"padding-left: 40px;\">2- Let\u2019s make sure that our app runs locally without any issues by selecting <strong>Debug &gt; Start Debugging (F5)<\/strong> or by using the <strong>Web Server<\/strong> button on the toolbar.<\/p>\n<p><img decoding=\"async\" class=\" wp-image-226190 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/6.png\" alt=\"\" width=\"701\" height=\"470\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/6.png 3104w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/6-300x201.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/6-768x514.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/6-1024x686.png 1024w\" sizes=\"(max-width: 701px) 100vw, 701px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"padding-left: 40px;\">3- Use the <strong>Add to Source Control<\/strong> option on the right-hand side of the status bar to <strong>Publish to GitHub<\/strong> as shown below.<\/p>\n<p><figure id=\"attachment_226191\" aria-labelledby=\"figcaption_attachment_226191\" class=\"wp-caption aligncenter\" ><img decoding=\"async\" class=\" wp-image-226191\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/TE.png\" alt=\"Team Explorer\" width=\"255\" height=\"347\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/TE.png 1016w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/TE-220x300.png 220w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/TE-768x1048.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/TE-751x1024.png 751w\" sizes=\"(max-width: 255px) 100vw, 255px\" \/><figcaption id=\"figcaption_attachment_226191\" class=\"wp-caption-text\">Team Explorer<\/figcaption><\/figure><\/p>\n<p>&nbsp;<\/p>\n<p style=\"padding-left: 40px;\">4- To add an actions script, create a new YAML file for your workflow in a new directory called <strong>.github\/workflows<\/strong> as shown below.<\/p>\n<p><figure id=\"attachment_226192\" aria-labelledby=\"figcaption_attachment_226192\" class=\"wp-caption aligncenter\" ><img decoding=\"async\" class=\" wp-image-226192\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/yml.png\" alt=\"Actions File\" width=\"723\" height=\"488\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/yml.png 2572w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/yml-300x202.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/yml-768x518.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/yml-1024x691.png 1024w\" sizes=\"(max-width: 723px) 100vw, 723px\" \/><figcaption id=\"figcaption_attachment_226192\" class=\"wp-caption-text\">Actions File<\/figcaption><\/figure><\/p>\n<p>&nbsp;<\/p>\n<p style=\"padding-left: 40px;\">For this tutorial I am using the following basic YAML script that allows us to deploy our Flask web app on the latest version of Ubuntu using four different Python versions. To learn more about writing GitHub Actions take a look at the following two links:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><a href=\"https:\/\/help.github.com\/en\/articles\/configuring-a-workflow\">Writing a GitHub Actions workflow file<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/actions\/starter-workflows\/tree\/master\/ci\">https:\/\/github.com\/actions\/starter-workflows\/tree\/master\/ci<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><code><\/code><\/p>\n<p><code><\/code><\/p>\n<pre class=\"lang:yaml decode:true\" title=\"Actions File - pythonpackage.yml\">name: Python package\r\n\r\non: [push]\r\n\r\njobs:\r\n  build:\r\n\r\n    runs-on: ubuntu-latest\r\n    strategy:\r\n      max-parallel: 4\r\n      matrix:\r\n        python-version: [2.7, 3.5, 3.6, 3.7]\r\n\r\n    steps:\r\n    - uses: actions\/checkout@v1\r\n    - name: Set up Python ${{ matrix.python-version }}\r\n      uses: actions\/setup-python@v1\r\n      with:\r\n        version: ${{ matrix.python-version }}\r\n    - name: Install dependencies\r\n      run: |\r\n        python -m pip install --upgrade pip\r\n        pip install -r requirements.txt<\/pre>\n<p><code><\/code><\/p>\n<p><code><\/code><\/p>\n<p>&nbsp;<\/p>\n<p style=\"padding-left: 40px;\">5- After saving your YAML script, make sure to <strong>commit<\/strong> and <strong>push<\/strong> your changes using Team Explorer\u2019s <u>Changes<\/u> and <u>Sync.<\/u> After that visit your GitHub repository by clicking on the URL that shows under the GitHub title as shown below.<\/p>\n<p><figure id=\"attachment_226194\" aria-labelledby=\"figcaption_attachment_226194\" class=\"wp-caption aligncenter\" ><img decoding=\"async\" class=\"wp-image-226194\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/TE2.png\" alt=\"Team Explorer - Home Page\" width=\"263\" height=\"353\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/TE2.png 1230w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/TE2-224x300.png 224w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/TE2-768x1030.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/TE2-763x1024.png 763w\" sizes=\"(max-width: 263px) 100vw, 263px\" \/><figcaption id=\"figcaption_attachment_226194\" class=\"wp-caption-text\">Team Explorer &#8211; Home Page<\/figcaption><\/figure><\/p>\n<p>&nbsp;<\/p>\n<p style=\"padding-left: 40px;\">6- On your GitHub repository click on <strong>Actions<\/strong> and select your <strong>workflow<\/strong>\u00a0to see more details about your workflow. As you can see below, our code runs successfully on the four different versions of Python.<\/p>\n<p><figure id=\"attachment_226195\" aria-labelledby=\"figcaption_attachment_226195\" class=\"wp-caption aligncenter\" ><img decoding=\"async\" class=\" wp-image-226195\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/GH1.png\" alt=\"GitHub Actions\" width=\"608\" height=\"331\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/GH1.png 2846w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/GH1-300x163.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/GH1-768x418.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/GH1-1024x557.png 1024w\" sizes=\"(max-width: 608px) 100vw, 608px\" \/><figcaption id=\"figcaption_attachment_226195\" class=\"wp-caption-text\">GitHub Actions<\/figcaption><\/figure><\/p>\n<p>&nbsp;<\/p>\n<p><figure id=\"attachment_226196\" aria-labelledby=\"figcaption_attachment_226196\" class=\"wp-caption aligncenter\" ><img decoding=\"async\" class=\" wp-image-226196\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/18.png\" alt=\"GitHub Actions Workflows\" width=\"613\" height=\"393\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/18.png 3102w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/18-300x192.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/18-768x493.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/18-1024x657.png 1024w\" sizes=\"(max-width: 613px) 100vw, 613px\" \/><figcaption id=\"figcaption_attachment_226196\" class=\"wp-caption-text\">GitHub Actions Workflows<\/figcaption><\/figure><\/p>\n<p>&nbsp;<\/p>\n<p style=\"padding-left: 40px;\">7- With GitHub Actions you can quickly build, test, and deploy code from GitHub repositories to the cloud with Azure. To do that lets create a new workflow by making an <strong>Azure_Deploy.yml<\/strong> file under the same directory <strong>.github\/workflows<\/strong> as shown below:<\/p>\n<pre class=\"lang:yaml decode:true \" title=\"Azure_Deploy.yml \">on: push\r\n\r\njobs:\r\n  build-and-deploy:\r\n    runs-on: ubuntu-latest\r\n    steps:\r\n    # checkout the repo\r\n    - uses: actions\/checkout@v1\r\n    \r\n    # install dependencies, build, and test\r\n    - name: Set up Python ${{ matrix.python-version }}\r\n      uses: actions\/setup-python@v1\r\n      with:\r\n        version: ${{ matrix.python-version }}\r\n    - name: Install dependencies\r\n      run: |\r\n        python -m pip install --upgrade pip\r\n        pip install -r requirements.txt\r\n        \r\n    # deploy web app using publish profile credentials\r\n    - uses: azure\/appservice-actions\/webapp@master\r\n      with: \r\n        app-name: MyFlaskApp\r\n        publish-profile: ${{ secrets.azureWebAppPublishProfile }}<\/pre>\n<p>&nbsp;<\/p>\n<p style=\"padding-left: 40px;\">8- Deploying to Azure requires an Azure account. If you don&#8217;t have one, you can get started today with a <a href=\"https:\/\/azure.com\/free\/open-source\">free Azure account!<\/a> And follow these steps to configure your deployment credentials:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Download the publish profile for the WebApp from the portal. For more information on how to do that take a look at <a href=\"https:\/\/docs.microsoft.com\/en-us\/visualstudio\/deployment\/tutorial-import-publish-settings-azure?view=vs-2019#create-the-publish-settings-file-in-azure-app-service\">Create the publish settings file in Azure App Service<\/a><\/li>\n<li>Define a new GitHub secret under your repository settings and paste the contents for the downloaded publish profile file into the secret&#8217;s value field. Make sure the title of your secret matches the publish-profile value on your YAML script. In my case it is <strong>azureWebAppPublishProfile<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p style=\"padding-left: 40px;\">9- The last step would be to <strong>commit<\/strong> and <strong>push<\/strong> your changes using Team Explorer\u2019s <u>Changes<\/u> and <u>Sync<\/u> sections as shown on step-5. After that, visit actions on your GitHub repository to make sure that all of your actions are working correctly.<\/p>\n<p><figure id=\"attachment_226198\" aria-labelledby=\"figcaption_attachment_226198\" class=\"wp-caption alignnone\" ><img decoding=\"async\" class=\"size-full wp-image-226198\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/Azure-Deploy.png\" alt=\"GitHub Deploy Actions Workflows\" width=\"2880\" height=\"1276\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/Azure-Deploy.png 2880w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/Azure-Deploy-300x133.png 300w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/Azure-Deploy-768x340.png 768w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2019\/08\/Azure-Deploy-1024x454.png 1024w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><figcaption id=\"figcaption_attachment_226198\" class=\"wp-caption-text\">GitHub Deploy Actions Workflows<\/figcaption><\/figure><\/p>\n<p>&nbsp;<\/p>\n<p>To learn more about deploying your GitHub code to the cloud take a look at the <a href=\"https:\/\/azure.microsoft.com\/en-us\/blog\/announcing-the-preview-of-azure-actions-for-github\/\">GitHub Actions for Azure blog<\/a> and try out the GitHub Actions for Azure. If you encounter a problem during the preview, please open an issue on the GitHub repository for the specific action.<\/p>\n<p>&nbsp;<\/p>\n<h3><strong>We Need Your Feedback!<\/strong><\/h3>\n<p>As always, let us know of any issues you run into by using the Report a Problem tool in Visual Studio. You can also head over to <a href=\"https:\/\/developercommunity.visualstudio.com\/spaces\/8\/index.html\">Visual Studio Developer Community<\/a> to track your issues, suggest a feature, ask questions, and find answers from others. We use your feedback to continue to improve Visual Studio 2019, so thank you again on behalf of our entire team.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This month, GitHub announced CI\/CD support for the GitHub Actions API. GitHub Actions now makes it easier to automate how you build, test, and deploy projects on any platform, including Linux, macOS, and Windows. This blog is an introduction to how you can quickly start utilizing GitHub Actions in Visual Studio.<\/p>\n","protected":false},"author":4322,"featured_media":226186,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[155],"tags":[431,4381],"class_list":["post-226185","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-studio","tag-git","tag-github"],"acf":[],"blog_post_summary":"<p>This month, GitHub announced CI\/CD support for the GitHub Actions API. GitHub Actions now makes it easier to automate how you build, test, and deploy projects on any platform, including Linux, macOS, and Windows. This blog is an introduction to how you can quickly start utilizing GitHub Actions in Visual Studio.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/226185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/4322"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=226185"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/226185\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/226186"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=226185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=226185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=226185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}