main.js

const electron = require('electron')
const app = electron.app
const appVersion = app.getVersion()
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const DevtoolBackend = require('overmind-devtools-client/DevtoolBackend')
const storage = require('electron-json-storage')

process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true'

function createWindow() {
  const mainWindow = new BrowserWindow({
    icon: path.resolve('icons', 'icon.png'),
    height: 768,
    width: 768,
    minHeight: 500,
    minWidth: 500,
  })

  const devtoolBackend = DevtoolBackend.create({
    onRelaunch() {
      app.relaunch()
      app.quit()
    },
    storage,
  })

  function openDevtools(port) {
    if (process.env.NODE_ENV === 'production') {
      mainWindow.loadURL(
        'data:text/html;charset=UTF-8,' +
          encodeURIComponent(devtoolBackend.getMarkup('bundle.js', port)),
        {
          baseURLForDataURL: `file://${path.resolve()}/devtoolsDist/`,
        }
      )
    } else {
      mainWindow.loadURL('http://localhost:8080')
      mainWindow.webContents.openDevTools()
    }
  }

  function startDevtoolBackend() {
    return new Promise((resolve) => {
      storage.get('port', (_, port) => {
        port = typeof port === 'string' ? Number(port) : 3031

        devtoolBackend
          .connect(port)
          .then(() => resolve(port))
          .catch(() => {
            mainWindow.loadURL(
              'data:text/html;charset=UTF-8,' +
                encodeURIComponent(
                  devtoolBackend.getChangePortMarkup(
                    port,
                    function onPortSubmit(newPort) {
                      const { ipcRenderer } = require('electron')

                      ipcRenderer.send('newPort', newPort)
                    },
                    function onRestart() {
                      const { ipcRenderer } = require('electron')

                      ipcRenderer.send('restart')
                    }
                  )
                ),
              {
                baseURLForDataURL: `file://${path.resolve()}/devtoolsDist/`,
              }
            )
          })
      })
    })
  }

  mainWindow.on('closed', () => app.quit())
  electron.ipcMain.on('newPort', (_, port) => {
    storage.set('port', port, () => {
      startDevtoolBackend().then(openDevtools)
    })
  })
  electron.ipcMain.on('restart', () => {
    app.relaunch()
    app.quit()
  })

  electron.Menu.setApplicationMenu(
    electron.Menu.buildFromTemplate([
      {
        label: 'Application',
        submenu: [
          { label: 'Overmind Devtools v' + appVersion },
          { type: 'separator' },
          {
            label: 'Debug',
            click() {
              mainWindow.openDevTools()
            },
          },
          {
            label: 'Learn More',
            click() {
              require('electron').shell.openExternal('https://overmindjs.org')
            },
          },
          {
            label: 'License',
            click() {
              require('electron').shell.openExternal(
                'https://github.com/cerebral/overmind/blob/master/LICENSE'
              )
            },
          },
          { type: 'separator' },
          { role: 'quit' },
        ],
      },
      {
        label: 'Edit',
        submenu: [
          { role: 'undo' },
          { role: 'redo' },
          { type: 'separator' },
          { role: 'cut' },
          { role: 'copy' },
          { role: 'paste' },
          { role: 'selectall' },
        ],
      },
    ])
  )

  startDevtoolBackend().then(openDevtools)
}

// 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)