Skip to main content

Electron@13 as a Gatsby.js Wrapper

Shenzhen, China

Github Repository


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 
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",
"dev:clean": "gatsby clean && gatsby develop -H",
"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();

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.