{"id":53914,"date":"2020-11-27T12:11:00","date_gmt":"2021-02-09T14:41:28","guid":{"rendered":"https:\/\/www.globallogic.com\/ua\/insights\/blogs\/ci-cd-%d0%b4%d0%bb%d1%8f-js-%d1%80%d0%be%d0%b7%d1%80%d0%be%d0%b1%d0%bd%d0%b8%d0%ba%d1%96%d0%b2-%d1%87%d0%b0%d1%81%d1%82%d0%b8%d0%bd%d0%b0-%d0%bf%d0%b5%d1%80%d1%88%d0%b0-%d1%82%d0%b5%d0%be%d1%80\/"},"modified":"2025-01-31T04:46:33","modified_gmt":"2025-01-31T04:46:33","slug":"ci-cd-for-js-devs-theory","status":"publish","type":"insightsection","link":"https:\/\/www.globallogic.com\/ua\/insights\/blogs\/ci-cd-for-js-devs-theory\/","title":{"rendered":"CI\/CD \u0434\u043b\u044f JS \u0440\u043e\u0437\u0440\u043e\u0431\u043d\u0438\u043a\u0456\u0432. \u0427\u0430\u0441\u0442\u0438\u043d\u0430 \u043f\u0435\u0440\u0448\u0430 &#8211; \u0442\u0435\u043e\u0440\u0456\u044f"},"content":{"rendered":"<div class=\"classic_editor_content\">\n<h6 style=\"text-align: right;\"><em><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Author: Inna Ivashchuk, Senior Software Engineer, Engineering, Consultant, GlobalLogic Ukraine<\/span><\/span><\/em><\/h6>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">In this column, I want to talk about automation (where would we go without it). Let&#8217;s try to improve the development process and the life of a JS developer and find out what are the advantages of CI\/CD practices, what is the difference between CI vs CD vs CD. And next week we&#8217;ll get down to the practical part and try to get <\/span><\/span><span style=\"font-weight: 400;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Travis CI up and running. So, let&#8217;s go!\u00a0<\/span><\/span><\/span><\/p>\n<h3 style=\"text-align: center;\"><span style=\"color: #ff6600;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">CI: What is it and why?<\/span><\/span><\/span><\/h3>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">I think you have repeatedly come across the term <\/span><\/span><strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Continuous integration (or CI for short)<\/span><\/span><\/strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> , but what exactly is meant by the use of CI?<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Today we will try to figure it out. Before continuing with CI\/CD practices, it is worth mentioning version control systems such as git, svn, mercurial and others. Most likely, most of you are part of a team, and in order to work comfortably, control the code of the application, which changes every day, we need a VCS tool that will help to synchronize the changes of several developers without problems.<\/span><\/span><\/p>\n<div class=\"img_container\">\n<p class=\"imgyoutube\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-50629\" src=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_99.png\" alt=\"\" width=\"600\" height=\"408\" srcset=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_99.png 932w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_99-300x204.png 300w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_99-768x522.png 768w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<\/div>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">To understand in more detail the interdependence between the version control system and the practice <\/span><\/span><strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">of Continuous integration<\/span><\/span><\/strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> , let&#8217;s look at the diagram above: we have a developer, a version control system, and of course AI. From this diagram, it follows that Continuous integration is a practice that allows you to run automatic checks, such as tests, during each change (new commit), creation of a pull\/merge request. If the tests were successful, the project build is started and, as a result, we get an artifact. In our case, the artifact can be, for example, a docker image, which we will use later, or it can be static files that we will immediately publish on Heroku, or on GitHub pages, or on surge, or on our own hosting (VPS ). This, in principle, is not important, because the configuration can be adjusted according to needs.<\/span><\/span><\/p>\n<p><strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Now let&#8217;s deal with the stages of CI:<\/span><\/span><\/strong><\/p>\n<ul>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Preparation. We configure the environment where our commands or scripts will run. Since we are talking about JS development now, we will have Node JS and we need to download and install all the NPM modules.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Code check. For this we can use ESLint, stylelint, or TSLint. It depends on the specifics of the project and on the language used.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Tests. They help to catch errors in the code much faster and earlier.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Project assembly (Build), provided that all previous phases were successful. The most popular tools for this are webpack, parcel, grunt and Gulp.<\/span><\/span><\/li>\n<\/ul>\n<p><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">What will help us in this? Of course,<\/span><\/span><\/p>\n<h3 style=\"text-align: center;\"><span style=\"color: #ff6600;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Useful tools<\/span><\/span><\/span><\/h3>\n<h4><strong><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/09\/GL_Icon_Chevron.svg\" alt=\"\" width=\"12\" height=\"17\" \/><\/strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Danger<\/span><\/span><\/h4>\n<div class=\"img_container\">\n<p class=\"imgyoutube\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-50632\" src=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_1.png\" alt=\"\" width=\"600\" height=\"336\" srcset=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_1.png 879w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_1-300x168.png 300w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_1-768x430.png 768w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<\/div>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">A useful tool that can be used with CI, and which will help to do an automatic code review. Before the code review is performed by another developer, you can run an automatic review, for example, with Danger JS.<\/span><\/span><\/p>\n<h4><strong><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/09\/GL_Icon_Chevron.svg\" alt=\"\" width=\"12\" height=\"17\" \/><\/strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">ReviewDog<\/span><\/span><\/h4>\n<div class=\"img_container\">\n<p class=\"imgyoutube\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-50633\" src=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_2.png\" alt=\"\" width=\"600\" height=\"464\" srcset=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_2.png 810w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_2-300x232.png 300w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_2-768x594.png 768w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<\/div>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">As an alternative to Danger, you can use ReviewDog and do a review and immediately add comments so that basic errors can be found in the phase when the pull request is just created and without involving other developers.<\/span><\/span><\/p>\n<h3 style=\"text-align: center;\"><span style=\"color: #ff6600;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">CD: what is it and why?<\/span><\/span><\/span><\/h3>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">CD has two meanings: Continuous Delivery and Continuous Deployment. For the first and second values, it looks like this:<\/span><\/span><\/p>\n<div class=\"img_container\">\n<p class=\"imgyoutube\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-50636\" src=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_3.png\" alt=\"\" width=\"600\" height=\"403\" srcset=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_3.png 919w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_3-300x202.png 300w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_3-768x516.png 768w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<\/div>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Earlier we mentioned about the artifact that was formed after successful checks and assembly of the project. So, if we have it, we can further perform certain manipulations with it, for example, publish it to a cloud service, where a team of testers can start testing, or (if everything works perfectly), immediately send our artifact to production.<\/span><\/span><\/p>\n<h3 style=\"text-align: center;\"><span style=\"color: #ff6600;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Difference between CI, CD and CD<\/span><\/span><\/span><\/h3>\n<div class=\"img_container\">\n<p class=\"imgyoutube\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-50634\" src=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_4.png\" alt=\"\" width=\"600\" height=\"366\" srcset=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_4.png 915w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_4-300x183.png 300w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_4-768x468.png 768w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<\/div>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">The Continuous Integration phase is relevant for both Continuous Delivery and Continuous Deployment. As you can see, the steps are exactly the same. Except that Continuous Delivery has one manual step. If we want to make a release and make the code available to end users, then here we have to do it manually. And if we have a fully configured and configured Continuous Deployment, this will all happen automatically. That is, the code will automatically go from the test environment to production, and immediately there you can do <\/span><\/span><strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">a smoke test<\/span><\/span><\/strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> &#8211; that is, a quick check whether everything works as expected.<\/span><\/span><\/p>\n<h3 style=\"text-align: center;\"><span style=\"color: #ff6600;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">CI\/CD services&lt;<\/span><\/span><\/span><\/h3>\n<p><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">The main CI\/CD tools are Jenkins, Travis CI, CircleCI, GitLab CI, GitLab Actions and Bamboo.<\/span><\/span><\/p>\n<div class=\"img_container\">\n<p class=\"imgyoutube\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-50639\" src=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_6.png\" alt=\"\" width=\"600\" height=\"428\" srcset=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_6.png 796w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_6-300x214.png 300w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_6-768x548.png 768w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<\/div>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">And now let&#8217;s take a closer look at the schematic image of GitLab CI.<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">We have a repository with code, where tracking of new merge requests or commits is configured, which in turn trigger checks, unit and build tests, then there is the code check phase, test environments (hosting, cloud services, etc.) and production.<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">It looks like this:<\/span><\/span><\/p>\n<div class=\"img_container\">\n<p class=\"imgyoutube\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-50638\" src=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_5-300x203.png\" alt=\"\" width=\"600\" height=\"406\" srcset=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_5-300x203.png 300w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_5.png 747w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<\/div>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">If we are talking about modern web development, then we have a version control system, there is a CI tool, there is Docker, an orchestrator (kubernetes), and our application is on one of the cloud services (Azure, Google Cloud, AWS), then our CI \/CD pipeline will look like this:<\/span><\/span><\/p>\n<div class=\"img_container\">\n<p class=\"imgyoutube\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-50641\" src=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_7.png\" alt=\"\" width=\"600\" height=\"345\" srcset=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_7.png 920w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_7-300x173.png 300w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/11\/Screenshot_7-768x442.png 768w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<\/div>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">As you can see, the steps will be a bit advanced compared to a simple implementation. That is, during the verification and assembly of the project, we will receive an artifact that will most likely be published on Docker Hub (public or internal), and only then everything will be sent to cloud services (deployment).<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">That&#8217;s it with the theoretical part. Next time, we will talk about the advantages of each solution, try to quickly configure and run Travis CI, and at the end, we will look at the novelty, which is <\/span><\/span><strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">GitHub Actions<\/span><\/span><\/strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> , which at the end of 2019 became available to everyone.<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Read the practical part about CI\/CD &#8211; <\/span><\/span><a href=\"https:\/\/www.globallogic.com\/ua\/insights\/blogs\/ci-cd-for-js-devs-part-two\/\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">at the link<\/span><\/span><\/a><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> .<\/span><\/span><\/p>\n<p><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Do not switch!<\/span><\/span><\/p>\n<p><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">If you want more useful materials &#8211; visit <\/span><\/span><a rel=\"external nofollow\" target=\"_blank\" href=\"https:\/\/www.facebook.com\/groups\/GLJavaScript\/\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">our JS Community<\/span><\/span><\/a><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> !<\/span><\/span><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0420\u043e\u0437\u0431\u0438\u0440\u0430\u0454\u043c\u043e\u0441\u044c \u0432 \u0447\u043e\u043c\u0443 \u043f\u043b\u044e\u0441\u0438 CI\/CD \u043f\u0440\u0430\u043a\u0442\u0438\u043a, \u044f\u043a\u0430 \u0440\u0456\u0437\u043d\u0438\u0446\u044f \u043c\u0456\u0436 CI vs CD vs CD<\/p>\n","protected":false},"author":12,"featured_media":50782,"parent":0,"menu_order":0,"template":"","insight":[41],"insight-subcats":[55,54],"insight-industry":[791],"insight-services":[809],"insight-partners":[],"class_list":["post-53914","insightsection","type-insightsection","status-publish","has-post-thumbnail","hentry","insight-blogs","insight-subcats-cloud","insight-subcats-devops-as-a-service","insight-industry-cross-industry","insight-services-software-product-engineering"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/insightsection\/53914","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/insightsection"}],"about":[{"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/types\/insightsection"}],"author":[{"embeddable":true,"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/users\/12"}],"version-history":[{"count":2,"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/insightsection\/53914\/revisions"}],"predecessor-version":[{"id":101623,"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/insightsection\/53914\/revisions\/101623"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/media\/50782"}],"wp:attachment":[{"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/media?parent=53914"}],"wp:term":[{"taxonomy":"insight","embeddable":true,"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/insight?post=53914"},{"taxonomy":"insight-subcats","embeddable":true,"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/insight-subcats?post=53914"},{"taxonomy":"insight-industry","embeddable":true,"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/insight-industry?post=53914"},{"taxonomy":"insight-services","embeddable":true,"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/insight-services?post=53914"},{"taxonomy":"insight-partners","embeddable":true,"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/insight-partners?post=53914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}