{"id":3473,"date":"2021-10-07T13:16:08","date_gmt":"2021-10-07T13:16:08","guid":{"rendered":"https:\/\/dump.uatdrive.com\/en\/?p=123"},"modified":"2021-10-07T13:16:08","modified_gmt":"2021-10-07T13:16:08","slug":"setting-up-ci-cd-on-a-nextjs-application-to-netlify-using-github-actions","status":"publish","type":"post","link":"https:\/\/specialmansolution.com\/en-us\/nerd-blog\/setting-up-ci-cd-on-a-nextjs-application-to-netlify-using-github-actions\/","title":{"rendered":"Setting up CI\/CD on a NextJs Application To Netlify Using GitHub Actions"},"content":{"rendered":"\n

Github actions is an easy and user friendly Continuous integration and continuous delivery tool to make use of. <\/p>\n\n\n\n

The requirements for the setup are the NextJs application to be deployed, a netlify account and a github account.<\/p>\n\n\n\n

The purpose of integrating github actions with netlify is to run tests on the application before it is deployed on netlify.<\/p>\n\n\n\n

Creating a Project on Netlify<\/strong><\/p>\n\n\n\n

There are two ways to go about this, we can either make use of Netlify ClI or Netlify UI<\/p>\n\n\n\n

We are going to be making use of the UI<\/p>\n\n\n\n

  1. On the netlify home page, select create a new site<\/li>
  2. Select a repository of your choice, we are making use of Github<\/li>
  3. Select your NextJs a application from the repo<\/li>
  4. The last screen asks for details about where to create the site and how to build it.<\/li><\/ol>\n\n\n\n
    • Select the branch to deploy, i will be making use of the dev branch<\/li>
    • Set the build command to npm run build<\/li>
    • We can leave the publish directory to be empty<\/li>
    • Select \u201cDeploy Site\u201d<\/li><\/ul>\n\n\n\n

      In order to be give github actions access to the netlify account, we will require some credentials, NETLIFY_SITE_ID, NETLIFY_AUTH_TOKEN.<\/strong><\/p>\n\n\n\n

      To get the NETLIFY_SITE_ID<\/strong>, select the Site settings<\/strong> page and copy the API ID. <\/strong>Also to get the NETLIFY_AUTH_TOKEN<\/strong>, select profile page, click on Security<\/strong> then Applications<\/strong>, create a Personal access token<\/strong>.<\/p>\n\n\n\n

      The credentials that have been created can be saved in the Settings<\/strong> tab on your github repo under Secrets<\/strong> with any name of your choice. <\/p>\n\n\n\n

      Creating Our Workflow File<\/strong><\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      The workflow is triggered when there is a push to the dev branch.<\/p>\n\n\n\n

      The job is named deploy. <\/strong>The job runs on an ubuntu server.<\/p>\n\n\n\n

      The first action is actions\/checkout@v2. <\/strong>This action checks out the repository so that the workflow can access it.  For our job we make use of node version 14<\/p>\n\n\n\n

      The next stage is to install the dependencies and build our application. After the application has been successfully built, the tests are run.<\/p>\n\n\n\n

      The final stage is to deploy our application to netlify using a netlify hook<\/strong>.<\/p>\n\n\n\n

      The netlify hook<\/strong> will be used to send a post request and this can be gotten by going to site settings, select  build and deploy<\/strong> then select add build hooks<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"

      Github actions is an easy and user friendly Continuous integration and continuous delivery tool to make use of.  The requirements for the setup are the NextJs application to be deployed, a netlify account and a github account. The purpose of integrating github actions with netlify is to run tests on the application before it is […]<\/p>\n","protected":false},"author":1,"featured_media":3458,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11],"tags":[],"class_list":["post-3473","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nerd-blog"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/specialmansolution.com\/en-us\/wp-json\/wp\/v2\/posts\/3473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/specialmansolution.com\/en-us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/specialmansolution.com\/en-us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/specialmansolution.com\/en-us\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/specialmansolution.com\/en-us\/wp-json\/wp\/v2\/comments?post=3473"}],"version-history":[{"count":0,"href":"https:\/\/specialmansolution.com\/en-us\/wp-json\/wp\/v2\/posts\/3473\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/specialmansolution.com\/en-us\/wp-json\/wp\/v2\/media\/3458"}],"wp:attachment":[{"href":"https:\/\/specialmansolution.com\/en-us\/wp-json\/wp\/v2\/media?parent=3473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/specialmansolution.com\/en-us\/wp-json\/wp\/v2\/categories?post=3473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/specialmansolution.com\/en-us\/wp-json\/wp\/v2\/tags?post=3473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}