https://javiermartinez.dev/_nuxt/static/1652887529/en/configuring-…ub-actions-and-vercel-deployment/payload.js

1__NUXT_JSONP__("/en/configuring-a-monorepo-with-yarn-workspaces-using-shared-components-github-actions-and-vercel-deployment", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ){return {data:[{}],fetch:[{post:{slug:$,title:"Configuring a monorepo with Yarn Workspaces using shared components, GitHub actions, and Vercel deployment.",description:"We have two apps. One for the web made with Nuxt and the other for desktop made with Electron. So far so good but once the development is quite advanced we started to notice that there were components that had been used in both projects. Last week we decided to merge those two projects into a unique monorepo.",image:"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1590595906931-81f04f0ccebb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80",author:"javier-martinez",category:"misc",createdAt:"2021-05-30T11:34:23.282Z",toc:[{id:aa,depth:Q,text:ab},{id:ac,depth:3,text:ad},{id:ae,depth:Q,text:af},{id:ag,depth:Q,text:ah}],body:{type:"root",children:[{type:b,tag:k,props:{},children:[{type:a,value:"In "},{type:b,tag:q,props:{href:"https:\u002F\u002Fremate.io\u002F",rel:[w,x,y],target:z},children:[{type:a,value:"Remate"}]},{type:a,value:", We have two apps. One for the web made with "},{type:b,tag:q,props:{href:"https:\u002F\u002Fnuxtjs.org\u002F",rel:[w,x,y],target:z},children:[{type:a,value:"Nuxt"}]},{type:a,value:" and the other for desktop made with "},{type:b,tag:q,props:{href:"https:\u002F\u002Fwww.electronjs.org\u002F",rel:[w,x,y],target:z},children:[{type:a,value:"Electron"}]},{type:a,value:". So far so good but once the development is quite advanced we started to notice that there were components that had been used in both projects. This also applies to the API endpoints and more stuff."}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"Last week we decided to merge those two projects into a unique monorepo. That way we could have shared components YAY! But, wait a moment, is that going to work just out of the box? Short answer: No. Long answer: Yes, with Yarn Workspaces."}]},{type:a,value:f},{type:b,tag:R,props:{id:aa},children:[{type:b,tag:q,props:{href:"#yarn-workspaces",ariaHidden:G,tabIndex:J},children:[{type:b,tag:c,props:{className:[K,L]},children:[]}]},{type:a,value:ab}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"According to "},{type:b,tag:q,props:{href:"https:\u002F\u002Fclassic.yarnpkg.com\u002Fen\u002Fdocs\u002Fworkspaces\u002F",rel:[w,x,y],target:z},children:[{type:a,value:"Yarn docs"}]},{type:a,value:", Workspaces are\n"},{type:b,tag:l,props:{},children:[{type:a,value:"a new way to set up your package architecture that’s available by default starting from Yarn 1.0. It allows you to setup multiple packages in such a way that you only need to run yarn install once to install all of them in a single pass."}]}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"Awesome, so by default, we can have two projects and run "},{type:b,tag:l,props:{},children:[{type:a,value:ai}]},{type:a,value:" on the root and yarn will take care of manage both project dependencies. Yarn is smart enough to not install twice repeated dependencies among projects."}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"For enabling workspaces you only have to create a "},{type:b,tag:l,props:{},children:[{type:a,value:M}]},{type:a,value:" file in your repository root."}]},{type:a,value:f},{type:b,tag:A,props:{className:[B]},children:[{type:b,tag:c,props:{className:[C]},children:[{type:a,value:M}]},{type:b,tag:D,props:{className:[E,N]},children:[{type:b,tag:l,props:{},children:[{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:s}]},{type:a,value:aj},{type:b,tag:c,props:{className:[d,o]},children:[{type:a,value:"\"private\""}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,"boolean"]},children:[{type:a,value:G}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:t}]},{type:a,value:aj},{type:b,tag:c,props:{className:[d,o]},children:[{type:a,value:"\"workspaces\""}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:S}]},{type:b,tag:c,props:{className:[d,p]},children:[{type:a,value:ak}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:t}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,p]},children:[{type:a,value:al}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:T}]},{type:a,value:f},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:u}]},{type:a,value:f}]}]}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"Note that "},{type:b,tag:l,props:{},children:[{type:a,value:"private: true"}]}

1,{type:a,value:" is required. Workspaces are not meant to be published."}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"The next step is creating those two folders and putting a single "},{type:b,tag:l,props:{},children:[{type:a,value:M}]},{type:a,value:" file inside of each workspace."}]},{type:a,value:f},{type:b,tag:A,props:{className:[B]},children:[{type:b,tag:c,props:{className:[C]},children:[{type:a,value:"workspace-a\u002Fpackage.json"}]},{type:b,tag:D,props:{className:[E,N]},children:[{type:b,tag:l,props:{},children:[{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:s}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,o]},children:[{type:a,value:U}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,p]},children:[{type:a,value:ak}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:t}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,o]},children:[{type:a,value:V}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,p]},children:[{type:a,value:W}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:t}]},{type:a,value:am},{type:b,tag:c,props:{className:[d,o]},children:[{type:a,value:an}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:s}]},{type:a,value:r},{type:b,tag:c,props:{className:[d,o]},children:[{type:a,value:ao}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,p]},children:[{type:a,value:ap}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:u}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:t}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,o]},children:[{type:a,value:"\"scripts\""}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:s}]},{type:a,value:r},{type:b,tag:c,props:{className:[d,o]},children:[{type:a,value:"\"test\""}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,p]},children:[{type:a,value:"\"node test.js\""}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:u}]},{type:a,value:f},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:u}]},{type:a,value:f}]}]}]},{type:a,value:f},{type:b,tag:A,props:{className:[B]},children:[{type:b,tag:c,props:{className:[C]},children:[{type:a,value:"workspace-b\u002Fpackage.json"}]},{type:b,tag:D,props:{className:[E,N]},children:[{type:b,tag:l,props:{},children:[{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:s}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,o]},children:[{type:a,value:U}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,p]},children:[{type:a,value:al}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:t}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,o]},children:[{type:a,value:V}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,p]},children:[{type:a,value:W}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:t}]},{type:a,value:am},{type:b,tag:c,props:{className:[d,o]},children:[{type:a,value:an}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:s}]},{type:a,value:r},{type:b,tag:c,props:{className:[d,o]},children:[{type:a,value:ao}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,p]},children:[{type:a,value:ap}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:t}]},{type:a,value:r},{type:b,tag:c,props:{className:[d,o]},children:[{type:a,value:"\"core-js\""}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,p]},children:[{type:a,value:"\"2.6.10\""}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:u}]},{type:a,value:f},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:u}]},{type:a,value:f}]}]}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"With that in place, you can now run "},{type:b,tag:l,props:{},children:[{type:a,value:ai}]},{type:a,value:" on the root folder (or in the root of the workspace itself 😯) and all the dependencies will be installed in a unique root "},{type:b,tag:l,props:{},children:[{type:a,value:"node_modules"}]},{type:a,value:" folder."}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"If you inspect that folder, you will see the dependencies but also two symlinks to the workspaces 🤯 which makes it extremely easy to share code between projects."}]},{type:a,value:f},{type:b,tag:"h3",props:{id:ac},children:[{type:b,tag:q,props:{href:"#shared-workspace",ariaHidden:G,tabIndex:J},children:[{type:b,tag:c,props:{className:[K,L]},children:[]}]},{type:a,value:ad}]}

1,{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"Knowing that yarn workspaces creates a symlink to each subfolder, as it were a node package, we can use it as a regular npm dependency."}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"Let’s create a shared workspace with two files on it. The first one will be the "},{type:b,tag:l,props:{},children:[{type:a,value:M}]}]},{type:a,value:f},{type:b,tag:A,props:{className:[B]},children:[{type:b,tag:c,props:{className:[C]},children:[{type:a,value:"shared\u002Fpackage.json"}]},{type:b,tag:D,props:{className:[E,N]},children:[{type:b,tag:l,props:{},children:[{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:s}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,o]},children:[{type:a,value:U}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,p]},children:[{type:a,value:"\"shared\""}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:t}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,o]},children:[{type:a,value:V}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,p]},children:[{type:a,value:W}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:t}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,o]},children:[{type:a,value:"\"main\""}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,p]},children:[{type:a,value:"\"index.js\""}]},{type:a,value:f},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:u}]},{type:a,value:f}]}]}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"And the actual code to import later"}]},{type:a,value:f},{type:b,tag:A,props:{className:[B]},children:[{type:b,tag:c,props:{className:[C]},children:[{type:a,value:"shared\u002Findex.js"}]},{type:b,tag:D,props:{className:[E,aq]},children:[{type:b,tag:l,props:{},children:[{type:a,value:"module"},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:H}]},{type:b,tag:c,props:{className:[d,ar]},children:[{type:a,value:"exports"}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:as}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:s}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,"function-variable",O]},children:[{type:a,value:at}]},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,"parameter"]},children:[{type:a,value:au}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,"arrow",m]},children:[{type:a,value:"=\u003E"}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:s}]},{type:a,value:r},{type:b,tag:c,props:{className:[d,av,"class-name"]},children:[{type:a,value:av}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:H}]},{type:b,tag:c,props:{className:[d,"method",O,ar]},children:[{type:a,value:"log"}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:X}]},{type:a,value:au},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:Y}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:u}]},{type:a,value:f},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:u}]},{type:a,value:f}]}]}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"If you want to use that piece of code on, let’s say, "},{type:b,tag:l,props:{},children:[{type:a,value:"workspace-a"}]},{type:a,value:" you only have to require it as you always do."}]},{type:a,value:f},{type:b,tag:A,props:{className:[B]},children:[{type:b,tag:c,props:{className:[C]},children:[{type:a,value:"package-a\u002Findex.js"}]},{type:b,tag:D,props:{className:[E,aq]},children:[{type:b,tag:l,props:{},children:[{type:b,tag:c,props:{className:[d,"keyword"]},children:[{type:a,value:"const"}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:s}]},{type:a,value:" say "},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:u}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,m]},children:[{type:a,value:as}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,O]},children:[{type:a,value:"require"}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:X}]},{type:b,tag:c,props:{className:[d,p]},children:[{type:a,value:"'shared'"}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:Y}]},{type:a,value:Z},{type:b,tag:c,props:{className:[d,O]},children:[{type:a,value:at}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:X}]},{type:b,tag:c,props:{className:[d,p]},children:[{type:a,value:"'hi'"}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:Y}]},{type:a,value:f}]}]}]},{type:a,value:f},{type:b,tag:R,props:{id:ae},children:[{type:b,tag:q,props:{href:"#github-actions",ariaHidden:G,tabIndex:J},children:[{type:b,tag:c,props:{className:[K,L]},children:[]}]},{type:a,value:af}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"Okay, that’s awesome but now, our GitHub actions that previously lived on the root of each project,  are not working anymore 🙂"}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"Github expects a "},{type:b,tag:l,props:{},children:[{type:a,value:".github\u002Fworkflows"}]},{type:a,value:" folder on the root of the repo. So let’s create an example workflow"}]},{type:a,value:f},{type:b,tag:A,props:{className:[B]},children:[{type:b,tag:c,props:{className:[C]},children:[{type:a,value:aw}]},{type:b,tag:D,props:{className:[E,ax]},children:[{type:b,tag:l,props:{},children:[{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:F}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:ay},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:az}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:aA}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:r},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:aB}]}

1,{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:S}]},{type:a,value:aC},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:T}]},{type:a,value:Z},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:aD}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:aE}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:r},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:aF}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:aG},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:v}]},{type:a,value:aH},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:aI}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:r},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:v}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:aJ}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:aK},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:v}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:F}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:aL},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:I}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:aM},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:v}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:F}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:aN},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:I}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:aO}]}]}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"Two things are wrong with that "},{type:b,tag:l,props:{},children:[{type:a,value:"regular"}]},{type:a,value:" workflow:"}]},{type:a,value:f},{type:b,tag:aP,props:{},children:[{type:a,value:f},{type:b,tag:P,props:{},children:[{type:a,value:"It’s going to be executed on each PR, even when only "},{type:b,tag:l,props:{},children:[{type:a,value:"workflow-b"}]},{type:a,value:" files are included."}]},{type:a,value:f},{type:b,tag:P,props:{},children:[{type:a,value:"It’s going to be executed on the root of the repo, not in the "},{type:b,tag:l,props:{},children:[{type:a,value:"workflow-a"}]},{type:a,value:" folder"}]},{type:a,value:f}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"Let’s fix it."}]},{type:a,value:f},{type:b,tag:A,props:{className:[B]},children:[{type:b,tag:c,props:{className:[C]},children:[{type:a,value:aw}]},{type:b,tag:D,props:{className:[E,ax]},children:[{type:b,tag:l,props:{},children:[{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:F}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:ay},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:az}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:aA}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:r},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:aB}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:S}]},{type:a,value:aC},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:T}]},{type:a,value:r},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:"paths"}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:"\n     "},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:v}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,p]},children:[{type:a,value:"'workspace-a\u002F**'"}]},{type:a,value:Z},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:"defaults"}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:I}]}

1,{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:r},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:"working-directory"}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:" workspace"},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:v}]},{type:a,value:"a\n\n"},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:aD}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:n},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:aE}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:r},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:aF}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:aG},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:v}]},{type:a,value:aH},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:aI}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:r},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:v}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:aJ}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:aK},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:v}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:F}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:aL},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:I}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:aM},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:v}]},{type:a,value:h},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:F}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:aN},{type:b,tag:c,props:{className:[d,i,j]},children:[{type:a,value:I}]},{type:b,tag:c,props:{className:[d,e]},children:[{type:a,value:g}]},{type:a,value:aO}]}]}]},{type:a,value:f},{type:b,tag:aP,props:{},children:[{type:a,value:f},{type:b,tag:P,props:{},children:[{type:a,value:aQ},{type:b,tag:l,props:{},children:[{type:a,value:"on.pull_request.paths"}]},{type:a,value:" setting we are telling Github that the action should be only executed when the PR contains, at least, one file on that specific path."}]},{type:a,value:f},{type:b,tag:P,props:{},children:[{type:a,value:aQ},{type:b,tag:l,props:{},children:[{type:a,value:"defaults.run.working-directory"}]},{type:a,value:" setting we are telling Github that all the "},{type:b,tag:l,props:{},children:[{type:a,value:"runs"}]},{type:a,value:" commands on that workflow have to be executed on that specific path."}]},{type:a,value:f}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"Tests are passing, we are ready to deploy."}]},{type:a,value:f},{type:b,tag:R,props:{id:ag},children:[{type:b,tag:q,props:{href:"#vercel-deployment",ariaHidden:G,tabIndex:J},children:[{type:b,tag:c,props:{className:[K,L]},children:[]}]},{type:a,value:ah}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"We use "},{type:b,tag:q,props:{href:"https:\u002F\u002Fvercel.com\u002F",rel:[w,x,y],target:z},children:[{type:a,value:"Vercel"}]},{type:a,value:" at "},{type:b,tag:q,props:{href:"https:\u002F\u002F64robot.com\u002F",rel:[w,x,y],target:z},children:[{type:a,value:"64 Robots"}]},{type:a,value:" so I am going to focus on this platform for now. Similar steps should be followed on other platforms like "},{type:b,tag:q,props:{href:"https:\u002F\u002Fnetlify.com\u002F",rel:[w,x,y],target:z},children:[{type:a,value:"Netlify"}]},{type:a,value:H}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"The idea here is to tell Vercel that use one specific subfolder of the monorepo for the deployment."}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"This is quite simple on Vercel. Just pick the subfolder when you are connecting the repository. Period.\n"}

1,{type:b,tag:_,props:{alt:"Vercel Deploy",src:"https:\u002F\u002Fuser-images.githubusercontent.com\u002F12644599\u002F120103515-42f79b80-c150-11eb-9ff3-cb07055e34a3.png"},children:[]}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"The tricky part would be not firing a deployment of the webapp when we merge stuff on the electron app, right?"}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"This can be done on Vercel using "},{type:b,tag:l,props:{},children:[{type:a,value:"Settings \u003E Git \u003E Ignored Build Steps"}]},{type:a,value:H}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"Adding this line "},{type:b,tag:l,props:{},children:[{type:a,value:"git diff HEAD^ HEAD --quiet ."}]},{type:a,value:f},{type:b,tag:_,props:{alt:"Ignored build steps",src:"https:\u002F\u002Fuser-images.githubusercontent.com\u002F12644599\u002F120103568-83571980-c150-11eb-8439-909e5708edef.png"},children:[]}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"That way, if the diff doesn’t contain any file on the working directory it would cancel the deployment like this\n"},{type:b,tag:_,props:{alt:"Cancelled build",src:"https:\u002F\u002Fuser-images.githubusercontent.com\u002F12644599\u002F120103595-a41f6f00-c150-11eb-8050-35832d044689.png"},children:[]}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"And that's all! You now have a fully configured monorepo 🎉."}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"Check the code of this example out on "},{type:b,tag:q,props:{href:"https:\u002F\u002Fgithub.com\u002Fbeliolfa\u002Fmonorepo-demo",rel:[w,x,y],target:z},children:[{type:a,value:"Github"}]},{type:a,value:H}]},{type:a,value:f},{type:b,tag:k,props:{},children:[{type:a,value:"If this post helped you or your company, consider buying me a piece of cake in "},{type:b,tag:q,props:{href:"https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fbeliolfa",rel:[w,x,y],target:z},children:[{type:a,value:"Github Sponsors"}]},{type:a,value:". Thank You 🥰."}]}]},dir:"\u002Fposts\u002Fmisc",path:"\u002Fposts\u002Fmisc\u002Fconfiguring-a-monorepo-with-yarn-workspaces-using-shared-components-github-actions-and-vercel-deployment",extension:".md",updatedAt:"2022-05-18T15:24:43.926Z",readingTime:"5 min read",permalink:$,language:"en"},error:{message:"",code:false}}],mutations:[]}}("text","element","span","token","punctuation","\n",":"," ","key","atrule","p","code","operator","\n ","property","string","a","\n   ","{",",","}","-","nofollow","noopener","noreferrer","_blank","div","nuxt-content-highlight","filename","pre","line-numbers","name","true",".","run",-1,"icon","icon-link","package.json","language-json","function","li",2,"h2","[","]","\"name\"","\"version\"","\"1.0.0\"","(",")","\n\n","img","configuring-a-monorepo-with-yarn-workspaces-using-shared-components-github-actions-and-vercel-deployment","yarn-workspaces","Yarn Workspaces","shared-workspace","Shared workspace","github-actions","Github Actions","vercel-deployment","Vercel Deployment","yarn install","\n  ","\"workspace-a\"","\"workspace-b\"","\n\n ","\"dependencies\"","\"cross-env\"","\"5.0.5\"","language-js","property-access","=","say","thing","console",".github\u002Fworkflows\u002Ftests-a.yml","language-yml"," Tests\n\n","on","pull_request","branches"," main ","jobs","Tests","runs-on"," ubuntu","latest\n\n   ","steps","uses"," actions\u002Fcheckout@v2\n   "," Install dependencies\n     "," yarn\n   "," Run test suite\n     "," yarn test\n","ol","Adding the ")));