{"id":53916,"date":"2020-12-04T12:12: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%b4%d1%80%d1%83%d0%b3%d0%b0-%d0%bf%d1%80%d0%b0\/"},"modified":"2025-01-31T04:45:02","modified_gmt":"2025-01-31T04:45:02","slug":"ci-cd-for-js-devs-part-two","status":"publish","type":"insightsection","link":"https:\/\/www.globallogic.com\/ua\/insights\/blogs\/ci-cd-for-js-devs-part-two\/","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 \u0434\u0440\u0443\u0433\u0430 \u2013 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430"},"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;\">We continue to understand SI\/CD to improve the lives of developers. The first part about the theoretical overview of the concept can be read <\/span><\/span><a rel=\"external nofollow\" target=\"_blank\" href=\"https:\/\/bit.ly\/blog_article33\"><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 align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">In this part, we&#8217;ll take a look at the main popular <\/span><\/span><a href=\"https:\/\/www.globallogic.com\/ua\/insights\/blogs\/ci-cd-for-js-devs-theory\/\" target=\"_blank\" rel=\"noopener\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">CI\/CD<\/span><\/span><\/a><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> tools you can use in development, try to quickly configure (and of course run) Travis CI, and take a look at GitHub Actions.<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">First, let&#8217;s recall <\/span><\/span><strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">the main practices<\/span><\/span><\/strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> that were analyzed last time and analyze the advantages of using each of them.<\/span><\/span><\/p>\n<h3 style=\"text-align: center;\"><span style=\"color: #ff6600;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Advantages of using CI\/CD practices<\/span><\/span><\/span><\/h3>\n<div class=\"img_container\">\n<p class=\"imgyoutube\"><strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">To begin with, let&#8217;s look at what we need to start using AI:<\/span><\/span><\/strong><\/p>\n<\/div>\n<ul>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Write automated tests.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">A server or service that will monitor the main repository and will run auto tests for each commit, which <\/span><\/span><span style=\"font-weight: 400;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">in turn<\/span><\/span><\/span><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> will help us see the status and validity of the code.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Merge the code as often as possible, at least once a day.<\/span><\/span><\/li>\n<\/ul>\n<p align=\"justify\"><strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">What will we get?<\/span><\/span><\/strong><\/p>\n<ul>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">The ability to catch most bugs, as tests that test core functionality inform developers that something has gone wrong.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Speeding up the release.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Much less switching between tasks for the developer.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">The ability to run a large number of tests on the server, which <\/span><\/span><span style=\"font-weight: 400;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">will work<\/span><\/span><\/span><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> in just a few minutes.<\/span><\/span><\/li>\n<\/ul>\n<p align=\"justify\"><strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">In order to start using CD practice, you need:<\/span><\/span><\/strong><\/p>\n<ul>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">High code coverage by tests.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Deployment should be automatic.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Using additional flags that will allow us to hide unfinished functionality (for example, Launch Darkly).<\/span><\/span><\/li>\n<\/ul>\n<p align=\"justify\"><strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">What will we get?<\/span><\/span><\/strong><\/p>\n<ul>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Web application deployment will become much easier.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">The ability to make a release much more often.<\/span><\/span><\/li>\n<\/ul>\n<p align=\"justify\"><strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">In order to <\/span><\/span><a href=\"https:\/\/www.globallogic.com\/ua\/insights\/blogs\/python-how-to-start\/\" target=\"_blank\" rel=\"noopener\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">start<\/span><\/span><\/a><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> using the CD (continuous deployment) practice, you need:<\/span><\/span><\/strong><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Different <\/span><\/span><\/span><span style=\"font-weight: 400;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">types of <\/span><\/span><\/span><span style=\"font-weight: 400;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">automated <\/span><\/span><\/span><span style=\"font-weight: 400;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">tests <\/span><\/span><\/span><span style=\"font-weight: 400;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">(integration, performance, acceptance, etc.) <\/span><\/span><\/span><span style=\"font-weight: 400;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">, written not only by developers, but also by <\/span><\/span><a href=\"https:\/\/www.globallogic.com\/ua\/insights\/blogs\/qa-how-to-start\/\" target=\"_blank\" rel=\"noopener\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">QA<\/span><\/span><\/a><\/span><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> .<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Documentation to keep up to date.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Additional flags to help hide unfinished parts that are currently under development.<\/span><\/span><\/li>\n<\/ul>\n<p align=\"justify\"><strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">What will it give us?<\/span><\/span><\/strong><\/p>\n<ul>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Fully automated release.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">There is no need to do a code freeze, due to the fact that the release is being prepared for a long time.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">No risks, because everything is thought out, configured and configured.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Satisfied users who see improvements every week or even every day.<\/span><\/span><\/li>\n<\/ul>\n<h3 style=\"text-align: center;\"><span style=\"color: #ff6600;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Easy start with Travis CI<\/span><\/span><\/span><\/h3>\n<div class=\"img_container\">\n<p class=\"imgyoutube\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-50919\" src=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/12\/image.png\" alt=\"\" width=\"550\" height=\"236\" srcset=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/12\/image.png 773w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/12\/image-300x129.png 300w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/12\/image-768x330.png 768w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/p>\n<\/div>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">And now it&#8217;s time to try one of the tools, namely <\/span><\/span><a rel=\"external nofollow\" target=\"_blank\" href=\"https:\/\/travis-ci.com\/\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Travis CI<\/span><\/span><\/a><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> . In order to get started, we need:<\/span><\/span><\/p>\n<ul>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Go to <\/span><\/span><a rel=\"external nofollow\" target=\"_blank\" href=\"https:\/\/travis-ci.com\/\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">travic-ci.com<\/span><\/span><\/a><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> and log in using your GitHub account<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Confirm authorization at <\/span><\/span><a rel=\"external nofollow\" target=\"_blank\" href=\"https:\/\/travis-ci.com\/\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">travis-ci.com<\/span><\/span><\/a><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> , after which you will be redirected to GitHub.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Go through a few simple steps and choose the repository to which we want to add Travis tracking.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Add the travis.yml file to the selected repository, in which we will write literally a few lines and thus start the CI operation.<\/span><\/span><\/li>\n<\/ul>\n<p><strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">And now to the code!<\/span><\/span><\/strong><\/p>\n<ul>\n<li><a rel=\"external nofollow\" target=\"_blank\" href=\"https:\/\/youtu.be\/N2LBMZ-ZBgs\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Example one<\/span><\/span><\/a><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> .<\/span><\/span><\/li>\n<li><a rel=\"external nofollow\" target=\"_blank\" href=\"https:\/\/youtu.be\/GpAptEZ6pE0\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Example two.\u00a0<\/span><\/span><\/a><\/li>\n<\/ul>\n<h3 style=\"text-align: center;\"><span style=\"color: #ff6600;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">GitHub Actions: Why you should pay attention to them<\/span><\/span><\/span><\/h3>\n<div class=\"img_container\">\n<p class=\"imgyoutube\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-50922\" src=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/12\/Screenshot_8-300x206.png\" alt=\"\" width=\"550\" height=\"377\" srcset=\"https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/12\/Screenshot_8-300x206.png 300w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/12\/Screenshot_8-768x526.png 768w, https:\/\/www.globallogic.com\/ua\/wp-content\/uploads\/sites\/6\/2020\/12\/Screenshot_8.png 775w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/p>\n<\/div>\n<p><strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">GitHub Actions are definitely worth your attention because they:<\/span><\/span><\/strong><\/p>\n<ul>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Built in GitHub, so integration is extremely fast<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Allow multi-container <\/span><\/span><a href=\"https:\/\/www.globallogic.com\/ua\/insights\/blogs\/qa-automation-2\/\" target=\"_blank\" rel=\"noopener\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">testing<\/span><\/span><\/a><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\"> . GitHub has many different templates for all types of Continuous Integration<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Allows you to create your own actions and publish them on GitHub Marketplace<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Absolutely free for open source repositories<\/span><\/span><\/li>\n<\/ul>\n<p><strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Key concepts of GitHub Actions:<\/span><\/span><\/strong><\/p>\n<ul>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Actions are the smallest particles of the described behavior.<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Events that we can bind to, such as push, pull request, and perform certain tasks<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Runners<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Job<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Steps<\/span><\/span><\/li>\n<li><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Workflow is directly our file, which describes step-by-step steps that contain actions, job and steps.<\/span><\/span><\/li>\n<\/ul>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Here&#8217;s what it takes to connect GitHub Actions to a repository: <\/span><\/span><a rel=\"external nofollow\" target=\"_blank\" href=\"https:\/\/youtu.be\/TVgwrGslwXg\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">a short video tutorial.\u00a0<\/span><\/span><\/a><\/p>\n<h3 style=\"text-align: center;\"><span style=\"color: #ff6600;\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Conclusions<\/span><\/span><\/span><\/h3>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Returning to the title of the article, it&#8217;s time to answer the question: <\/span><\/span><strong><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">CI\/CD for JS &#8211; is it necessary or not?<\/span><\/span><\/strong><\/p>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">Of course, yes! This is really a very hot topic, about which you should learn more, and most importantly, try to apply it to the project, at least conduct an experiment on your own repository.<\/span><\/span><\/p>\n<p align=\"justify\"><span style=\"vertical-align: inherit;\"><span style=\"vertical-align: inherit;\">We wish you success, and if you want more useful materials, 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><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0427\u0430\u0441\u0442\u0438\u043d\u0430 \u0434\u0440\u0443\u0433\u0430 \u0441\u0442\u0430\u0442\u0442\u0456 \u043f\u0440\u043e \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u0432\u0430\u043d\u043d\u044f CI\/CD \u0443 \u0440\u043e\u0437\u0440\u043e\u0431\u0446\u0456. \u041d\u0430 \u0446\u0435\u0439 \u0440\u0430\u0437 &#8211; \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0456 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u0438. <\/p>\n","protected":false},"author":12,"featured_media":50920,"parent":0,"menu_order":0,"template":"","insight":[41],"insight-subcats":[55,54],"insight-industry":[791],"insight-services":[809],"insight-partners":[],"class_list":["post-53916","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\/53916","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\/53916\/revisions"}],"predecessor-version":[{"id":101619,"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/insightsection\/53916\/revisions\/101619"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/media\/50920"}],"wp:attachment":[{"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/media?parent=53916"}],"wp:term":[{"taxonomy":"insight","embeddable":true,"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/insight?post=53916"},{"taxonomy":"insight-subcats","embeddable":true,"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/insight-subcats?post=53916"},{"taxonomy":"insight-industry","embeddable":true,"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/insight-industry?post=53916"},{"taxonomy":"insight-services","embeddable":true,"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/insight-services?post=53916"},{"taxonomy":"insight-partners","embeddable":true,"href":"https:\/\/www.globallogic.com\/ua\/wp-json\/wp\/v2\/insight-partners?post=53916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}