local dev env for Gui sketches and Custom GUI

this is not well documented. Some old instructions are here https://github.com/BelaPlatform/Bela/wiki/Developing-for-the-IDE but things have changed a fair bit since.

What I do normally when developing on the host after installing relevant modules:

• copy IDE/ide-dev.js.template to IDE/ide-dev.js and adjust relevant properties. In my case I have:

  exports.Bela = "/Users/giulio/Bela";
  exports.local_dev = true; // disables some checks/tasks that are unneeded or would generate an error if ran outside Bela
  exports.httpPort = 1080; // custom http port
  exports.board = "Bela"; // board (spoofed return value of board_detect)
  exports.motdPath = "motd"; // file used to infer Bela version

  (note that the last step involves copying /etc/motd from the board to the local IDE/ folder
• in a dedicated terminal, from IDE/ , run gulp local, leave it running
• in a dedicated terminal, from IDE/frontend-dev, run gulp local, leave it running
• open a browser on localhost:1080 . On file changes, the backend will be restarted if needed and the frontend needs to be refreshed (there are hooks for the livereload plugin, not sure they work)

If instead you want to run the IDE on the board, after installing relevant modules, do:

• rename or remove IDE/ide-dev.js to something else so it is doesn't affect the behaviour of the board if it is mistakenly copied to it
• in a dedicated terminal, from IDE/ , run gulp, leave it running
• in a dedicated terminal, from IDE/frontend-dev, run gulp, leave it running
• open a browser on bela.local/ . On source file changes, built files are copied to the board, the backend will be restarted if needed and the frontend needs to be refreshed (there are hooks for the livereload plugin, not sure they work).

As for the GUI, it currently expects a websocket at location.host:5555/gui_control, which on connection should send a new-connection event with event.detail.projName set to the project name, which in turn is used to load the sketch.js file from that project's canonical path. Look at IDE/public/gui/js/BelaControl.js and IDE/public/gui/js/GuiHandler.js (which is where I got this information from): you should be able to change them so that it loads the sketch from a given path so you don't need the websocket connection. In fact, looking at the code it would seem that you can already pass via query string project=MYPROJECT instead of expecting autodetection via the socket.

1) is there is a way to set up a local dev environment to test P5JS guis without having to upload the sketch to Bela. I couldn't find any reference on how to do that, but it would definitely speed up the process.

Why is it that it would speed up the process ? What is your workflow currently and what is slowing you down?

smarques is it possible to develop them on local computer without having to connect to the board and upload the sketch?

the answer was this:

giuliomoro it would seem that you can already pass via query string project=MYPROJECT instead of expecting autodetection via the socket.

I tried it and it kindof worked but it actually needed a small fix, so I recommend you pull the latest from the dev branch and use that.

Now, with the ide-dev.js mentioned above you can do gulp local in IDE/ and go to http://localhost:1080/gui?project=PROJECT_NAME and that will load the sketch.js that is in the project called PROJECT_NAME .
Notes:

• if you open up an example in the IDE, its PROJECT_NAME will be exampleTempProject.
• some sketches from the examples may show nothing or little if they don't have a Bela program running sending them data