The fastest way to start the project is to use the React library and the Create React App tool. Follow these steps to get started:
- Run the following commands to generate a new React application called crypto-wallet:
npx create-react-app crypto-wallet
cd crypto-wallet
- Install the latest electron library with the following command:
npm install -D electron
As you already know, a typical Electron application requires a main entry in the package.json file. We are going to use the public/electron.js file so that we can create a distributable package without any effort.
- Update the package.json file and add the main entry:
{
"name": "crypto-wallet",
"version": "0.1.0",
"private": true,
"main": "public/electron.js",
// ...
}
The scripts for React applications usually reserve the start script in order to run the local development web server. You can use the electron script to run the desktop version.
- Append the electron command to the scripts section:
"scripts": {
"electron": "electron .",
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
The final thing we need to do is create an electron.js file with a minimal amount of code so that we can run the application window.
- Create the electron.js file with the following content in the public folder:
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);
That is pretty much all you need to do to have a minimal project configuration. From now on, you can test the web version by running the following commands in parallel Terminal or Command Prompts windows:
npm start
npm run electron
Once the application is up and running, you should see an Electron window that looks as follows:
Now that we've got the project scaffold up and running, let's integrate the Ant Design component library so that we can build our application quickly and make it look good.