Now that you have got a working application, we need to install the Electron dependency and wire the Electron shell window with our code. Let's start by installing the library and updating the package file:

1. Run the following command to install the Electron dependency:

npm i electron

2. Update the package.json file and include the main property. Ensure that it points to the main.js file:

{
  "name": "ebook-generator",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",
  // ...
}

3. While you have the package.json file open, update the scripts section and add the electron script to invoke the shell:

"scripts": {
  "electron": "electron .",
  "start": "node scripts/start.js",
  "build": "node scripts/build.js",
  "test": "node scripts/test.js"
},

Now, you should be able to run the web server with the npm start command and launch the desktop shell with the npm run electron script.

4. Create the main.js file and include the following content:

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
    resizable: false
  });

  win.loadURL(`http://localhost:3000`);
}

app.on('ready', createWindow);

Now our project development environment is ready.

5. Try out the application by running the following commands in parallel console windows:

npm start
npm run electron

6. The application window should look as follows:

In this section, you have learned how to generate a new React project and install the famous Monaco Editor, which also backs Visual Studio Code. You have also configured the project for testing, both in the browser and in the Electron shell.

Now, we need to upgrade our code so that we can use the new React Hooks feature and load and save our files.