[{"data":1,"prerenderedAt":588},["Reactive",2],{"navigation":3,"/posts/vuecicd-ci":204,"/posts/vuecicd-ci-surround":562},[4,192,200],{"title":5,"_path":6,"children":7,"icon":191},"Blog","/posts",[8,11,14,17,20,23,26,29,32,35,38,41,44,47,50,53,56,59,62,65,68,71,74,77,80,83,86,89,92,95,98,101,104,107,110,113,116,119,122,125,128,131,134,137,140,143,146,149,152,155,158,161,164,167,170,173,176,179,182,185,188],{"title":9,"_path":10},"Testing your API with REST Client","/posts/testing-your-api-with-rest-client",{"title":12,"_path":13},"HTML templating in Xamarin","/posts/html-templating-in-xamarin",{"title":15,"_path":16},"Goodbye Azure Portal, Welcome Azure CLI","/posts/welcome-azure-cli",{"title":18,"_path":19},"Coming across Gitpod","/posts/gitpod",{"title":21,"_path":22},"Handle token retrieval while querying an API","/posts/delegating-handler",{"title":24,"_path":25},"Clean up your local git branches.","/posts/cleaning-git-branches",{"title":27,"_path":28},"Automate configuration of Teams Tab SSO with PowerShell.","/posts/teams-sso-powershell",{"title":30,"_path":31},"How to do a technology watch? - Part 1","/posts/technology-watch-part1",{"title":33,"_path":34},"How to do a technology watch? - Part 2","/posts/technology-watch-part2",{"title":36,"_path":37},"You almost no longer need Key Vault references for Azure Functions.","/posts/azure-functions-custom-configuration",{"title":39,"_path":40},"How to do a technology watch? - Part 3","/posts/technology-watch-part3",{"title":42,"_path":43},"Forget DevOps, the future is already here!","/posts/devops-future",{"title":45,"_path":46},"Week 9, 2021 - Tips I learned this week","/posts/w09-2021-tips-learned-this-week",{"title":48,"_path":49},"Week 12, 2021 - Tips I learned this week","/posts/w12-2021-tips-learned-this-week",{"title":51,"_path":52},"Week 14, 2021 - Tips I learned this week","/posts/w14-2021-tips-learned-this-week",{"title":54,"_path":55},"Once upon a time in .NET","/posts/once-upon-a-time-in-dotnet",{"title":57,"_path":58},"Install your applications with winget","/posts/winget-import",{"title":60,"_path":61},"Customize your applications when installing them with winget","/posts/winget-override",{"title":63,"_path":64},"Week 22, 2021 - Tips I learned this week","/posts/w22-2021-tips-learned-this-week",{"title":66,"_path":67},"How to connect to an Azure SQL Database from C# using Azure AD","/posts/sqlclient-active-directory-authent",{"title":69,"_path":70},"Producing packages for Windows Package Manager","/posts/wingetcreate",{"title":72,"_path":73},"4 tips about GitHub Actions environment variables and contexts","/posts/github-actions-var-and-context",{"title":75,"_path":76},"AzureWebJobsStorage, the secret you don't need in your Function App.","/posts/azure-functions-without-azurewebjobsstorage",{"title":78,"_path":79},"ASP.NET Core - Lost in configuration","/posts/lost-in-configuration",{"title":81,"_path":82},"Week 39, 2021 - Tips I learned this week","/posts/w39-2021-tips-learned-this-week",{"title":84,"_path":85},"Week 41, 2021 - Tips I learned this week","/posts/w41-2021-tips-learned-this-week",{"title":87,"_path":88},"Migrating and open-sourcing my blog","/posts/migrating-blog",{"title":90,"_path":91},"Week 45, 2021 - Tips I learned this week","/posts/w45-2021-tips-learned-this-week",{"title":93,"_path":94},"Organize your GitHub stars with Astral","/posts/astral",{"title":96,"_path":97},"Pulumi with an Azure Blob Storage backend","/posts/pulumi-azure-backend",{"title":99,"_path":100},"IaC Hot Reload with Pulumi Watch","/posts/pulumi-watch",{"title":102,"_path":103},"Week 2, 2022 - Tips I learned this week","/posts/w02-2022-tips-learned-this-week",{"title":105,"_path":106},"Week 3, 2022 - Tips I learned this week","/posts/w03-2022-tips-learned-this-week",{"title":108,"_path":109},"Week 5, 2022 - Tips I learned this week","/posts/w05-2022-tips-learned-this-week",{"title":111,"_path":112},"How to provision an Azure SQL Database with Active Directory authentication","/posts/sqldatabase-active-directory-authent",{"title":114,"_path":115},"Why will I choose Pulumi over Terraform for my next project?","/posts/pulumi-vs-terraform",{"title":117,"_path":118},"Week 19, 2022 - Tips I learned this week","/posts/w19-2022-tips-learned-this-week",{"title":120,"_path":121},"Week 20, 2022 - Tips I learned this week","/posts/w20-2022-tips-learned-this-week",{"title":123,"_path":124},"Keeping secrets secure when using API Clients","/posts/http-clients-secrets",{"title":126,"_path":127},"What made me want to be a developer?","/posts/be-a-developer",{"title":129,"_path":130},"What can we do when stuck with a programming problem?","/posts/get-unstuck",{"title":132,"_path":133},"How did I automate the setup of my developer Windows laptop?","/posts/automate-developer-machine",{"title":135,"_path":136},"Discussion about API clients","/posts/http-clients",{"title":138,"_path":139},"Week 46, 2022 - Tips I learned this week","/posts/w46-2022-tips-learned-this-week",{"title":141,"_path":142},"When Pulumi met Nuke: a .NET love story","/posts/when-pulumi-met-nuke",{"title":144,"_path":145},"A year of learning and sharing - Dev Retro 2022","/posts/2022-retro",{"title":147,"_path":148},"Perform Dynamic Execution of an npm Package","/posts/pnpm-dlx",{"title":150,"_path":151},"Manage multiple Node.js versions","/posts/pnpm-env",{"title":153,"_path":154},"Introducing the Vue.js CI/CD series","/posts/vuecicd-introduction",{"title":156,"_path":157},"Execute commands using your project dependencies","/posts/pnpm-exec",{"title":159,"_path":160},"Vue.js CI/CD: Continuous Integration","/posts/vuecicd-ci",{"title":162,"_path":163},"Who is using pnpm?","/posts/pnpm-who-is-using",{"title":165,"_path":166},"Create an Azure-Ready GitHub Repository using Pulumi","/posts/azure-ready-github-repository",{"title":168,"_path":169},"Deploying to Azure from Azure DevOps without secrets","/posts/ado-workload-identity-federation",{"title":171,"_path":172},"Effortlessly Configure GitHub Repositories for Azure Deployment via OIDC","/posts/scripting-azure-ready-github-repository",{"title":174,"_path":175},"Playing with the .NET 8 Web API template","/posts/playing-with-dotnet8",{"title":177,"_path":178},"Another year of sharing and learning - Dev Retro 2023","/posts/2023-retro",{"title":180,"_path":181},"Week 4, 2024 - Tips I learned this week","/posts/w04-2024-tips-learned-this-week",{"title":183,"_path":184},"Using dependency injection with Azure .NET SDK","/posts/azure-sdk-di",{"title":186,"_path":187},"Having Fun With IT Event Calendars","/posts/it-event-calendars",{"title":189,"_path":190},"Call your Azure AD B2C protected API with authenticated HTTP requests from your JetBrains IDE","/posts/http-clients-oauth2","i-heroicons-newspaper",{"title":193,"_path":194,"children":195,"icon":199},"Goodies","/goodies",[196],{"title":197,"_path":198},"My Git Cheat Sheet","/goodies/gitcheatsheet","i-heroicons-gift-solid",{"title":201,"_path":202,"icon":203},"About","/about","i-heroicons-user-circle-solid",{"_path":160,"_dir":205,"_draft":206,"_partial":206,"_locale":207,"title":159,"description":208,"date":209,"image":210,"badge":212,"tags":214,"canonical":217,"body":218,"_type":557,"_id":558,"_source":559,"_file":560,"_extension":561},"posts",false,"","Post about continuous integration with Vue.js.","2023-06-22T00:00:00.000Z",{"src":211},"/images/vue-cicd.webp",{"label":213},"DevOps",[215,216,213],"Vue.js","CI/CD","https://bordeauxcoders.com/vuejs-cicd-continuous-integration",{"type":219,"children":220,"toc":550},"root",[221,230,236,241,246,251,271,277,282,287,317,327,339,344,349,355,377,386,398,433,443,484,507,512,518,530],{"type":222,"tag":223,"props":224,"children":226},"element","h2",{"id":225},"why-are-we-talking-about-ci-in-the-first-place",[227],{"type":228,"value":229},"text","Why are we talking about CI in the first place?",{"type":222,"tag":231,"props":232,"children":233},"p",{},[234],{"type":228,"value":235},"When working on a project, you typically focus on a specific feature at a time, making changes on a dedicated branch for that feature. When it's time for you to integrate these modifications into the project's code base, the code base has likely evolved since you began working on your feature, as other team members have also pushed their work. That's why your code changes may introduce errors in the application you are developing.",{"type":222,"tag":231,"props":237,"children":238},{},[239],{"type":228,"value":240},"Regardless of that, while implementing your feature you might have broken some tests, added a security vulnerability, reduced code quality, or simply not adhered to all code conventions used by your team. Even if your colleagues review the code of your Pull Request, they can miss some of these issues. Nonetheless, it would be more efficient for such errors to be detected automatically, enabling people to concentrate their feedback on other aspects.",{"type":222,"tag":231,"props":242,"children":243},{},[244],{"type":228,"value":245},"Continuous Integration enables us to do precisely that: automatically identify potential issues and make the integration of new changes in a project's code base less error-prone.",{"type":222,"tag":231,"props":247,"children":248},{},[249],{"type":228,"value":250},"According to Microsoft:",{"type":222,"tag":252,"props":253,"children":254},"blockquote",{},[255],{"type":222,"tag":231,"props":256,"children":257},{},[258,260,269],{"type":228,"value":259},"Continuous integration (CI) is the process of automatically building and testing code every time a team member commits code changes to ",{"type":222,"tag":261,"props":262,"children":266},"a",{"href":263,"rel":264},"https://learn.microsoft.com/en-us/devops/develop/git/what-is-version-control",[265],"nofollow",[267],{"type":228,"value":268},"version control",{"type":228,"value":270},".",{"type":222,"tag":223,"props":272,"children":274},{"id":273},"what-are-the-steps-involved-in-a-ci-pipeline",[275],{"type":228,"value":276},"What are the steps involved in a CI pipeline?",{"type":222,"tag":231,"props":278,"children":279},{},[280],{"type":228,"value":281},"We often hear discussions about the \"Build pipeline\" and the \"Release pipeline\" as if building the application was the only task performed in a continuous integration pipeline. However, this is far from the truth; the \"Build\" is an important step, but not the only one.",{"type":222,"tag":231,"props":283,"children":284},{},[285],{"type":228,"value":286},"Up until now, we have talked a lot about continuous integration for projects in general but nothing specific for Vue.js. Why is that? Because the steps for continuous integration of a Vue.js project are the same as for any other project:",{"type":222,"tag":288,"props":289,"children":290},"ul",{},[291,297,302,307,312],{"type":222,"tag":292,"props":293,"children":294},"li",{},[295],{"type":228,"value":296},"Install dependencies",{"type":222,"tag":292,"props":298,"children":299},{},[300],{"type":228,"value":301},"Build the application",{"type":222,"tag":292,"props":303,"children":304},{},[305],{"type":228,"value":306},"Perform code quality static analysis",{"type":222,"tag":292,"props":308,"children":309},{},[310],{"type":228,"value":311},"Perform security analysis",{"type":222,"tag":292,"props":313,"children":314},{},[315],{"type":228,"value":316},"Run tests",{"type":222,"tag":318,"props":319,"children":321},"callout",{"icon":320},"i-heroicons-chat-bubble-left-20-solid",[322],{"type":222,"tag":231,"props":323,"children":324},{},[325],{"type":228,"value":326},"It's good to know that, as part of the build step, an executable artifact is often generated, and then used (in the same pipeline or a CD pipeline) to deploy the application in an environment.",{"type":222,"tag":231,"props":328,"children":329},{},[330],{"type":222,"tag":331,"props":332,"children":338},"img",{"alt":333,"className":334,"src":337},"Diagram of a CI/CD pipeline.",[335,336],"rounded-lg","mx-auto","/posts/images/vuecicd_ci_pipeline.png",[],{"type":222,"tag":231,"props":340,"children":341},{},[342],{"type":228,"value":343},"Depending on your project, preferences, and available services, your continuous integration process may vary, but it should include these steps, regardless of the tools you use within them.",{"type":222,"tag":231,"props":345,"children":346},{},[347],{"type":228,"value":348},"There might be additional steps in your Continuous Integration pipeline, but the ones mentioned are the primary ones. Moreover, security is not an optional step; it should be an integral part of your continuous integration.",{"type":222,"tag":223,"props":350,"children":352},{"id":351},"leveraging-packagejson-for-your-ci-setup",[353],{"type":228,"value":354},"Leveraging package.json for your CI setup",{"type":222,"tag":231,"props":356,"children":357},{},[358,360,367,369,375],{"type":228,"value":359},"When you create a Vue.js project using ",{"type":222,"tag":361,"props":362,"children":364},"code",{"className":363},[],[365],{"type":228,"value":366},"create-vue",{"type":228,"value":368},", the generated ",{"type":222,"tag":361,"props":370,"children":372},{"className":371},[],[373],{"type":228,"value":374},"package.json",{"type":228,"value":376}," file will contain several npm scripts:",{"type":222,"tag":231,"props":378,"children":379},{},[380],{"type":222,"tag":331,"props":381,"children":385},{"alt":382,"className":383,"src":384},"Screenshot of the npm scripts section of a package.json file.",[335,336],"/posts/images/vuecicd_ci_packagejson_0.png",[],{"type":222,"tag":231,"props":387,"children":388},{},[389,391,396],{"type":228,"value":390},"You can observe that some of these scripts precisely correspond to the necessary steps for the continuous integration pipeline, such as build and unit tests. We will discuss each of them in future articles but the npm scripts in the default ",{"type":222,"tag":361,"props":392,"children":394},{"className":393},[],[395],{"type":228,"value":366},{"type":228,"value":397}," template are definitively a good starting point to set up your CI.",{"type":222,"tag":231,"props":399,"children":400},{},[401,403,409,411,416,418,424,426,431],{"type":228,"value":402},"You can see that packages used in the npm scripts are specified in the ",{"type":222,"tag":361,"props":404,"children":406},{"className":405},[],[407],{"type":228,"value":408},"devDependencies",{"type":228,"value":410}," section of the ",{"type":222,"tag":361,"props":412,"children":414},{"className":413},[],[415],{"type":228,"value":374},{"type":228,"value":417}," file. That means these packages will be available to use locally or in a CI server after executing the ",{"type":222,"tag":361,"props":419,"children":421},{"className":420},[],[422],{"type":228,"value":423},"pnpm install",{"type":228,"value":425}," command. As part of the CI, other packages may also be needed, so you should include them in the ",{"type":222,"tag":361,"props":427,"children":429},{"className":428},[],[430],{"type":228,"value":408},{"type":228,"value":432}," section as well.",{"type":222,"tag":231,"props":434,"children":435},{},[436],{"type":222,"tag":331,"props":437,"children":442},{"alt":438,"className":439,"src":440,"width":441},"Screenshot of the devdependencies section of a package.json file.",[335,336],"/posts/images/vuecicd_ci_packagejson_1.png",1000,[],{"type":222,"tag":231,"props":444,"children":445},{},[446,448,453,455,466,468,474,476,482],{"type":228,"value":447},"In your CI pipeline, I think it's a good idea to directly execute the npm scripts of the ",{"type":222,"tag":361,"props":449,"children":451},{"className":450},[],[452],{"type":228,"value":374},{"type":228,"value":454}," file rather than specifying the packages you want to run along with their corresponding flags and parameters. You can accomplish this by using the ",{"type":222,"tag":261,"props":456,"children":459},{"href":457,"rel":458},"https://pnpm.io/fr/cli/run",[265],[460],{"type":222,"tag":361,"props":461,"children":463},{"className":462},[],[464],{"type":228,"value":465},"pnpm run",{"type":228,"value":467}," command like so: ",{"type":222,"tag":361,"props":469,"children":471},{"className":470},[],[472],{"type":228,"value":473},"pnpm run build",{"type":228,"value":475}," or ",{"type":222,"tag":361,"props":477,"children":479},{"className":478},[],[480],{"type":228,"value":481},"pnpm build",{"type":228,"value":483}," (all npm scripts are aliased by pnpm by default). Of course, you'll need to add any missing npm scripts required for your CI. There are several benefits to this approach:",{"type":222,"tag":288,"props":485,"children":486},{},[487,492,497,502],{"type":222,"tag":292,"props":488,"children":489},{},[490],{"type":228,"value":491},"It simplifies the CI pipeline and makes it easier to read",{"type":222,"tag":292,"props":493,"children":494},{},[495],{"type":228,"value":496},"you won't have to modify your pipeline when you change something in an npm script (whether it's the package you use or just a parameter)",{"type":222,"tag":292,"props":498,"children":499},{},[500],{"type":228,"value":501},"the steps in your CI pipeline will be more consistent across projects (including both Vue.js and non-Vue.js projects) if you always use the same npm script names",{"type":222,"tag":292,"props":503,"children":504},{},[505],{"type":228,"value":506},"the same commands will be executed with the same parameters, whether locally or on a CI server",{"type":222,"tag":231,"props":508,"children":509},{},[510],{"type":228,"value":511},"It's important to note that you should not wait for a CI pipeline execution to detect issues in your code. The sooner you identify and resolve problems, the better. Before pushing your changes, you should run the npm scripts that test your code and perform static analysis on it.",{"type":222,"tag":223,"props":513,"children":515},{"id":514},"wrapping-it-up",[516],{"type":228,"value":517},"Wrapping it up",{"type":222,"tag":231,"props":519,"children":520},{},[521,523,528],{"type":228,"value":522},"Setting up a Continuous Integration pipeline for your Vue.js project is essential for preventing issues, maintaining code quality, ensuring security, and streamlining the development process. By leveraging the npm scripts of the ",{"type":222,"tag":361,"props":524,"children":526},{"className":525},[],[527],{"type":228,"value":374},{"type":228,"value":529}," file you can simplify your CI pipeline and ensure consistency both locally and on the CI server, as well as across your projects.",{"type":222,"tag":231,"props":531,"children":532},{},[533,535,541,542,548],{"type":228,"value":534},"Future articles in this series will delve into the details of various stages of a continuous integration pipeline (such as using ",{"type":222,"tag":361,"props":536,"children":538},{"className":537},[],[539],{"type":228,"value":540},"vue-tsc",{"type":228,"value":475},{"type":222,"tag":361,"props":543,"children":545},{"className":544},[],[546],{"type":228,"value":547},"eslint",{"type":228,"value":549}," for static analysis) and their implementation in GitLab CI or GitHub Actions pipelines.",{"title":207,"searchDepth":551,"depth":551,"links":552},2,[553,554,555,556],{"id":225,"depth":551,"text":229},{"id":273,"depth":551,"text":276},{"id":351,"depth":551,"text":354},{"id":514,"depth":551,"text":517},"markdown","content:1.posts:51.vuecicd-ci.md","content","1.posts/51.vuecicd-ci.md","md",[563,578],{"_path":163,"_dir":205,"_draft":206,"_partial":206,"_locale":207,"title":162,"description":564,"lead":565,"date":566,"badge":567,"image":569,"tags":571,"canonical":575,"_type":557,"_id":576,"_source":559,"_file":577,"_extension":561},"You may have come across pnpm through discussions with fellow developers, reading blog posts, watching videos, or attending developer conferences. You have probably heard its praises: it's fast, disk-space efficient, and great for monorepos.","Discussion about pnpm usage and popularity.","2023-07-06T00:00:00.000Z",{"label":568},"Tooling",{"src":570},"/images/pnpm.png",[572,573,574],"pnpm","package manager","tooling","https://bordeauxcoders.com/who-is-using-pnpm","content:1.posts:52.pnpm-who-is-using.md","1.posts/52.pnpm-who-is-using.md",{"_path":157,"_dir":205,"_draft":206,"_partial":206,"_locale":207,"title":156,"description":579,"lead":580,"date":581,"image":582,"badge":583,"tags":584,"canonical":585,"_type":557,"_id":586,"_source":559,"_file":587,"_extension":561},"You have a dependency in your project and want to execute a command using it? The pnpm exec command can help you with that.","pnpm exec","2023-06-15T00:00:00.000Z",{"src":570},{"label":568},[572,573,574],"https://bordeauxcoders.com/execute-commands-using-your-project-dependencies","content:1.posts:50.pnpm-exec.md","1.posts/50.pnpm-exec.md",1716749601511]