{"id":28703,"date":"2024-04-14T21:21:41","date_gmt":"2024-04-14T20:21:41","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/optimiza-tu-desarrollo-integracion-continua-en-vue-js-con-jenkins\/"},"modified":"2024-06-03T18:44:07","modified_gmt":"2024-06-03T17:44:07","slug":"optimiza-tu-desarrollo-integracion-continua-en-vue-js-con-jenkins","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/optimize-your-development-continuous-integration-in-vue-js-with-jenkins\/","title":{"rendered":"Optimize Your Development: Continuous Integration in Vue.js with Jenkins"},"content":{"rendered":"<p>Continuous integration (CI) and continuous delivery (CD) are essential practices in modern software development. These practices allow teams to detect errors early, improve software quality, and accelerate delivery time. Jenkins, one of the most popular open source automation tools, can be configured for Vue.js projects, ensuring an efficient and robust workflow. In this article, we&#039;ll explore how to set up a CI\/CD system for a Vue.js project using Jenkins, detailing each step to ensure a successful deployment.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\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: #ffffff;color:#ffffff\" 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: #ffffff;color:#ffffff\" 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>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-development-continuous-integration-in-vue-js-with-jenkins\/#%C2%BFPor_que_usar_Jenkins_en_proyectos_Vuejs\" >Why use Jenkins in Vue.js projects?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-development-continuous-integration-in-vue-js-with-jenkins\/#Configuracion_inicial_de_Jenkins_para_Vuejs\" >Initial configuration of Jenkins for Vue.js<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-development-continuous-integration-in-vue-js-with-jenkins\/#1_Instalacion_de_plugins_necesarios\" >1. Installation of necessary plugins<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-development-continuous-integration-in-vue-js-with-jenkins\/#2_Configuracion_del_entorno_Nodejs_en_Jenkins\" >2. Setting up the Node.js environment in Jenkins<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-development-continuous-integration-in-vue-js-with-jenkins\/#3_Creacion_de_un_nuevo_Job_en_Jenkins\" >3. Creating a new Job in Jenkins<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-development-continuous-integration-in-vue-js-with-jenkins\/#4_Configuracion_del_repositorio_Git\" >4. Git repository configuration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-development-continuous-integration-in-vue-js-with-jenkins\/#5_Configuracion_de_la_construccion\" >5. Build configuration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-development-continuous-integration-in-vue-js-with-jenkins\/#6_Configuracion_de_post-construccion_para_notificaciones_y_despliegues\" >6. Post-build configuration for notifications and deployments<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/optimize-your-development-continuous-integration-in-vue-js-with-jenkins\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFPor_que_usar_Jenkins_en_proyectos_Vuejs\"><\/span>Why use Jenkins in Vue.js projects?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Jenkins is widely recognized for its ability to automate different phases of software development. By integrating it into projects that use Vue.js, Jenkins offers advantages such as:<\/p>\n<ul>\n<li><strong>Automation of the build and testing process:<\/strong> Jenkins can automate the build of your Vue.js application every time a commit is made to the repository, ensuring that code changes don&#039;t break existing functionality.<\/li>\n<li><strong>Continuous deployment:<\/strong> It allows automatic deployment of the application to different test and production environments, facilitating a faster and more stable release cycle.<\/li>\n<li><strong>Quick feedback:<\/strong> Each change is automatically verified, providing almost immediate feedback on the health of the project, which is essential for early bug fixes.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Configuracion_inicial_de_Jenkins_para_Vuejs\"><\/span>Initial configuration of Jenkins for Vue.js<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Before you get started with Jenkins, make sure you have it installed and running correctly on your system. You can follow the official guides in the <a href=\"https:\/\/www.jenkins.io\/\" rel=\"nofollow noopener\" target=\"_blank\">Jenkins website<\/a> to install it on different operating systems.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"1_Instalacion_de_plugins_necesarios\"><\/span>1. Installation of necessary plugins<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Once Jenkins is running, the first step is to install the plugins that will facilitate the integration with Vue.js. You will need to:<\/p>\n<ul>\n<li><strong>NodeJS Plugin:<\/strong> This plugin allows Jenkins to manage Node.js installations and run npm scripts.<\/li>\n<li><strong>GitPlugin:<\/strong> To integrate your source code repository with Jenkins.<\/li>\n<\/ul>\n<p>To install these plugins, go to <strong>Manage Jenkins &gt; Manage Plugins &gt; Available<\/strong>, search for these plugins and select install without restart.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"2_Configuracion_del_entorno_Nodejs_en_Jenkins\"><\/span>2. Setting up the Node.js environment in Jenkins<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>After installing the NodeJS Plugin, you must set up a Node.js environment:<\/p>\n<ol>\n<li>Go to <strong>Manage Jenkins &gt; Global Tool Configuration<\/strong>.<\/li>\n<li>Find the section <strong>NodeJS<\/strong> and add a NodeJS.<\/li>\n<li>Name your configuration and select the version of Node.js your project requires.<\/li>\n<li>Optionally, you can configure global environment variables that your project may need.<\/li>\n<\/ol>\n<h4><span class=\"ez-toc-section\" id=\"3_Creacion_de_un_nuevo_Job_en_Jenkins\"><\/span>3. Creating a new Job in Jenkins<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To begin continuous integration of your Vue.js project, you will need to create a new job:<\/p>\n<ol>\n<li>In Jenkins, go to <strong>New Item<\/strong>.<\/li>\n<li>Choose <strong>Freestyle project<\/strong> and assign a name to your project.<\/li>\n<li>Click <strong>okay<\/strong> to create the job.<\/li>\n<\/ol>\n<h4><span class=\"ez-toc-section\" id=\"4_Configuracion_del_repositorio_Git\"><\/span>4. Git repository configuration<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>In the Job configuration:<\/p>\n<ol>\n<li>Go to section <strong>Source Code Management<\/strong>.<\/li>\n<li>Choose <strong>Git<\/strong> and provide the URL of your repository.<\/li>\n<li>Configure credentials if necessary.<\/li>\n<\/ol>\n<h4><span class=\"ez-toc-section\" id=\"5_Configuracion_de_la_construccion\"><\/span>5. Build configuration<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>In the section <strong>Build<\/strong>:<\/p>\n<ol>\n<li>Click <strong>Add build step<\/strong> and select <strong>Execute shell<\/strong> for Unix\/Linus projects or <strong>Run Windows batch command<\/strong> for Windows projects.<\/li>\n<li>\n<p>Place the necessary commands to install dependencies and build your Vue.js project. Usually, they will be something like this:<\/p>\n<pre><code class=\"&quot;language-bash&quot;\">npm install npm run build<\/code><\/pre>\n<\/li>\n<\/ol>\n<h4><span class=\"ez-toc-section\" id=\"6_Configuracion_de_post-construccion_para_notificaciones_y_despliegues\"><\/span>6. Post-build configuration for notifications and deployments<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Finally, in the section <strong>Post-build Actions<\/strong>, you can configure actions like:<\/p>\n<ul>\n<li><strong>Send notifications:<\/strong> You can configure Jenkins to send email notifications in case of build failures.<\/li>\n<li><strong>Deploy to production or testing environments:<\/strong> Configure scripts to automate the deployment of your built application to test or production servers.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Setting up Jenkins for your Vue.js project may seem complex at first, but with proper planning and understanding of the tools you can greatly improve the process of developing and deploying your applications.<\/p>\n<p>Implementing CI\/CD is not only about improving development efficiency, but also ensuring the quality of the delivered software. If you have specific questions or need help setting up your environment, feel free to contact me through the contact section. <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">contact<\/a> from my blog. <\/p>\n<p>Happy coding!<\/p>","protected":false},"excerpt":{"rendered":"<p>Continuous integration (CI) and continuous delivery (CD) are essential practices in modern software development. These practices allow teams to detect errors early, improve software quality, and speed up delivery time. Jenkins, one of the most popular open source automation tools, can be configured for projects that are [\u2026]<\/p>","protected":false},"author":1,"featured_media":28704,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,2207],"tags":[205,90,1895,211,1954,1167,1894,2208,884,562],"class_list":["post-28703","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-nodejs","tag-blog","tag-con","tag-continua","tag-desarrollo","tag-devops","tag-integracion","tag-jenkins","tag-nodejs","tag-optimiza","tag-vue-js"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28703"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28703\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28704"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}