How to run express within electron?

node.js express npm electron

17,246

Packaging an Express Application in Electron

Firstly install electron in your app

npm install --save electron

Create an index.html file which contains your express application

We need a top level file which will load in our express application. If you are not using a module bundler like Webpack then simply import all the html, cs and js files that your app is dependent on into this index.html file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>QuickMap</title>
    <link href='public/css/boostrap.min.css' rel='stylesheet'>
    <link href='public/css/layout.css' rel='stylesheet'>
  </head>
  <body>
    <div id='root' />
    <script src='public/js/appBundle.js' type='text/javascript'></script>
    <script src='public/js/bootstrap.min.js' type='text/javascript'></script>
    <script src='public/js/jquery-3.1.1.min.js' type='text/javascript'></script>
  </body>
</html>

Make sure that this index.html files imports everything you need for your app to run -i.e all the necessary html, css, js and other files. Remember to include any external files that your app needs such as jQuery which we loaded in the example above.

An Aside - Packaging an Electron app that uses Webpack

In this example our entire Express app is represented by a Webpack bundle which is loaded by index.html.

Remember that you don't need to use Webpack to package Express apps with Electron. Just make sure that index.html loads in all the files you need that will launch your express application.

If you are using Webpack your bundle should be imported in this index.html file.

Here is an example index.html file that imports the webpack bundle which contains our express app.

Now create the electron config file in your project root that loads the index.html containing your Express app

Here is the main file that electron will use to launch itself. Al electron related configuration and the link to our express app (through importing the Webpack bundle) is contained here.

Note the file below belongs in our root project directory and is comprised mainly of boilerplate from the Electron quick start guide with the exception of the line explained above that imports our index.html file which loads the entire application.

main.js

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

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

The following line loads our index.html we created earlier which points our electron instance to the entry point of our application.

mainWindow.loadURL(`file://${__dirname}/index.html`)

Change the start script in your package.json to launch electron

 "scripts": {
    "start": "ENV=development electron .",
   },

Now when we run

npm start

Electron will automatically look for and run the main.js file in our project root.

17,246

Author by

code_legend

Updated on June 09, 2022

Comments

code_legend almost 2 years
I have been able to successfully run express within the electron app via repositories such as

https://github.com/theallmightyjohnmanning/electron-express

https://github.com/frankhale/electron-with-express

However, I was advised not to do so due to the GNU GENERAL PUBLIC LICENSE that they impose. I am trying to create a commercial app that will monetize. Hence, a liscene like MIT might do, but not sure about GNU.

Anyhow, I have been trying to follow his procedure: https://gist.github.com/maximilian-ruppert/a446a7ee87838a62099d

But is running into some issues. Heres what I have done so far.
```
# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start
```
Then to get express
```
$ express myapp
$ cd myapp

$ npm install
renamed myapp to just app
```
and now I am stuck at the part where i need to configure the electron main.js file or/and the render index.html file to link to the express app and have that run instead of the index.html

Any help would be appreciated.

I am running on windows 10.