Syncing Local Sistent with Meshery Cloud

Meshery
1

Hey there, Meshery developer! :waving_hand: Ever find yourself tweaking Sistent components and wishing you could instantly see those changes ripple through your local Meshery Cloud setup? This guide will walk you through the initial hook-up and then show you some slick workflows for keeping things speedy.

We’ll assume your sistent and meshery-cloud repositories are chilling out as sibling directories right in your home folder, like this:

  • ~/sistent
  • ~/meshery-cloud

And that Meshery Cloud’s UI code (the part that uses Sistent) lives in a ui folder inside your meshery-cloud project (something like ~/meshery-cloud/ui/) and has its own package.json file.

Part 1: Initial Setup - Using Your Local Sistent in Meshery Cloud

Let’s get your local Sistent talking to your Meshery Cloud UI. This is a one-time handshake.

  1. Build Sistent:
    First, give your Sistent masterpiece a fresh build. (Ensure make setup was run in sistent previously if it’s a fresh clone or dependencies changed).

    cd ~/sistent
make build

  2. Link Sistent to Meshery Cloud UI:
    Time to play matchmaker! Head over to Meshery Cloud’s UI directory. The npm install command here uses a relative path to your local sistent sibling.

    cd ~/meshery-cloud/ui
npm install ../../sistent

    This nifty command tells the package.json in ~/meshery-cloud/ui/ to look at your local Sistent spot (you’ll see something like "@layer5/sistent": "file:../../sistent"). Go ahead and peek at that package.json to confirm!

  3. Build Meshery Cloud UI:
    Pop back to the meshery-cloud root and let’s build its UI with your fresh Sistent goodness:

    cd ~/meshery-cloud
make ui-build

  4. Start Meshery Cloud Server:
    Fire up the engines! Still in the meshery-cloud root directory:

    make server-local

  5. Verify in Browser:
    Open Meshery Cloud (usually http://localhost:9876). Smash that hard refresh button (Ctrl+Shift+R or Cmd+Shift+R) and maybe even clear your browser cache. You should now see your Sistent tweaks live in action!

Part 2: Workflows for Ongoing Development

Alright, with the initial wiring done (file:../../sistent is cozy in meshery-cloud/ui/package.json), let’s make your day-to-day coding smoother. Here are some common scenarios:

A. Modifying Meshery Cloud’s Backend Server Logic (Go code)

Just tinkering with the Go backend in meshery-cloud and haven’t touched any UI files? Easy peasy.

  1. Navigate to the meshery-cloud root directory:
    cd ~/meshery-cloud
  2. Rebuild and restart the server. The make server-local command is pretty smart and should pick up your Go changes:
    make server-local

B. Modifying the Sistent Library

Back to tweaking those Sistent components? Here’s the drill:

  1. Whip up a new build of your updated sistent library:
    cd ~/sistent
make build
  2. Now, tell Meshery Cloud UI to grab these shiny new Sistent bits:
    cd ~/meshery-cloud
make ui-build
  3. Make sure the Meshery Cloud server is up and running (a quick make server-local if it was stopped, or just to be sure it serves the latest UI assets):
    make server-local
  4. Don’t forget this! Blast your browser with a hard refresh (and clear that cache) when you check out Meshery Cloud.

C. Modifying Meshery Cloud’s Own UI Code (e.g., files in meshery-cloud/ui/)

Changing the UI application code that uses Sistent, but not Sistent itself?

  1. Navigate to the meshery-cloud root directory:
      cd ~/meshery-cloud
  2. Rebuild the UI:
      make ui-build
  3. Ensure the server is running:
      make server-local
  4. Hard refresh your browser.

And there you have it! These workflows should help keep your local development smooth and zippy. Happy coding! :tada: