[{"data":1,"prerenderedAt":503},["Reactive",2],{"navigation":3,"/posts/vuecicd-introduction":204,"/posts/vuecicd-introduction-surround":478},[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":154,"_dir":205,"_draft":206,"_partial":206,"_locale":207,"title":153,"description":208,"date":209,"image":210,"badge":212,"tags":214,"canonical":217,"body":218,"_type":473,"_id":474,"_source":475,"_file":476,"_extension":477},"posts",false,"","This is the first article of the Vue.js CI/CD series. It will be the opportunity to explain the purpose of the series and the topics we plan to cover.","2023-06-01T00:00:00.000Z",{"src":211},"/images/vue-cicd.webp",{"label":213},"DevOps",[215,216,213],"Vue.js","CI/CD","https://bordeauxcoders.com/introducing-the-vuejs-cicd-series",{"type":219,"children":220,"toc":463},"root",[221,228,235,240,245,251,256,291,296,303,308,313,319,324,342,348,353,374,384,397,415,433,458],{"type":222,"tag":223,"props":224,"children":225},"element","p",{},[226],{"type":227,"value":208},"text",{"type":222,"tag":229,"props":230,"children":232},"h2",{"id":231},"why-this-series",[233],{"type":227,"value":234},"Why this series?",{"type":222,"tag":223,"props":236,"children":237},{},[238],{"type":227,"value":239},"We delved deeply into CI/CD for Vue.js when preparing a DevOps practices course for students in engineering school. The course wasn't directly related to Vue.js; however, we chose to use a Vue.js application for hands-on exercises focused on implementing CI/CD pipelines. Through this process, we gained valuable insights that we now wish to share.",{"type":222,"tag":223,"props":241,"children":242},{},[243],{"type":227,"value":244},"While there are numerous blog posts on Vue.js, not many articles specifically address setting up CI/CD pipelines for Vue.js projects. Yet, having proper continuous integration and automating deployments are two aspects that should not be neglected in a project. That's the main reason why we decided to write this Vue.js CI/CD series.",{"type":222,"tag":229,"props":246,"children":248},{"id":247},"what-are-we-going-to-talk-about",[249],{"type":227,"value":250},"What are we going to talk about?",{"type":222,"tag":223,"props":252,"children":253},{},[254],{"type":227,"value":255},"As you can expect, we will cover the usual topics:",{"type":222,"tag":257,"props":258,"children":259},"ul",{},[260,266,271,276,281,286],{"type":222,"tag":261,"props":262,"children":263},"li",{},[264],{"type":227,"value":265},"package management",{"type":222,"tag":261,"props":267,"children":268},{},[269],{"type":227,"value":270},"build & artifacts",{"type":222,"tag":261,"props":272,"children":273},{},[274],{"type":227,"value":275},"static analysis",{"type":222,"tag":261,"props":277,"children":278},{},[279],{"type":227,"value":280},"testing",{"type":222,"tag":261,"props":282,"children":283},{},[284],{"type":227,"value":285},"security",{"type":222,"tag":261,"props":287,"children":288},{},[289],{"type":227,"value":290},"deployment",{"type":222,"tag":223,"props":292,"children":293},{},[294],{"type":227,"value":295},"Examples will be shown using different CI/CD platforms and cloud services.",{"type":222,"tag":297,"props":298,"children":300},"h3",{"id":299},"cicd-platforms",[301],{"type":227,"value":302},"CI/CD platforms",{"type":222,"tag":223,"props":304,"children":305},{},[306],{"type":227,"value":307},"We can't cover all the CI/CD platforms so we will focus on GitHub Actions and GitLab CI.",{"type":222,"tag":223,"props":309,"children":310},{},[311],{"type":227,"value":312},"Even though each platform has its unique features, the majority of the concepts we will discuss can be applied to other platforms as well. So, don't stop reading the series just because you are using a different platform 😉.",{"type":222,"tag":297,"props":314,"children":316},{"id":315},"cloud-services",[317],{"type":227,"value":318},"Cloud services",{"type":222,"tag":223,"props":320,"children":321},{},[322],{"type":227,"value":323},"There are numerous hosting options for a Vue.js application, and we will demonstrate how to deploy an application on at least the following platforms:",{"type":222,"tag":257,"props":325,"children":326},{},[327,332,337],{"type":222,"tag":261,"props":328,"children":329},{},[330],{"type":227,"value":331},"Azure Static Web App",{"type":222,"tag":261,"props":333,"children":334},{},[335],{"type":227,"value":336},"Vercel",{"type":222,"tag":261,"props":338,"children":339},{},[340],{"type":227,"value":341},"Netlify",{"type":222,"tag":229,"props":343,"children":345},{"id":344},"which-sample-application-will-we-be-using",[346],{"type":227,"value":347},"Which sample application will we be using?",{"type":222,"tag":223,"props":349,"children":350},{},[351],{"type":227,"value":352},"This series aims to discuss CI/CD for Vue.js applications so that anyone can learn how to set up a CI/CD pipeline for their Vue.js project. That's why we will use the sample code from the basic application generated when creating a new Vue.js project.",{"type":222,"tag":223,"props":354,"children":355},{},[356,358,372],{"type":227,"value":357},"And to be clear, when you start a new Vue.js project you don't want to use the Vue CLI because it is in maintenance mode. Instead, you should use ",{"type":222,"tag":359,"props":360,"children":364},"a",{"href":361,"rel":362},"https://github.com/vuejs/create-vue",[363],"nofollow",[365],{"type":222,"tag":366,"props":367,"children":369},"code",{"className":368},[],[370],{"type":227,"value":371},"create-vue",{"type":227,"value":373}," which is based on Vite and is the recommended way of scaffolding a Vue.js project.",{"type":222,"tag":375,"props":376,"children":378},"callout",{"icon":377},"i-heroicons-chat-bubble-left-20-solid",[379],{"type":222,"tag":223,"props":380,"children":381},{},[382],{"type":227,"value":383},"I think it's important to mention it because I still see new blog posts talking about creating new projects using Vue CLI.",{"type":222,"tag":223,"props":385,"children":386},{},[387,389,395],{"type":227,"value":388},"So nothing specific in the code of the application we will build and deploy, just the basic things you get when you run the ",{"type":222,"tag":366,"props":390,"children":392},{"className":391},[],[393],{"type":227,"value":394},"pnpm create vue@latest",{"type":227,"value":396}," command with:",{"type":222,"tag":257,"props":398,"children":399},{},[400,405,410],{"type":222,"tag":261,"props":401,"children":402},{},[403],{"type":227,"value":404},"TypeScript enabled ➡️ it's 2023, I don't see any valid reason why to choose Vanilla JS instead of TypeScript so if you are not using TypeScript you probably should",{"type":222,"tag":261,"props":406,"children":407},{},[408],{"type":227,"value":409},"Vitest enabled ➡️ the vite-native unit test framework you want to use to test your code",{"type":222,"tag":261,"props":411,"children":412},{},[413],{"type":227,"value":414},"ESLint enabled ➡️ because static analysis should be part of your Continuous Integration pipeline",{"type":222,"tag":223,"props":416,"children":417},{},[418,420,431],{"type":227,"value":419},"The last thing to mention: we will use the latest version of ",{"type":222,"tag":359,"props":421,"children":424},{"href":422,"rel":423},"https://pnpm.io/",[363],[425],{"type":222,"tag":366,"props":426,"children":428},{"className":427},[],[429],{"type":227,"value":430},"pnpm",{"type":227,"value":432}," to manage dependencies. Our preferred package manager is pnpm for various reasons, but the primary one is its remarkable speed!",{"type":222,"tag":375,"props":434,"children":435},{"icon":377},[436],{"type":222,"tag":223,"props":437,"children":438},{},[439,441,447,449,456],{"type":227,"value":440},"You can check the ",{"type":222,"tag":359,"props":442,"children":444},{"href":422,"rel":443},[363],[445],{"type":227,"value":446},"pnpm website",{"type":227,"value":448}," to read more about pnpm or have a look at our ",{"type":222,"tag":359,"props":450,"children":453},{"href":451,"rel":452},"https://bordeauxcoders.com/series/pnpm-101",[363],[454],{"type":227,"value":455},"pnpm 101 series",{"type":227,"value":457},".",{"type":222,"tag":223,"props":459,"children":460},{},[461],{"type":227,"value":462},"We hope you will have a great time learning about CI/CD for Vue.js application. See you in the next article.",{"title":207,"searchDepth":464,"depth":464,"links":465},2,[466,467,472],{"id":231,"depth":464,"text":234},{"id":247,"depth":464,"text":250,"children":468},[469,471],{"id":299,"depth":470,"text":302},3,{"id":315,"depth":470,"text":318},{"id":344,"depth":464,"text":347},"markdown","content:1.posts:49.vuecicd-introduction.md","content","1.posts/49.vuecicd-introduction.md","md",[479,493],{"_path":157,"_dir":205,"_draft":206,"_partial":206,"_locale":207,"title":156,"description":480,"lead":481,"date":482,"image":483,"badge":485,"tags":487,"canonical":490,"_type":473,"_id":491,"_source":475,"_file":492,"_extension":477},"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":484},"/images/pnpm.png",{"label":486},"Tooling",[430,488,489],"package manager","tooling","https://bordeauxcoders.com/execute-commands-using-your-project-dependencies","content:1.posts:50.pnpm-exec.md","1.posts/50.pnpm-exec.md",{"_path":151,"_dir":205,"_draft":206,"_partial":206,"_locale":207,"title":150,"description":494,"lead":495,"date":496,"image":497,"badge":498,"tags":499,"canonical":500,"_type":473,"_id":501,"_source":475,"_file":502,"_extension":477},"If you are working on various projects, you have likely encountered situations where you need to have multiple versions of Node.js installed on your computer.","pnpm env","2023-05-25T00:00:00.000Z",{"src":484},{"label":486},[430,488,489],"https://bordeauxcoders.com/manage-multiple-nodejs-versions","content:1.posts:48.pnpm-env.md","1.posts/48.pnpm-env.md",1716749601519]