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
