Reference Build Differences

A big convenience feature for MEME is to provide a self-contained "double-click to run" app that deploys the MEME webapp.

There are two sets of webpack files:

• one for the electron app (loaded into the electron main window)
• one for the webapp being (served to connecting browsers)

There are three different runtime configurations, each which require a different server host to serve the webapp.

• dev - For working on the core web application within the node environment. webpack-dev-server is used
• electron - For testing the core web application within the electron environment
• app - For testing the packaged electron app as a standalone app

We use Webpack to provide the different server configurations. Each runtime is launched using our meme command-line tool via npm run <script>, where <script> isdev, electron, or app. Webpack is invoked in one of three different ways depending where the web server needs to live and how it can access its working source files.

Dev Mode

For working on the core web application within the node environment. webpack-dev-server is used

npm run dev

• runs git via shelljs to show the current branch information
• uses ip package to show the connection URL for clients
• runs webpack-dev-server.js directly from node_modules, passing --mode development and env HMR_MODE='wds' using --inline and --hot and --host 0.0.0.0 with webpack.webapp.config.js.
• URSERVER.InitializeNetwork();
• URSERVER.StartNetwork();

Since webpack-dev-server is implementing the webserver, we need to find a way to hook into it with our own custom listeners.

There are two solutions that I see (from this post):

• Launch both webpack-dev-server on port 3000 and another server on port 3001. Change webpack config devServer.proxy = { '^/api/*': { target: 'http://localhost:3001/api/', secure: false } }
• Use webpack-dev-middleware, webpack-hot-dev, and webpack manually, as we already do in the other modes.

The second one seems easier.

Electron Mode

For testing the core web application within the electron environment

npm run electron

• runs webpack.js directly from node_modules, passing --mode development and env HMR_MODE='electron' with webpack.console.config.js which creates a bundle and copies all files to the ./built directory.
• run electron binary, passing ./built/console/console-main to tell it which file to start running.
• console-main.js loads module console-wds.js which detects whether its running in a packaged app or as a test electron environment. This mode is the test electron.
  • uses 'webpack.webapp.config' with webpack to make the app bundle
  • creates an 'app' instance of Express().
  • uses 'webpack-dev-middleware' to launch the webserver server. The middleware object is passed to the Express app
  • uses 'webpack-hot-middleware' to implement livereload on the webserver.
  • maps '/' to the build path (docroot)
  • app.listen() on port 3000 for web connections
• console-main.js also runs URSERVER.InitializeNetwork() and StartNetwork().

To add our webservice, we can hook into the app instance.

App Mode

For testing the packaged electron app as a standalone app

npm run app

same as electron mode. all server functions are handled through console-wds.

• skips the compilation on-the-fly through the webpack and the middleware tools, and uses the pre-built files packaged into the binary itself.
  • app.listen() on port 3000 for web connections

To add our webservice, we can hook into the app instance.