How to Set Up the Ideal Obsidian Plugin Development Workflow
Rapidly Develop Obisidian Plugins As You Would With Websites
Developing ObsidianMD plugins can be annoying. It’s not like developing websites, where all you have to do is run npm run dev and watch your creation show up athttp://localhost.
You have to do a bit of setup before you can have something similar with an Obsidian plugin.
Step 1: Create a Development Vault
To isolate your environment and ensure that the plugins and files of your production vaults don’t interfere or get interfered with by the plugin you’re developing, it’s best to create a fresh vault just for development.
You can create a new vault for every plugin or just one to handle all the plugins.
It would be best to store the vault in a folder not managed by cloud providers, like iCloud, Google Drive, Onedrive, or Dropbox. This is because you will be using Git within the vault’s files.
Example: user\obsidian\plugin-development-vault
Step 2: Create Your Plugin’s Repository and Clone it to Your Vault’s “plugins” Folder
Using an app like GitHub Desktop, you can specify where your local repository will be located.
The location where you have to place the repository is {your-vault}\.obsidian\plugins.
In most cases, the .obsidian folder will be hidden.
On Mac, you can use the shift+command+. shortcut to unhide hidden files and folders.
On Windows, you can view the instructions here.
Step 3: Run "npm run dev” In Your Plugin Repository
For Obsidian to recognize your plugin, it must have a main.js file. When you run npm run dev, the file will be generated.
npm run dev will run until canceled, so it will take any changes you make while running.
However, any time a change is made, you must exit your vault and re-enter it to refresh your plugin.
But that is not the ideal development workflow. We want to be like a modern website, where if you make a change, that change is immediately reflected in the plugin.
Thankfully, you can perform this extra step to get a hot reload.
(Extra) Step 4: Clone the “pjeby/hot-reload" Repository to Your “plugins” Folder
The link to the repository is here.
The main.js file is already generated, so all you have to do is clone the repository into the same location where your other plugins are located.
Any time you change your plugin’s code, it will almost always be immediately reflected in your plugin. Changes to meta information like that located in manifest.json may require closing and reopening the vault for it to be reflected.
Otherwise, you should see an alert that the hot-reload plugin has run any time you make a change.
The only caveat right now is that if you have a settings tab and you make a change, you will be kicked out of that tab each time.
Wrapping Up
And that is how you make Obsidian plugin development less migraine-inducing.
If this article helped you on your Obsidian plugin development journey, please be sure to leave a clap.
And if you have any pointers or feedback, don’t hesitate to leave a comment.
