Skip to content

[Docs] Improve and clarify npm link instructions in README (#999) #1082

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 75 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,70 +109,114 @@ This will remove the local Sistent package from your project. You will have to r
npm install @sistent/sistent
```

#### Method 2: Using `npm link`
#### Method 2: Using `npm link` for Local Development

1. Create a link of your local Sistent fork
The `npm link` workflow allows contributors to test their local changes in Sistent within projects like Meshery UI without publishing the package to npm. It creates a symbolic link from the global `node_modules` to your development version of Sistent, enabling fast feedback during development.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This description, of the npm link command is helpful, but I'm not sure what is new in this change, except this description, and the extra tips in the end. Could you explain maybe why you felt this change was necessary?


```
cd <path-to-sistent-on-local-machine>
---

npm link
```
### Step-by-Step Instructions

This creates a global symlink which points to the local Sistent fork.
1. **Build and globally link your local Sistent fork**

2. Link the local Sistent fork to your project
Navigate to your local Sistent repository and run:

```bash
make build # Compile the latest changes using Makefile
npm link # Create a global symlink for @sistent/sistent
```

2. **Link Sistent in the consuming project (e.g., Meshery UI)**

Go to the project where you want to use your local Sistent changes (e.g., Meshery UI):

```bash
npm link @sistent/sistent
```

3.Build your local Sistent fork
This command makes the consuming project use your local build of Sistent instead of the npm-published one.

After making changes to your fork, run this command in your local Sistent package.
3. **Make and reflect changes**

```
make build
Whenever you modify files in the Sistent repo:

```bash
make build # Rebuild to apply changes
```

4. Run the build command in the project where your local Sistent fork is installed.
Then, in the consuming project:

```
# example, Meshery UI
make ui-build
```bash
make ui-build # or equivalent build command
```

Now, your project should reflect changes from your local Sistent fork.
Your changes in Sistent will now be reflected in the consuming project.

5. Verify that your local Sistent fork has been correctly linked.
---

To verify that the correct link has been created, run this command:
### Verification Steps

```
npm ls -g
To confirm that the project is using the local link:

# Expected output:
# ├── @sistent/sistent@0.14.11 -> ./../../../../<path-to-local-sistent-fork>
```bash
ls -l node_modules/@sistent/sistent
```

To verify that the created link is correctly used in your project, run this command in the directory where you linked the Sistent fork:
This should show a symbolic link pointing to your local Sistent directory.

```
ls -l node_modules/@sistent/sistent
Check globally as well:

# Expected output:
# node_modules/@sistent/sistent -> ../../../../../sistent
```bash
npm ls -g --depth=0
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @yashodipmore, wouldn't it be better to not specify the --depth flag here?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

depth should equal 1

```

To revert back to the official package, first unlink the package, then install the official package using the following commands:
Expected output:

```bash
@sistent/[email protected] -> /path/to/your/sistent
```

---

### Revert to Official npm Package

If you want to stop using the local Sistent fork:

```bash
npm unlink @sistent/sistent
npm install @sistent/sistent
```

> [!NOTE]
> Avoid using `type any` in your code. Always specify explicit types to ensure type safety and maintainability.
Comment on lines -174 to -175
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please revert this back, as this is a general tip, not related to local sistent forks.

To remove the global link:

```bash
npm unlink --global @sistent/sistent
```

---

### Additional Developer Tips

- **Watch Mode:**
For faster iteration, run Sistent in watch mode to auto-rebuild on file changes:

```bash
make build-watch
```

- **Run once per setup:**
`npm link` is only needed once per environment. For future changes, just rebuild.

- **Use feature branches:**
Keep your local changes organized with Git branches to avoid confusion during testing.

- **Avoid stale builds:**
Always run `make build` in Sistent and `make ui-build` in Meshery after updates.

---

> This `npm link` workflow significantly reduces development time by allowing contributors to instantly validate UI or style changes made in Sistent across projects like Meshery.


<br/>

Expand Down