Skip to main content

Electron@13 as a Gatsby.js Wrapper

Shenzhen, China

Github Repository

Installation​

I want to use Electron@13 as a wrapper for an Gatsby.js project. For this I am going to set up a Carbon Design starter and add the latest version of Electron to it:

npx gatsby new electron-carbon https://github.com/carbon-design-system/gatsby-starter-carbon-theme 
cd electron-carbon && npm install --save-dev electron@latest concurrently wait-on

Add a few scripts to the scripts section of the package.json file to be able to start Electron with npm:

"scripts": {
    "build": "gatsby build",
    "build:clean": "yarn clean && gatsby build",
		"build-client": "npm run build && npm run serve",
    "clean": "gatsby clean",
    "dev": "gatsby develop -H 0.0.0.0",
    "dev:clean": "gatsby clean && gatsby develop -H 0.0.0.0",
		"electron": "electron .",
    "serve": "gatsby serve",
		"start": "concurrently --kill-others \"npm run build-client\" \"wait-on tcp:9000 && npm run electron\""
  },

Preparing Electron​

Let's now create the index file index.js that the start script above is expecting:

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

function createWindows() {
  let welcomeWindow =  new BrowserWindow();
  welcomeWindow.loadURL('http://localhost:9000');
}

app.on('ready', createWindows);

To test if this is working run those commands in one terminal:

npm run build && npm run server

And in a second terminal run the Electron process once you can see that the page is being served on localhost:9000:

npm run electron

Electron@13 Gatsby Wrapper

It is working!

Running the Electron App​

Now we can use our npm Start script to start electron and have it serve the Gatsby build:

npm run start

This will re-run the built, serve the build content and then start Electron to wrap your Gatsby page.