Developing Meshery UI in an online IDE like StackBlitz

After running the Meshery server on localhost:9081, I am starting a Meshery UI development server in StackBlitz using the following steps:

  1. Opening the forked Meshery GitHub repo and prefixing the url with pr.new/ to open the repo in the development environment in the browser itself in a matter of seconds.
  2. Installing the dependencies using the StackBlitz Terminal in three steps(from the root of the directory):
    a) cd ui; npm i; cd ..
    b) cd provider-ui; npm i; cd ..
    c) cd ui; npm run dev; cd ..
  3. This takes a few seconds and installs all the dependencies needed, and opens a server instantly.
  4. The issue is, this development UI server opened is not able to recognize what’s happening in the localhost:9081 server (where the Meshery server is running and I am logged in) and is not able to connect to the kubernetes cluster.

What can be done to connect the development server opened by StackBlitz and the Meshery server running on localhost:9081 ? Is it something to do with the target in the ui_dev_server.js file?

Note: The development server opened by StackBlitz is a webcontainer link and not exactly localhost:3000 as is common with StackBlitz.

@Annu.Singh StackBlitz being an online ide , it is not in sync with the local server that you are running on your local pc. Simply , stating it is not possible to connect both of them in this way , or I haven’t found a way still .

You have yourself stated the clear reason in the last line , stackblitz ui is not the exact localhost:3000 and more of it you need to be logged in with the server essentially to access ui components like patterns and design.

But my advice would be to start the ui and the server on your local pc itself . It will work considering that even codespaces currently don’t work due to a similar reason.

@Annu.Singh o add an additional suggestion to what @Kamal.Singh already said, you should check if StackBlitz has an integrated web browser. This will run the Localhost for you since it is the same instance.

Hi @Leonard , I think the problem is not that StackBlitz doesn’t deploy on localhost. I guess the problem is that how to make StackBlitz connect to some server already running on localhost. It might be the same scenario where there is a need to connect a localhost by its network url link? Maybe we can change the target in the ui_dev_server.js file and instead of localhost:9081, we can use the network link of the localhost:9081 ?