Login
Community
DARK THEME

Recipe: standalone microStudio app

Here is my current recipe to package a standalone app of microStudio. This is just an experiment for now as a few changes are also necessary in the code of microStudio itself. Currently the packaged microStudio will allow you to install an executable, which works without connection to internet and which renders 100% like the microStudio website. Of course some of the features do not really make sense in this context, like creating an account, having an empty Explore section (where you can "publish" your projects just for yourself)... There are thus a few changes to make, that will use a dedicated flag standalone: true in the config file probably. That's not the hardest part. The hardest part was to make microStudio fully work as an Electron app and it seems that we are almost there!

Also note that this is still very experimental. The projects you create in microStudio-standalone are actually stored somewhere but I have no idea where! I will fix that later by specifying a correct location for user files.

In order to create my Electron app, I used this tutorial:

https://www.electronjs.org/docs/latest/tutorial/quick-start

I also took inspiration from this example:

https://gist.github.com/maximilian-lindsey/a446a7ee87838a62099d

Make sure you have node / npm installed

Check that you have node and npm installed:

node -v
npm -v

Create the application

Create a folder, jump in it and initialize your project:

mkdir microstudio-standalone && cd microstudio-standalone
npm init

You will be asked for some information. Set main.js to be your entry point (it can be easily changed afterwards as well). Add an author and a description or you won't be able to package the app.

Install the electron npm:

npm install --save-dev electron

In the file "package.json", create the "start" command as follows:

{
  "scripts": {
    "start": "electron ."
  }
}

Clone microStudio

It is time to clone microStudio and install the packages it depends on:

git clone https://github.com/pmgl/microstudio.git
cd microstudio/server
npm install

Create file main.js

Back in the microstudio-standalone main folder, I created this main file for our app:


const electron = require('electron')
const { app, BrowserWindow } = electron

function createWindow (port) {
  const display = electron.screen.getPrimaryDisplay()
  const win = new BrowserWindow({
    width: display.size.width*0.8,
    height: display.size.height*0.8
  })

  win.webContents.on('new-window', function(e, url) {
    e.preventDefault();
    require('electron').shell.openExternal(url);
  });

  win.setMenu(null)
  win.loadURL('http://localhost:'+port)
}

app.whenReady().then(() => {
  var Server = require("./microstudio/server/server.js")
  var app_data = app.getPath("userData");
  var config = {
    "standalone": true,
    "app_data": app_data,
    "port": 31520
  } ;
  var server = new Server(config,function() {
    createWindow(server.PORT) ;
  }) ;
})

The code above does this:

  • when the app is ready, start the microStudio server (local server, running on port 31520)
  • once the server is started, create the application window and open it on http://localhost:31520

Once all this is done, you should be able to start the app in dev mode:

npm start

Package the app

Once this is working, you can package the app using electron-forge. First install electron-forge:

npm install --save-dev @electron-forge/cli
npx electron-forge import

On Linux systems (Ubuntu, Pi OS ...), you will probably need to install rpm before you can package the app. You do that as follows:

sudo apt install rpm

You can now run this to package your application:

npm run make

Problems:

  • I have a hard time creating a correct installer for Windows. Electron-forge wants you to use Squirrel.Windows. Squirrel claims to provide the best user experience by installing the software quickly without requiring any user interaction. The problem is that the install isn't really quick, it takes quite a long time, without any proper feedback to the user who will just think it failed.

For now I will just build a folder for Windows, you can run from there or install manually

This is all done as of today! (November 3rd)

  • set server to listen only to local requests httpserver.listen(port,"localhost") and add a callback to .listen(port,scope,callback)
  • set a callback on class Server to listen when the app is ready before launching the window
  • Solve node-canvas problem or maybe replace it with jimp
  • ensure all external links have _target="blank"
  • fix Explore and Community sections (links to microstudio.dev)
  • set a correct path for user files
  • auto-create standalone user
  • remove log-out features
  • remove publishing features
  • remove online collaboration features
  • find a proper installer for Windows
  • include translation exports to enable complete support for all languages

This is a great news, that standalone version is in development! Thank you for your hard work and good luck with further development! Take your time, don't be in haste! "Better later, but better", like people in my country says. Best regards! And one more time - thank you!

Recipes works as expected on windows. It will be a great have microStudio as stand alone software for local dev when no internet connection is available. If I can suggest a thing, I'd love to have it as a portable application, without the need to install it. Just run an exe that take care of everything and start to have fun.

I have updated the recipe, it's all working fine and the newest microStudio on Github is ready to produce the best standalone experience :-)

Post a reply

Progress

Status

Preview
Cancel
Post
Validate your e-mail address to participate in the community