How to Test Sistent Components for Development Environment

I am trying to make changes to tooltip sistent component and I was wondering how to see my changes in a development environment.

1 Like

@Sparsh_Jain
Linking your local Sistent fork with Meshery (or any other Layer5 repository)

Step 1:
In your local Sistent repository, run npm link. This makes your local version of Sistent available globally for linking with other projects.

Step 2:
Navigate to your Meshery or Layer5 repository and run npm link @sistent/sistent.
This command connects your local Sistent library to your Meshery repository, allowing you to test your changes directly.

Step 3:
To verify the connection, run npm ls -g.
You should see an output similar to:
@sistent/sistent@0.14.11 → ./../../../..<path-to-local-sistent-fork>
Alternatively, you can check by running ls -l node_modules/@sistent/sistent, which should show a symbolic link pointing to your local Sistent folder.

Step 4:
After confirming the link, make your desired changes in the Sistent repository and run make build to rebuild the library.

Step 5:
Next, run the Meshery or Layer5 repository (for example, make ui-build).
You should be able to see your local Sistent changes reflected in Meshery.
For instance, if your modifications were related to the Tooltip component, you can verify those changes directly within the Meshery UI.

Step 6:
Once your testing is complete, unlink the repositories by running npm unlink @sistent/sistent inside the Meshery repository.
Finally, reinstall the original Sistent library using npm install @sistent/sistent.

1 Like

@Sparsh_Jain Just checking in to see if the steps worked out on your side.

It did work for layer5 website but it doesn’t seem to work with meshery UI. None of the changes I make are reflected there

First, you need to link it to Meshery UI and Provider UI, just like you do for Layer5. After that, rebuild it in sistent whenever you make changes. Then, in Meshery, run make ui-build and make server, and you’re good to go.

Go to cd ui and CD provider-ui run npm install sistent path in local and it will replace sistent version with path in package.json

Okay I will give it a go, and get back to you.

I found that if you use make ui-build command it will for some reason unlink the local sistent repo. For me using make ui-server did work.

I don’t think it unlink the local sistent. Because it works for me

Thank you for raising this topic, @Sparsh_Jain. We have a longstanding need for a solid answer here. Certainly, testing some components is more of a challenge than other components, given the need for backend APIs and data to be available.

An aspect of what would be helpful here is to create a couple categories of components: those requiring data and that must be compiled and run inside of a larger application (e.g. Meshery UI, Kanvas, Cloud UI) and those that can be tested standalone. Ideally, we will have a standard way of providing mock APIs and mock data to ease the level of burden of testing.