{"id":3608,"date":"2022-01-28T12:03:24","date_gmt":"2022-01-28T12:03:24","guid":{"rendered":"https:\/\/blog.osmosys.co\/?p=3608"},"modified":"2024-02-02T04:57:09","modified_gmt":"2024-02-02T04:57:09","slug":"automatic-deployment-using-github-actions","status":"publish","type":"post","link":"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/","title":{"rendered":"Automatic Deployment Using GitHub Actions"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div>\n<p>Software development is a continuous process, with regular code updates from time to time. Whether from adding new features, fixing bugs or just performing general chores like updating project dependencies now and then. One effective approach to easily push and preview these local development changes to a staging or production environment is to create a continuous integration and deployment workflow. In the next few steps, I will teach you how to automatically deploy your project from GitHub to cloud server using GitHub Actions.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_1 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\r\n<div class=\"ez-toc-title-container\">\r\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\r\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\r\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Prerequisites\" >Prerequisites:<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#GitHub_Account\" >GitHub Account<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Cloud_Server\" >Cloud Server<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Lets_go_through_some_fundamentals\" >Let&#8217;s go through some fundamentals<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#What_is_CICD\" >What is CICD?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Why_CICD\" >Why CICD?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#GitHub_Actions\" >GitHub Actions<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Lets_Start\" >Let&#8217;s Start<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Create_Project_Repo\" >Create Project Repo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Create_React_Project\" >Create React Project<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_1\" >Step 1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_2\" >Step 2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_3\" >Step 3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_4\" >Step 4<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Add_GitHub_Action_workflow\" >Add GitHub Action workflow<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_1-2\" >Step 1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_2-2\" >Step 2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_3-2\" >Step 3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_1-3\" >Step 1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_2-3\" >Step 2<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Setup_GitHub_Runner\" >Setup GitHub Runner<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_1-4\" >Step 1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_2-4\" >Step 2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_3-3\" >Step 3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_4-2\" >Step 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_5\" >Step 5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_6\" >Step 6<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_7\" >Step 7<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_8\" >Step 8<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Trigger_workflow\" >Trigger workflow<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_1-5\" >Step 1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_2-5\" >Step 2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_3-4\" >Step 3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_4-3\" >Step 4<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Nginx_Setup\" >Nginx Setup<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_1-6\" >Step 1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-37\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_2-6\" >Step 2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-38\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_3-5\" >Step 3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-39\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_4-4\" >Step 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-40\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Step_5-2\" >Step 5<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-41\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Keep_GitHub_Runner_running\" >Keep GitHub Runner running<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-42\" href=\"https:\/\/staging.osmosys.co\/uk\/automatic-deployment-using-github-actions\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\r\n<h2 class=\"wp-block-heading\" id=\"bkmrk-introduction\"><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span><strong><span style=\"color: #c20404\">Prerequisites:<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"GitHub_Account\"><\/span><strong><span style=\"color: #c20404\">GitHub Account<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In order to use GitHub actions you should have a GitHub account.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cloud_Server\"><\/span><strong><span style=\"color: #c20404\">Cloud Server<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You will also need a cloud server on which we will deploy the React app. For this tutorial we are going to a React app to keep the process of deployment simple.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bkmrk-introduction\"><span class=\"ez-toc-section\" id=\"Lets_go_through_some_fundamentals\"><\/span><strong><span style=\"color: #c20404\">Let&#8217;s go through some fundamentals<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_CICD\"><\/span><strong><span style=\"color: #c20404\">What is CICD?<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2021\/12\/1.png\" alt=\"\" class=\"wp-image-3551\" \/><\/figure>\n\n\n\n<p><br>CI and CD stand for continuous integration and continuous delivery\/continuous deployment. In very simple terms, CI is a modern software development practice in which incremental code changes are made frequently and reliably. Automated build-and-test steps triggered by CI ensure that code changes being merged into the repository are reliable. The code is then delivered quickly and seamlessly as a part of the CD process. In the software world, the CI\/CD pipeline refers to the automation that enables incremental code changes from developers&#8217; desktops to be delivered quickly and reliably to production.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_CICD\"><\/span><strong><span style=\"color: #c20404\">Why CICD?<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>CI\/CD allows organizations to ship software quickly and efficiently. CI\/CD facilitates an effective process for getting products to market faster than ever before, continuously delivering code into production, and ensuring an ongoing flow of new features and bug fixes via the most efficient delivery method.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"GitHub_Actions\"><\/span><strong><span style=\"color: #c20404\">GitHub Actions<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>GitHub Actions helps you automate tasks within your software development life cycle. GitHub Actions are event-driven, meaning that you can run a series of commands after a specified event has occurred. For\u0393\u00f6\u00bc\u251c\u00ed example, every time someone creates a pull request for a repository, you can automatically run a command that executes a software testing script.<br>What can you do with GitHub Actions? The possibilities are limitless, you could do anything from:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Handling CI and CD (Build, test, and deploy applications)<\/li>\n\n\n\n<li>Performance monitoring<\/li>\n\n\n\n<li>Twilio voice call or SMS alerts<\/li>\n<\/ul>\n\n\n\n<p>and <a href=\"https:\/\/github.com\/sdras\/awesome-actions\" target=\"_blank\" rel=\"noopener\">much more!<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bkmrk-introduction\"><span class=\"ez-toc-section\" id=\"Lets_Start\"><\/span><strong><span style=\"color: #c20404\">Let&#8217;s Start<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Our target here is to see how automatic deployment of a react project from GitHub to cloud server can be done using GitHub Actions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Project_Repo\"><\/span><strong><span style=\"color: #c20404\">Create Project Repo<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>For this project I used react-app-deployment-GitHub-action as the repo name.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2022\/01\/2022-01-10_16-03.png\" alt=\"\" class=\"wp-image-3672\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_React_Project\"><\/span><strong><span style=\"color: #c20404\">Create React Project<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1\"><\/span>Step 1<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Clone the empty repository.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">git clone git@GitHub.com:vishnu-kyatannawar\/react-app-deployment-GitHub-action.git<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2\"><\/span>Step 2<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Create the basic react app using create-react-app command.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npx create-react-app react-app-deployment-GitHub-action<\/pre>\n\n\n\n<p>Please checkout more about how to create a new react app <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3\"><\/span>Step 3<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Run the base app verify that there are no issues.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm start<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">    <img decoding=\"async\" class=\"size-full wp-image-3551 aligncenter\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2021\/12\/3.png\" alt=\"\"><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4\"><\/span>Step 4<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Commit and push the code to GitHub.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ If you did not clone before then you can set the remote git remote origin\n$ git remote add origin\ngit@GitHub.com:vishnu-kyatannawar\/react-app-deployment-GitHub-action.git\n$ git add .\n$ git push origin HEAD<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2021\/12\/4.png\" alt=\"\" class=\"wp-image-3551\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_GitHub_Action_workflow\"><\/span><strong><span style=\"color: #c20404\">Add GitHub Action workflow<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Now that we have the react app in the repository, we can go ahead and create the GitHub Action workflow for deployment.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1-2\"><\/span>Step 1<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2021\/12\/5.png\" alt=\"\" class=\"wp-image-3551\" \/><\/figure>\n\n\n\n<p>Go to Actions tab.<br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2-2\"><\/span>Step 2<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Select Node.js workflow.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3-2\"><\/span>Step 3<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2021\/12\/6.png\" alt=\"\" class=\"wp-image-3551\" \/><\/figure>\n\n\n\n<p>Create the workflow file.<br><\/p>\n\n\n\n<p>Let&#8217;s go back to our project file and make a small change to see how this workflow runs now.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1-3\"><\/span>Step 1<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Make a dummy update to base react app.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import logo from \".\/logo.svg\";\nimport \".\/App.css\";\nfunction App() {\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;header className=\"App-header\"&gt;\n        &lt;img src={logo} className=\"App-logo\" alt=\"logo\" \/&gt;\n        &lt;p&gt;\n          Edit &lt;code&gt;src\/App.js&lt;\/code&gt; and save to reload.\n        &lt;\/p&gt;\n        &lt;a\n          className=\"App-link\"\n          href=\"https:\/\/reactjs.org\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        &gt;\n          Learn React\n        &lt;\/a&gt;\n        &lt;h1&gt;Hello world!!! (testing auto deployment)&lt;\/h1&gt;\n      &lt;\/header&gt;\n    &lt;\/div&gt;\n  );\n}\nexport default App;\n<\/pre>\n\n\n\n<p>For now I added a <span class=\"lang:default decode:true crayon-inline \">h1<\/span>&nbsp;tag<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;h1&gt;Hello world!!! (testing auto deployment)&lt;\/h1&gt;<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2-3\"><\/span>Step 2<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Commit and push the code. Go to the Actions tab and you will find your workflow running<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2021\/12\/6.png\" alt=\"\" class=\"wp-image-3551\" \/><\/figure>\n\n\n\n<p><span style=\"font-size: revert;color: var(--wp--preset--color--contrast);font-family: var(--wp--preset--font-family--system-font);background-color: var(--wp--preset--color--base)\">Firstly rename the file as react-app-deployment.yml (you can use any filename).<\/span><span style=\"font-size: revert;background-color: var(--wp--preset--color--base);color: var(--wp--preset--color--contrast);font-family: var(--wp--preset--font-family--system-font)\">Edit the new file and paste the following content.<\/span><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># This workflow will do a clean install of node dependencies, cache\/restore them, build the source\ncode and run tests across different versions of node\n# For more information see:\nhttps:\/\/help.GitHub.com\/actions\/language-and-framework-guides\/using-nodejs-with-GitHub-actions\n\nname: React app deployment\n\non:\n push:\n  branches: [ master ]\n\njobs:\n build:\n  \n  runs-on: self-hosted\n\n  strategy:\n   matrix:\n    node-version: [16.x]\n\n  steps:\n  - uses: actions\/checkout@v2\n  - name: Use Node.js ${{ matrix.node-version }}\n    uses: actions\/setup-node@v2\n    \n    with:\n\t node-version: ${{ matrix.node-version }}\n     cache: 'npm'\n   - run: npm i\n   - run: npm run build --if-present\n   - run: npm tes\n\nCommit the file to the repo with a commit message.\n\nLet's break the above yml file and understand what we are trying to do.\n\nname: React app deployment\n\nThis is the name of the workflow.\n\non:\n push:\n  branches: [ master ]<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\"> <\/pre>\n\n\n\n<p>Here we are telling when this workflow should trigger. In my example I want this workflow to trigger whenever someone pushes code to the master branch.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">jobs:\n build:<\/pre>\n\n\n\n<p>A job is a set of steps that execute on the same runner. By default, a workflow with multiple jobs will run those jobs in parallel. You can also configure a workflow to run jobs sequentially. For example, a workflow can have two sequential jobs: build and test code, where the test job is dependent on the status of the build job. If the build job fails, the test job will not run.<\/p>\n\n\n\n<p>For our purpose we just want to do deployment so we just have 1 job.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">runs-on: self-hosted<\/pre>\n\n\n\n<p>Configures the job to run on a self hosted server. Since we want to deploy the project on our cloud server.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">strategy:\n   matrix:\n    node-version: [16.x]<\/pre>\n\n\n\n<p>For now we just want to use node version 16 for our react portal. But if you want to use GitHub actions for testing and you have a piece of code written in node and want to test it across different node versions then you can mention that in the node-version array.<\/p>\n\n\n\n<p>For our purpose we just want to deploy on a server so we will go ahead with Node v16.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">steps:\n<\/pre>\n\n\n\n<p>Groups together all the steps that run in the job. Each item nested under this section is a separate action or shell command.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">steps:\n  - uses: actions\/checkout@v2<\/pre>\n\n\n\n<p>The uses keyword tells the job to retrieve v2 of the community action named <span class=\"lang:default decode:true crayon-inline \">actions\/checkout@v2<\/span>. This is an action that checks out your repository and downloads it to the runner, allowing you to run actions against your code (such as testing tools). You must use the checkout action any time your workflow will run against the repository&#8217;s code or you are using an action defined in the repository.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">steps:\n uses: actions\/setup-node@v2\n  with:\n   node-version: ${{ matrix.node-version }}\n   cache: 'npm'<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">This step uses the actions\/setup-node@v2 action to install the specified version of the node software package on the runner, which gives you access to the npm command.<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">- run: npm i\n- run: npm run build --if-present\n- run: npm test<\/pre>\n\n\n\n<p>Finally we would like to install the node dependencies and build the production files. Optionally you can even run the test cases.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2021\/12\/7.png\" alt=\"\" class=\"wp-image-3551\" \/><\/figure>\n\n\n\n<p>Note that as soon as you commit the file the workflow will start. Since the workflow file is being pushed to the master branch.<\/p>\n\n\n\n<p>This workflow will fail since we did not yet tell GitHub which server to use to run the workflow on.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Setup_GitHub_Runner\"><\/span><strong><span style=\"color: #c20404\">Setup GitHub Runner<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>We have the workflow in place but we still did not specify which self hosted server to use. For this you need to add a GitHub Runner to the repo.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1-4\"><\/span>Step 1<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2021\/12\/8.png\" alt=\"\" class=\"wp-image-3551\" \/><\/figure>\n\n\n\n<p>Go to Settings tab.<br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2-4\"><\/span>Step 2<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2021\/12\/9.png\" alt=\"\" class=\"wp-image-3551\" \/><\/figure>\n\n\n\n<p>Go to Actions tab, and click on New self-hosted runner.<br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3-3\"><\/span>Step 3<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2021\/12\/10.png\" alt=\"\" class=\"wp-image-3551\" \/><\/figure>\n\n\n\n<p>Select the runner type. We are going to use a Linux server.<br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4-2\"><\/span>Step 4<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2021\/12\/9.5.png\" alt=\"\" class=\"wp-image-3551\" \/><\/figure>\n\n\n\n<p>You will see a bunch of commands which will guide you through the installation process.<br><br>Run the above download steps on your server.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_5\"><\/span>Step 5<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Please run all the commands in the same order in which they are shown to download.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_6\"><\/span>Step 6<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2021\/12\/11.png\" alt=\"\" class=\"wp-image-3551\" \/><\/figure>\n\n\n\n<p>When you configure your runner please fill in the details which are asked.<br><br>You can give a name to your runner and also give a name for the work folder.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_7\"><\/span>Step 7<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Finally run the run script.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.\/run.sh<\/pre>\n\n\n\n<p>This will start your runner and it will start listening for the workflow events.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_8\"><\/span>Step 8<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2021\/12\/12.png\" alt=\"\" class=\"wp-image-3551\" \/><\/figure>\n\n\n\n<p>Confirm that the runner is running.<br>Go to Settings &gt; Actions &gt; Runners<br><br>You will find that your runner is available and ready to take on any job.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Trigger_workflow\"><\/span><strong><span style=\"color: #c20404\">Trigger workflow<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Let&#8217;s go back to our project file and make a small change to see how this workflow runs now.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1-5\"><\/span>Step 1<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Make a dummy update to base react app.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import logo from \".\/logo.svg\";\nimport \".\/App.css\";\nfunction App() {\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;header className=\"App-header\"&gt;\n        &lt;img src={logo} className=\"App-logo\" alt=\"logo\" \/&gt;\n        &lt;p&gt;\n          Edit &lt;code&gt;src\/App.js&lt;\/code&gt; and save to reload.\n        &lt;\/p&gt;\n        &lt;a\n          className=\"App-link\"\n          href=\"https:\/\/reactjs.org\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        &gt;\n          Learn React\n        &lt;\/a&gt;\n        &lt;h1&gt;Hello world!!! (testing auto deployment)&lt;\/h1&gt;\n      &lt;\/header&gt;\n    &lt;\/div&gt;\n  );\n}\nexport default App;\n<\/pre>\n\n\n\n<p>For now I added a <span class=\"lang:default decode:true crayon-inline \">h1<\/span>&nbsp;tag<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;h1&gt;Hello world!!! (testing auto deployment)&lt;\/h1&gt;<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2-5\"><\/span>Step 2<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Commit and push the code. Go to the Actions tab and you will find your workflow running<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2021\/12\/13.png\" alt=\"\" class=\"wp-image-3551\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3-4\"><\/span>Step 3<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2021\/12\/14.png\" alt=\"\" class=\"wp-image-3551\" \/><\/figure>\n\n\n\n<p>You can click on the latest workflow and check the details of the build job.<br>You will find all the steps and it will also show you the time it took for each step.<br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4-3\"><\/span>Step 4<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Login to your server and you will find the build files inside actions-runner folder.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/home\/vishnu\/actions-runner\/_work\/react-app-deployment-GitHub-action\/react-app-deployment\n-GitHub-action\/build\n<\/pre>\n\n\n\n<p>Here all the build files are there which can be served via apache or nginx.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Nginx_Setup\"><\/span><strong><span style=\"color: #c20404\">Nginx Setup<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>I would like to keep this setup very simple.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1-6\"><\/span>Step 1<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Install nginx\n\nsudo apt update\nsudo apt install nginx<\/pre>\n\n\n\n<p> <\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2-6\"><\/span>Step 2<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Update the default nginx file<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">sudo nano \/etc\/nginx\/sites-available\/default<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3-5\"><\/span>Step 3<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Update the root path to your build file.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">root\n\/home\/vishnu\/actions-runner\/_work\/react-app-deployment-GitHub-action\/react-app-deployment\n-GitHub-action\/build;<\/pre>\n\n\n\n<p>Here I am telling nginx to load the files from my react project.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4-4\"><\/span>Step 4<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Restart <span class=\"lang:default decode:true crayon-inline \">nginx<\/span>&nbsp;service<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">sudo systemctl restart nginx<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_5-2\"><\/span>Step 5<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Open your server IP address and you will your react app.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.osmosys.co\/wp-content\/uploads\/2021\/12\/15.png\" alt=\"\" class=\"wp-image-3551\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Keep_GitHub_Runner_running\"><\/span><strong><span style=\"color: #c20404\">Keep GitHub Runner running<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You will find that after you close your server terminal where .\/run.sh was running, your GitHub runner stopped.<\/p>\n\n\n\n<p>What you can do instead is run the following command.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Stop the self-hosted runner application if it is currently running.<\/li>\n\n\n\n<li>Install the service with the following command:<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">sudo .\/svc.sh install<\/pre>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Start the service with the following command: <\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">sudo .\/svc.sh start <\/pre>\n\n\n\n<p>You can find more details about this&nbsp;<a href=\"https:\/\/docs.github.com\/en\/actions\/hosting-your-own-runners\/configuring-the-self-hosted-runner-application-as-a-service\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bkmrk-introduction\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong><span style=\"color: #c20404\">Conclusion<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Overall, I very much enjoy the experience of using GitHub Actions. I think it&#8217;ll be the future standard of CI\/CD platforms. Every time I use GitHub Actions I&#8217;m delighted by how fast I can create workflows to automate a manual task and find new patterns to use GitHub Actions.<\/p>\n\n\n\n<p><strong><span style=\"color: #c20404\">References<\/span><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/sdras\/awesome-actions\" target=\"_blank\" rel=\"noopener\">GitHub Awesome Actions<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/codememoirs.com\/automatic-deployment-digitalocean-github-actions\" target=\"_blank\" rel=\"noopener\">Automatic Deployment to DigitalOcean With GitHub Actions<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2020\/10\/handling-continuous-integration-delivery-github-actions\/\" target=\"_blank\" rel=\"noopener\">Handling Continuous Integration And Delivery With GitHub Actions<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/docs.github.com\/en\/actions\/learn-github-actions\/understanding-github-actions\" target=\"_blank\" rel=\"noopener\">Understanding GitHub Actions<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/docs.github.com\/en\/actions\/hosting-your-own-runners\/configuring-the-self-hosted-runner-application-as-a-service\" target=\"_blank\" rel=\"noopener\">Configuring the self-hosted runner application as a service<\/a><\/li>\n<\/ul>\n\n\n\n<p><strong><span style=\"color: #c20404\">Posted By:<\/span> <span style=\"color: #000080\">Vishnu Kyatannawar, Osmosee<\/span><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Software development is a continuous process, with regular code updates from time to time. Whether from adding new features, fixing bugs or just performing general chores like updating project dependencies now and then. One effective approach to easily push and preview these local development changes to a staging or production environment is to create a [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":4080,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","_lmt_disableupdate":"","_lmt_disable":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[39],"tags":[64],"class_list":["post-3608","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","tag-devops"],"modified_by":null,"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/staging.osmosys.co\/uk\/wp-json\/wp\/v2\/posts\/3608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.osmosys.co\/uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.osmosys.co\/uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.osmosys.co\/uk\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.osmosys.co\/uk\/wp-json\/wp\/v2\/comments?post=3608"}],"version-history":[{"count":0,"href":"https:\/\/staging.osmosys.co\/uk\/wp-json\/wp\/v2\/posts\/3608\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.osmosys.co\/uk\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/staging.osmosys.co\/uk\/wp-json\/wp\/v2\/media?parent=3608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.osmosys.co\/uk\/wp-json\/wp\/v2\/categories?post=3608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.osmosys.co\/uk\/wp-json\/wp\/v2\/tags?post=3608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}