{"id":3140,"date":"2020-06-21T22:57:18","date_gmt":"2020-06-21T17:27:18","guid":{"rendered":"https:\/\/codingislove.com\/?p=3140"},"modified":"2020-07-22T17:38:59","modified_gmt":"2020-07-22T12:08:59","slug":"ci-setup-react-gitlab","status":"publish","type":"post","link":"https:\/\/codingislove.com\/ci-setup-react-gitlab\/","title":{"rendered":"Easy CI setup for react app using Gitlab in 2 steps"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/React-Gitlab-CI-1024x576.png\" alt=\"\" class=\"wp-image-3163\" srcset=\"https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/React-Gitlab-CI-1024x576.png 1024w, https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/React-Gitlab-CI-300x169.png 300w, https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/React-Gitlab-CI-768x432.png 768w, https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/React-Gitlab-CI.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>CI is the short form for Continuous Integration. It is also used along with the term CD which is Continuous delivery. CI, CD, CI\/CD. They are all pretty much the same. Let&#8217;s dive into CI setup for react<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">What does CI\/CD do?<\/h2>\n\n\n\n<p>CI\/CD is used to automate deployments of a project. It could be a website, webapp, backend or mobile app. You can use CI\/CD for any such deployments.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Does CI\/CD really help?<\/h2>\n\n\n\n<p>This is a question that beginners might have in their mind. Yes it helps a lot.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Automates deployments<\/li><li>Automates testing<\/li><li>Saves a lot of time<\/li><li>Reduces human error (For ex: incrementing build numbers)<\/li><li>Notify everyone especially testing team regarding the new build<\/li><\/ul>\n\n\n\n<p>Just a few benefits of CI\/CD but you will find more!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to setup CI for React app<\/h2>\n\n\n\n<p>Most of the react users use create-react-app to generate their react apps so I&#8217;ll explain how to setup CI for create-react-app<\/p>\n\n\n\n<p>create-react-app comes with web pack and optimized production build configuration. Running a single command will generate the build.<\/p>\n\n\n\n<p>The command to generate react build is <code>yarn build<\/code> if you&#8217;re using yarn or <code>npm run build<\/code> if you&#8217;re using <code>npm<\/code><\/p>\n\n\n\n<p>We&#8217;ll be using Gitlab CI to automate the react app deployment.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What is Gitlab?<\/h3>\n\n\n\n<p>Gitlab is just a version control system just like GitHub or bitbucket but Gitlab is free to use even for private repositories. I use GitLab for most of my projects.<\/p>\n\n\n\n<p>Gitlab also comes with a feature called Gitlab CI which can be used to setup deployments or run any tasks whenever you push some code to your repo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How does Gitlab CI\/CD work?<\/h3>\n\n\n\n<p>Gitlab CI is very simple to use. All you need to do is to use gitlab for you code base repo and one extra file named <code><a href=\"https:\/\/docs.gitlab.com\/ee\/ci\/yaml\/README.html\">.gitlab-ci.yml<\/a><\/code> which contains the configuration and script that need to run whenever you push code to your repo. Read more about gitlab ci here &#8211; <a href=\"https:\/\/docs.gitlab.com\/ee\/ci\/\">https:\/\/docs.gitlab.com\/ee\/ci\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Gitlab CI configuration for create-react-app<\/h2>\n\n\n\n<p>I&#8217;m assuming that you have already set up the react app on your server once in a folder called <code>var\/www\/my-project<\/code> so all the contents of the build folder generated from <code>yarn build<\/code> lies in this folder.<\/p>\n\n\n\n<p>There are only 2 steps required for setting up Gitlab CI for create-react-app<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Create a file called <code>.gitlab-ci.yml<\/code> in the root folder and paste the below configuration in it.<\/li><li>Setup environment variables to SSH into your server as mentioned in the below section.<\/li><\/ol>\n\n\n\n<p>Have a look the script that I use to automate deployments of my react app. This is the configuration that you should paste in <code>.gitlab-ci.yml<\/code><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimage: node:10\n\ncache:\n  paths:\n    - node_modules\/\n\nbefore_script:\n  - apt-get update -qq &amp;&amp; apt-get install -y -qq sshpass rsync\n\ndeploy_production:\n  only:\n    refs:\n      - master\n  stage: deploy\n  environment: Production\n  script:\n    - yarn install\n    - yarn build\n    - cd build\/\n    - ls\n    - sshpass -V\n    - export SSHPASS=$USER_PASS\n    - sshpass -e rsync -r --omit-dir-times -e &quot;ssh -o StrictHostKeyChecking=no&quot; . $USER_NAME@$SERVER_IP:\/var\/www\/my-project\n\n<\/pre><\/div>\n\n<!-- \/112371330\/post-banner -->\r\n<div class=\"ad-wrapper\">\r\n<div id='div-gpt-ad-1595500140430-0' style='width: 250px; height: 250px;'>\r\n  <script>\r\n    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1595500140430-0'); });\r\n  <\/script>\r\n<\/div>\r\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Configuration explanation<\/h2>\n\n\n\n<p>The above configuration tells GitLab to run the CI pipeline whenever something is pushed only to the master branch, Install sshpass and rsync before running the script, build the app using `yarn build` command then upload the content of build folder to our project folder in the server <\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimage: node:10\n<\/pre><\/div>\n\n\n<p><code>image: node 10<\/code> just tells which version of NodeJs to use. You can set it to latest stable NodeJs version or any specific version that you need. Above line tells GitLab to use NodeJs 10 version<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nbefore_script:\n  - apt-get update -qq &amp;amp;&amp;amp; apt-get install -y -qq sshpass rsync\n<\/pre><\/div>\n\n\n<p><code>before_script<\/code> is meant to run or install anything before the CI starts running the script. Currently, We are using <code>before_script<\/code> to install sshpass and rsync.<\/p>\n\n\n\n<p>We are using sshpass to log in securely to our server. (We are not revealing the server credentials in <code>.gitlab-ci.yml<\/code> We will be using GitLab&#8217;s environment variables to securely store our server credentials. More details mentioned below.<\/p>\n\n\n\n<p> We are using <code>rsync<\/code> to sync the build folder to our server. Basically, It uploads the build folder to our server<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\ndeploy_production:\n  only:\n    refs:\n      - master\n  stage: deploy\n<\/pre><\/div>\n\n\n<p><code>deploy_production<\/code> is the name of the stage. You can have multiple stages depending on your use case. For example, You can have build, test stages separately to build the code in one stage and test the code in one stage and finally deploy the code in another stage.<\/p>\n\n\n\n<p>Current example has only 1 stage named <code>deploy_production<\/code><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nstage: deploy\n<\/pre><\/div>\n\n\n<p><code>stage: deploy<\/code> tells GitLab that this is a stage of type deployment. There are 3 stage types in GitLab CI by default. They are test, build, and deploy. These types are required for GitLab CI to maintain the proper order of execution. <\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nscript:\n    - yarn install\n    - yarn build\n    - cd build\/\n    - ls\n    - sshpass -V\n    - export SSHPASS=$USER_PASS\n    - sshpass -e rsync -r --omit-dir-times -e &quot;ssh -o StrictHostKeyChecking=no&quot; . $USER_NAME@$SERVER_IP:\/var\/www\/my-project\n<\/pre><\/div>\n\n\n<p>Code inside the <code>script:<\/code> block is the actual CI script. <code>yarn install<\/code> to install dependencies, <code>yarn build<\/code> to build the app. cd into build folder, log the version of <code>sshpass<\/code><\/p>\n\n\n\n<p><code>export SSHPASS=$USER_PASS<\/code> is used to set the password for SSHing to our server. USER_PASS is an environment variable that we should set in gitlab settings. Setting the password in GitLab settings rather than in the script is to ensure security and no one with the access to code would be able to get the server credentials.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to set environment variables in GitLab<\/h2>\n\n\n\n<p>Go to your GitLab repo &gt; Settings &gt; CI\/CD<\/p>\n\n\n\n<p>Now go the variables section and enter your server IP and SSH credentials as shown in the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large myborder\"><img loading=\"lazy\" decoding=\"async\" width=\"993\" height=\"491\" src=\"https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/gitlab-env-variables.png\" alt=\"gitlab CI setup for react\" class=\"wp-image-3152\" srcset=\"https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/gitlab-env-variables.png 993w, https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/gitlab-env-variables-300x148.png 300w, https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/gitlab-env-variables-768x380.png 768w\" sizes=\"auto, (max-width: 993px) 100vw, 993px\" \/><\/figure>\n\n\n\n<p>We should setup 3 environment variables. <code>SERVER_IP<\/code> which is the IP address of your server. <code>USER_NAME<\/code> which is your server&#8217;s user name to SSH into and <code>USER_PASS<\/code> which is the password used to SSH to your server.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nsshpass -e rsync -r --omit-dir-times -e &quot;ssh -o StrictHostKeyChecking=no&quot; . $USER_NAME@$SERVER_IP:\/var\/www\/my-project\n<\/pre><\/div>\n\n\n<p>This is the line that will SSH into your server and upload the build folder. <code>$SERVER_IP<\/code> and <code>$USER_NAME<\/code> are pulled from GitLab&#8217;s environment variables which we set up in the above step.<\/p>\n\n\n<!-- \/112371330\/post-rectange -->\r\n<div class=\"ad-wrapper\">\r\n<div id='div-gpt-ad-1595415581471-0' style='width: 300px; height: 250px;'>\r\n  <script>\r\n    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1595415581471-0'); });\r\n  <\/script>\r\n<\/div>\r\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping up<\/h2>\n\n\n\n<p>I just gave a long detailed explanation but it is actually simple 2 steps of copy-pasting the config file and setting the environment variables in GitLab settings. After completing this setup, you don&#8217;t have to worry about manually deploying your app every time you make a change. Cheers!<\/p>\n\n\n\n<p>Read more <a href=\"https:\/\/codingislove.com\/tag\/react\/\">react articles here<\/a><\/p>\n\n\n\n<p>If you have any questions or feedback then do let me know in the comment section below.<\/p>\n\n\n<!-- \/112371330\/after-post -->\r\n<div class=\"ad-wrapper\">\r\n<div id='div-gpt-ad-1595272670647-0' style='width: 750px; height: 100px;'>\r\n  <script>\r\n    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1595272670647-0'); });\r\n  <\/script>\r\n<\/div>\r\n<\/div>\n<div style=\"margin-top: 15px; margin-bottom: 15px;\" class=\"sharethis-inline-share-buttons\" ><\/div>","protected":false},"excerpt":{"rendered":"<p>CI is the short form for Continuous Integration. It is also used along with the term CD which is Continuous delivery. CI, CD, CI\/CD. They&hellip; <\/p>\n","protected":false},"author":1,"featured_media":3195,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[3],"tags":[108,103],"class_list":["post-3140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-dev-ops","tag-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Easy CI setup for react app using Gitlab in 2 steps - Coding is Love<\/title>\n<meta name=\"description\" content=\"CI is the short form for Continuous Integration. Learn how to automate deployments of your react app with CI setup in 2 simple steps using Gitlab CI\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingislove.com\/ci-setup-react-gitlab\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Easy CI setup for react app using Gitlab in 2 steps - Coding is Love\" \/>\n<meta property=\"og:description\" content=\"CI is the short form for Continuous Integration. Learn how to automate deployments of your react app with CI setup in 2 simple steps using Gitlab CI\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingislove.com\/ci-setup-react-gitlab\/\" \/>\n<meta property=\"og:site_name\" content=\"Coding is Love\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/codingislove\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/ranjithkumar10\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-21T17:27:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-22T12:08:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/React-Gitlab-CI-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"768\" \/>\n\t<meta property=\"og:image:height\" content=\"432\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ranjith kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codingislove\" \/>\n<meta name=\"twitter:site\" content=\"@codingislove\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ranjith kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codingislove.com\/ci-setup-react-gitlab\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codingislove.com\/ci-setup-react-gitlab\/\"},\"author\":{\"name\":\"Ranjith kumar\",\"@id\":\"https:\/\/codingislove.com\/#\/schema\/person\/ecb142505163b016d59bfbe662af587e\"},\"headline\":\"Easy CI setup for react app using Gitlab in 2 steps\",\"datePublished\":\"2020-06-21T17:27:18+00:00\",\"dateModified\":\"2020-07-22T12:08:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codingislove.com\/ci-setup-react-gitlab\/\"},\"wordCount\":961,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\/\/codingislove.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codingislove.com\/ci-setup-react-gitlab\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/React-Gitlab-CI-1.png\",\"keywords\":[\"dev ops\",\"React\"],\"articleSection\":[\"Coding Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codingislove.com\/ci-setup-react-gitlab\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codingislove.com\/ci-setup-react-gitlab\/\",\"url\":\"https:\/\/codingislove.com\/ci-setup-react-gitlab\/\",\"name\":\"Easy CI setup for react app using Gitlab in 2 steps - Coding is Love\",\"isPartOf\":{\"@id\":\"https:\/\/codingislove.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codingislove.com\/ci-setup-react-gitlab\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codingislove.com\/ci-setup-react-gitlab\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/React-Gitlab-CI-1.png\",\"datePublished\":\"2020-06-21T17:27:18+00:00\",\"dateModified\":\"2020-07-22T12:08:59+00:00\",\"description\":\"CI is the short form for Continuous Integration. Learn how to automate deployments of your react app with CI setup in 2 simple steps using Gitlab CI\",\"breadcrumb\":{\"@id\":\"https:\/\/codingislove.com\/ci-setup-react-gitlab\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codingislove.com\/ci-setup-react-gitlab\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codingislove.com\/ci-setup-react-gitlab\/#primaryimage\",\"url\":\"https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/React-Gitlab-CI-1.png\",\"contentUrl\":\"https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/React-Gitlab-CI-1.png\",\"width\":768,\"height\":432},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codingislove.com\/ci-setup-react-gitlab\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Coding is Love\",\"item\":\"https:\/\/codingislove.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Coding Tutorials\",\"item\":\"https:\/\/codingislove.com\/category\/tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Easy CI setup for react app using Gitlab in 2 steps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codingislove.com\/#website\",\"url\":\"https:\/\/codingislove.com\/\",\"name\":\"Coding is Love\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/codingislove.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codingislove.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codingislove.com\/#organization\",\"name\":\"Coding is Love\",\"url\":\"https:\/\/codingislove.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codingislove.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/codingislove.com\/wp-content\/uploads\/2015\/12\/codinglovenew.png\",\"contentUrl\":\"https:\/\/codingislove.com\/wp-content\/uploads\/2015\/12\/codinglovenew.png\",\"width\":300,\"height\":225,\"caption\":\"Coding is Love\"},\"image\":{\"@id\":\"https:\/\/codingislove.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/facebook.com\/codingislove\/\",\"https:\/\/x.com\/codingislove\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codingislove.com\/#\/schema\/person\/ecb142505163b016d59bfbe662af587e\",\"name\":\"Ranjith kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codingislove.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f5486247269539c638227e6213187139cc7460eeb16d789fa757485f1d2b87f0?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f5486247269539c638227e6213187139cc7460eeb16d789fa757485f1d2b87f0?s=96&d=wavatar&r=g\",\"caption\":\"Ranjith kumar\"},\"description\":\"A CA- by education, self taught coder by passion, loves to explore new technologies and believes in learn by doing.\",\"sameAs\":[\"https:\/\/www.facebook.com\/ranjithkumar10\",\"https:\/\/www.instagram.com\/livin_on_d_edge\/\",\"https:\/\/www.linkedin.com\/in\/ranjithkumar10\",\"https:\/\/www.youtube.com\/c\/codingislove01\"],\"url\":\"https:\/\/codingislove.com\/author\/ranjithkumar10\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Easy CI setup for react app using Gitlab in 2 steps - Coding is Love","description":"CI is the short form for Continuous Integration. Learn how to automate deployments of your react app with CI setup in 2 simple steps using Gitlab CI","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingislove.com\/ci-setup-react-gitlab\/","og_locale":"en_US","og_type":"article","og_title":"Easy CI setup for react app using Gitlab in 2 steps - Coding is Love","og_description":"CI is the short form for Continuous Integration. Learn how to automate deployments of your react app with CI setup in 2 simple steps using Gitlab CI","og_url":"https:\/\/codingislove.com\/ci-setup-react-gitlab\/","og_site_name":"Coding is Love","article_publisher":"https:\/\/facebook.com\/codingislove\/","article_author":"https:\/\/www.facebook.com\/ranjithkumar10","article_published_time":"2020-06-21T17:27:18+00:00","article_modified_time":"2020-07-22T12:08:59+00:00","og_image":[{"width":768,"height":432,"url":"https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/React-Gitlab-CI-1.png","type":"image\/png"}],"author":"Ranjith kumar","twitter_card":"summary_large_image","twitter_creator":"@codingislove","twitter_site":"@codingislove","twitter_misc":{"Written by":"Ranjith kumar","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codingislove.com\/ci-setup-react-gitlab\/#article","isPartOf":{"@id":"https:\/\/codingislove.com\/ci-setup-react-gitlab\/"},"author":{"name":"Ranjith kumar","@id":"https:\/\/codingislove.com\/#\/schema\/person\/ecb142505163b016d59bfbe662af587e"},"headline":"Easy CI setup for react app using Gitlab in 2 steps","datePublished":"2020-06-21T17:27:18+00:00","dateModified":"2020-07-22T12:08:59+00:00","mainEntityOfPage":{"@id":"https:\/\/codingislove.com\/ci-setup-react-gitlab\/"},"wordCount":961,"commentCount":5,"publisher":{"@id":"https:\/\/codingislove.com\/#organization"},"image":{"@id":"https:\/\/codingislove.com\/ci-setup-react-gitlab\/#primaryimage"},"thumbnailUrl":"https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/React-Gitlab-CI-1.png","keywords":["dev ops","React"],"articleSection":["Coding Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codingislove.com\/ci-setup-react-gitlab\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codingislove.com\/ci-setup-react-gitlab\/","url":"https:\/\/codingislove.com\/ci-setup-react-gitlab\/","name":"Easy CI setup for react app using Gitlab in 2 steps - Coding is Love","isPartOf":{"@id":"https:\/\/codingislove.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codingislove.com\/ci-setup-react-gitlab\/#primaryimage"},"image":{"@id":"https:\/\/codingislove.com\/ci-setup-react-gitlab\/#primaryimage"},"thumbnailUrl":"https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/React-Gitlab-CI-1.png","datePublished":"2020-06-21T17:27:18+00:00","dateModified":"2020-07-22T12:08:59+00:00","description":"CI is the short form for Continuous Integration. Learn how to automate deployments of your react app with CI setup in 2 simple steps using Gitlab CI","breadcrumb":{"@id":"https:\/\/codingislove.com\/ci-setup-react-gitlab\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingislove.com\/ci-setup-react-gitlab\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingislove.com\/ci-setup-react-gitlab\/#primaryimage","url":"https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/React-Gitlab-CI-1.png","contentUrl":"https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/React-Gitlab-CI-1.png","width":768,"height":432},{"@type":"BreadcrumbList","@id":"https:\/\/codingislove.com\/ci-setup-react-gitlab\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Coding is Love","item":"https:\/\/codingislove.com\/"},{"@type":"ListItem","position":2,"name":"Coding Tutorials","item":"https:\/\/codingislove.com\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"Easy CI setup for react app using Gitlab in 2 steps"}]},{"@type":"WebSite","@id":"https:\/\/codingislove.com\/#website","url":"https:\/\/codingislove.com\/","name":"Coding is Love","description":"","publisher":{"@id":"https:\/\/codingislove.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingislove.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codingislove.com\/#organization","name":"Coding is Love","url":"https:\/\/codingislove.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingislove.com\/#\/schema\/logo\/image\/","url":"https:\/\/codingislove.com\/wp-content\/uploads\/2015\/12\/codinglovenew.png","contentUrl":"https:\/\/codingislove.com\/wp-content\/uploads\/2015\/12\/codinglovenew.png","width":300,"height":225,"caption":"Coding is Love"},"image":{"@id":"https:\/\/codingislove.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/codingislove\/","https:\/\/x.com\/codingislove"]},{"@type":"Person","@id":"https:\/\/codingislove.com\/#\/schema\/person\/ecb142505163b016d59bfbe662af587e","name":"Ranjith kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingislove.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f5486247269539c638227e6213187139cc7460eeb16d789fa757485f1d2b87f0?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f5486247269539c638227e6213187139cc7460eeb16d789fa757485f1d2b87f0?s=96&d=wavatar&r=g","caption":"Ranjith kumar"},"description":"A CA- by education, self taught coder by passion, loves to explore new technologies and believes in learn by doing.","sameAs":["https:\/\/www.facebook.com\/ranjithkumar10","https:\/\/www.instagram.com\/livin_on_d_edge\/","https:\/\/www.linkedin.com\/in\/ranjithkumar10","https:\/\/www.youtube.com\/c\/codingislove01"],"url":"https:\/\/codingislove.com\/author\/ranjithkumar10\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/codingislove.com\/wp-content\/uploads\/2020\/06\/React-Gitlab-CI-1.png","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/posts\/3140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/comments?post=3140"}],"version-history":[{"count":0,"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/posts\/3140\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/media\/3195"}],"wp:attachment":[{"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/media?parent=3140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/categories?post=3140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingislove.com\/wp-json\/wp\/v2\/tags?post=3140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}