Linking folders for synced testing and development

When developing plugins for other software, I often have two files or folders I need to keep in sync that exist in different places in my hard drive. A git folder (where I do my development), while also having a specific location in the parent software’s application folder that I need to compile my code into.

ie. I’ll develop a plugin for Obsidian on D drive, but every time I save and compile it I need the output to go the Obsidian’s plugin folder on C drive.

This process can be streamlined using Symbolic links—Which this article will demonstrate.

The article won’t look at how to have your parent program automatically refresh the plugins it’s aware of, so you may still have to restart each time, but automatically linking the correct files is a great first step.

If you’re still figuring out your process, this “develop in one spot, test in another” requirement can sometimes mean compiling your code and then manually copying the compiled code into the right folder. For instance, an Obsidian plugin needs to be copied into Obsidian’s plugin folder, or an After Effects script needs to be copied into the AE scripts folder.

This can really slow down your development. And Symbolic Links will help us reduce the friction.

The setup

I often create plugins for the note taking app Obsidian, so I’ll use this as an example, however, the core of this technique will apply to any other software you’re working with.

When developing for Obsidian, I will often have a Github repository that is npm managed, and so while I am editing the code, I often run the command npm run dev in my environments to have Webpack automatically monitor and recompile any code whenever changed. The compiled code will then be placed into a dist folder within the Github project’s folder.

This means that the dist folder contains the files that I need to repeatedly copy into the Obsidian plugins folder—Which is in a different location.

The commands and folder may be different for you if you aren’t running Webpack or npm, or if you’ve customised your npm scripts or if you aren’t using a compiler at all. So be sure to adapt this article to your setup.

The solutions

Instead of copying the files each time, we can make a Symbolic Link out of the folder that contains our files.

A Symbolic Link is like a shortcut that you can place in another location, but when accessed, will show the contents from the original location.

For instance, we can create a Symbolic Link of our dist folder, put it in the Obsidian plugin directory. Anytime Obsidian tries to access it, Obsidian will see all of our files from dist in our project folder. They’ll always be up to date, because it’s only linking to it, rather than copying over files. As far as Obsidian and the file system is concerned, it treat’s them as the same same folder.

On Mac

Open a terminal window and type in the following commands.

cd intended-folder
ln -s path-to-dist

In the above commands…

• cd intended-folder changes the folder your terminal is in to where you want your symbolic link to live. You need to change this text to the absolute reference to the correct folder (ie. The Obsidian plugins folder). The easiest way to replace this is to delete it and simply drag the folder into the terminal window.
• ln -s tells the system to create a Symbolic Link
• path-to-dist is where you specify what folder you want to create a link to. You should replace “path-to-dist” with the absolute path to your dist folder (or whatever folder holds the code you want to link in).
• ./ tells the system to create the link in the current folder that your terminal is open in.

The best way to replace the paths above is to highlight the path placeholder text and then drag and drop the folder from a finder window onto the terminal window—This will automatically create an absolute path rather than a relative one.

Once you run those commands, open a finder window to the folder you ran it from, you should see a dist folder there (or whatever folder you created a link for). It’s a Symbolic Link but will act just like the original folder, so changing anything in here will affect the original folder, and vice versa.

You should rename it from dist to represent your project’s name. If you happened to create it in the wrong place, you can also just move it.

Note that if you used a relative path instead, moving the link will break it’s reference to the original folder, so it’s better to use an absolute path like mentioned above.

On Windows

Open a Command Prompt window and type in the following commands.

cd intended-folder
mlink /D name path-to-dist

In the above commands…

• cd intended-folder changes the folder your terminal is in to where you want your symbolic link to live (ie. The Obsidian plugins folder).
   
• mlink /D tells the system to create a Symbolic Link
• name is the name you want for the new link. Change this to whatever you want, it doesn’t have to match the original file or folder. Use double quotation marks if you need a space in between.
• path-to-dist is where you specify what folder you want to create a link to. You should replace “path-to-dist” with the absolute path to your dist folder (or whatever folder holds the code you want to link in).
• ./ tells the system to create the link in the current folder that your Command Prompt is open in.

The best way to replace the paths above is to highlight the path placeholder text and then drag and drop the folder from an explorer window onto the Command Prompt window—This will automatically create an absolute path rather than a relative one.

Once you run those commands, open a finder window to the folder you ran it from, you should see a dist folder there (or whatever folder you created a link for). It’s a Symbolic Link but will act just like the original folder, so changing anything in here will affect the original folder, and vice versa.

Note that if you used a relative path instead, moving the link will break it’s reference to the original folder, so it’s better to use an absolute path like mentioned above.

That’s it!

Now, each time you compile your project, you don’t have to worry any more about copying the files to your apps plugin directory—It’ll now have a live link to where the files get compiled.

I’d love to know if any of these articles helped you.
Share what you’re building or ask me a question on Threads or somewhere else.

Here are some other things you might like

• Extracting the extension from a filename string
• Register a new file type in Obsidian
• Transparent React Native iFrames/WebViews