In this section, we are going to set up a web3.js library with our Electron application. web3.js is a collection of libraries that allow you to interact with a local or remote Ethereum node using an HTTP or IPC connection. You can find out more on the official documentation website: https://web3js.readthedocs.io.

Let's learn how to set up and integrate the web3 library with our Electron application and see how it works:

1. Install the web3 library with the following command:

npm i web3

2. Update the App.js file and add the following code to import the Web3 client, which works with port 7545, onto your local machine:

import Web3 from 'web3';
const web3 = new Web3('ws://localhost:7545');

function App() {
  console.log(web3);

  return (
    <div className="App">
      <Layout>
        <Header>Header</Header>
        <Layout>
          <Sider>Sider</Sider>
          <Content>Content</Content>
        </Layout>
        <Footer>Footer</Footer>
      </Layout>
    </div>
  );
}

Make sure you import the Web3 object at the top of the file; otherwise, you may get runtime errors.

The preceding code doesn't do much. Here, we created a new client and sent the instance to the console log output to see its contents. Right now, we need to ensure that the library works as expected.

3. Run the application and enable the developer tools. You should see the following output in the Console window:

As you can see, the console output contains a JavaScript object with multiple properties and methods. This means that our React application has the Web3.js library embedded inside it and is running on startup.

At this point, you are ready to make a cross-platform Electron application that utilizes the Ethereum protocols. The web3 library is up and running, and you are ready to make API calls against the locally running node.

In the next section, we are going to connect to the Ganache instance on our local machine and display information about the current Ethereum node.