<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Joaquim Monserrat Companys</title>
    <description>The latest articles on Forem by Joaquim Monserrat Companys (@jeremies).</description>
    <link>https://forem.com/jeremies</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F915998%2Fe94589f6-b128-4518-9cba-89fc46abadef.png</url>
      <title>Forem: Joaquim Monserrat Companys</title>
      <link>https://forem.com/jeremies</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/jeremies"/>
    <language>en</language>
    <item>
      <title>My Dev Multirepo Setup for JS projects with dependencies</title>
      <dc:creator>Joaquim Monserrat Companys</dc:creator>
      <pubDate>Wed, 17 Dec 2025 15:20:45 +0000</pubDate>
      <link>https://forem.com/jeremies/my-dev-multirepo-setup-for-js-projects-with-dependencies-2a4f</link>
      <guid>https://forem.com/jeremies/my-dev-multirepo-setup-for-js-projects-with-dependencies-2a4f</guid>
      <description>&lt;p&gt;Suppose that you work for a company that has 2 JS apps: AppX, and AppY. These apps have common dependencies: DepZ, DepW. In this article we'll review how to work in parallel features at the same time involving all these dependencies using the following tools:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;git worktrees&lt;/li&gt;
&lt;li&gt;zoxide: &lt;a href="https://github.com/ajeetdsouza/zoxide" rel="noopener noreferrer"&gt;https://github.com/ajeetdsouza/zoxide&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;ln (to create symbolic links)&lt;/li&gt;
&lt;li&gt;zellij: &lt;a href="https://zellij.dev/" rel="noopener noreferrer"&gt;https://zellij.dev/&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Cloning the original repos
&lt;/h2&gt;

&lt;p&gt;We create a root folder where all the projects will live:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkdir ~/multirepo
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then inside this folder we clone all the 4 projects:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git clone https://github.com/user/appx ~/multirepo/appx0
git clone https://github.com/user/appy ~/multirepo/appy0
git clone https://github.com/user/depz ~/multirepo/depz0
git clone https://github.com/user/depw ~/multirepo/depw0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Later we'll see why I'm adding the suffix 0 to all the folders.&lt;/p&gt;

&lt;h2&gt;
  
  
  zoxide
&lt;/h2&gt;

&lt;p&gt;After installing zoxide and setting the following alias in ~/.bash_aliases:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  alias cd='z'
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now I can jump to AppX with the following command&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd appx0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;no matter which was the previous location.&lt;/p&gt;

&lt;p&gt;If AppX in reality has name AwesomeAppX, we'll try to simplify the name to &lt;code&gt;appx0&lt;/code&gt; for navigating with fewer keystrokes to the desired directory. And is important that the string &lt;code&gt;appx0&lt;/code&gt; is unique in all my filesystem, if not zoxide can jump you to a wrong location.&lt;/p&gt;

&lt;h2&gt;
  
  
  git worktree
&lt;/h2&gt;

&lt;p&gt;Now suppose that I have to work in AppX feature/A but we don't need to modify depZ neither depW. I'll create one worktree with the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd appx0
git worktree add ../appx1 -b feature/A
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;appx0 was at branch develop, and with the previous command we create a new directory with a new branch checked out into it. Now we can work with appx1 and develop the featureA.&lt;/p&gt;

&lt;p&gt;We'll never work with worktree 0, this is the parent worktree (but you can if you want). These worktrees should be checked out at develop or master, and from these worktrees we'll create the other ones (1,2,3...).&lt;/p&gt;

&lt;p&gt;In this way we can work with several features in parallel. And we have a unique git repo (stored at appx0) where all the commits and branches are stored.&lt;/p&gt;

&lt;h2&gt;
  
  
  worktrees + links
&lt;/h2&gt;

&lt;p&gt;Now suppose that you have to work in a feature/B and that is required to modify depZ together with appX.&lt;/p&gt;

&lt;p&gt;No problem at all, we'll create the following worktrees to work with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd appx0
git checkout develop
git worktree add ../appx2 -b feature/B

cd depz0
git checkout develop
git worktree add ../depzx2 -b feature/B
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here depz has the suffix x2 intentionally, because we want to remember that appx2 is linked with depzx2. But you can follow a different naming if you want.&lt;/p&gt;

&lt;p&gt;For listing all our current worktrees together with the branches they are checked out we can run the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd multirepo

for d in */; do
  (cd "$d" &amp;amp;&amp;amp; echo "$d" &amp;amp;&amp;amp; git worktree list)
done
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To link depz with appx, we'll use symbolic links:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd appx2
npm install
rm -rf node_modules/depz
ln -s "../../depzx2" "node_modules/depz"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If we have configured our build tools to handle symbolic links, all will work as expected. Here you have some configurations that you have to tune if your build tools doesn't work well with symbolic links:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://webpack.js.org/configuration/cache/" rel="noopener noreferrer"&gt;https://webpack.js.org/configuration/cache/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://webpack.js.org/configuration/resolve/#resolvesymlinks" rel="noopener noreferrer"&gt;https://webpack.js.org/configuration/resolve/#resolvesymlinks&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Anytime we can run these command to know if appx2 has some links active:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ls -la node_modules | grep depz
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To see all the build tools of the dependencies plus the main apps working together, it is usefull to use Zellij (&lt;a href="https://zellij.dev/" rel="noopener noreferrer"&gt;https://zellij.dev/&lt;/a&gt;).&lt;/p&gt;

&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://tldr.sh/" rel="noopener noreferrer"&gt;https://tldr.sh/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/meenachan101/git-worktree-your-ticket-to-parallel-development-paradise-3242"&gt;https://dev.to/meenachan101/git-worktree-your-ticket-to-parallel-development-paradise-3242&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>git</category>
      <category>productivity</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
