live-package v0.9.1

Live Package

Work with your packages (design systems / component libraries etc) locally in your app with live reloading (where available)!

Tested and works with

• Create React App projects (when using the syncDependencies feature)
• Next.js (when using the syncDependencies feature)
• Most Webpack enabled projects

Why?

When developing a npm package you often want to test that it works in a real project. This is especially true when building something like a React component library or design system where you also want to verify that the design looks good on the page.

Npm has a tool called npm link that allows developers to create a symlink between your package and your apps node_modules folder, basically "tricking" your app into thinking the package have been installed even though it is somewhere else.

While npm link often works well for simple projects it can get cumbersome to use for more advanced projects since you need to run the command in multiple places. Another common problem to run into when using a framework or library such as react is that you accidentally include multiple copies of the framework / library causing many problems.

live-package solves both of these problems by introducing a very simple workflow where it can symlink and run everything for you in one place (the consuming app) and also supports symlinking dependencies back to your package (design system / component library etc) eliminating the problem with multiple or conflicting versions of your framework and libraries.

How

TODO

Install and Usage

Install in project

npm install live-package --save-dev

Initialize project

npx live-package init

Then follow the instructions by inputting the path to package folder (where the package package.json file is located) and optionally the name of a script that handles the watching / building of the package.

The CLI will then:

1. Create a live-package.json file with settings for your project and packages.

2. Add a start:lp script to your package.json for running your app together with a build script for your package (concurrently).

   Once done you can rename this script if you want to.

Enable linked package in your app

npx live-package on

This will symlink all required folders based on settings found in your live-package.json file.

Disable linked package

npx live-package off

Disables the linked package by removing and cleaning up symlinks, letting you get back to using a version of your package posted to npm etc.

List available CLI commands

live-package --help

Other great tools for locally developing libraries

• Yalc - Manually publish packages locally (but no live syncing)

Enjoy!