Note: This post is a summary of information paraphrased from an excellent blog post by Christian Sepulveda.
Create the app and download the necessary dependencies.
create-react-app my-app
cd my-app
yarn add electron --dev
yarn add electron-builder --dev
yarn global add foreman # for process management
yarn installAdd electron-quick-start's main.js to src folder as electron-starter.js.
Make the mainWindow.loadUrl call look like this instead:
// load the index.html of the app.
const startUrl = process.env.ELECTRON_START_URL || url.format({
pathname: path.join(__dirname, '/../build/index.html'),
protocol: 'file:',
slashes: true
});
mainWindow.loadURL(startUrl);Create a file called electron-wait-react.js in src directory:
const net = require('net');
const port = process.env.PORT ? (process.env.PORT - 100) : 3000;
process.env.ELECTRON_START_URL = `http://localhost:${port}`;
const client = new net.Socket();
let startedElectron = false;
const tryConnection = () => client.connect({port: port}, () => {
client.end();
if(!startedElectron) {
console.log('starting electron');
startedElectron = true;
const exec = require('child_process').exec;
exec('npm run electron');
}
}
);
tryConnection();
client.on('error', (error) => {
setTimeout(tryConnection, 1000);
});Ensure that the name, description, author, and version fields of your package.json are filled out. Then make the package.json look like this at the bottom:
"homepage": "./",
"main": "src/electron-starter.js",
"scripts": {
"start": "nf start -p 3000",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"electron": "electron .",
"electron-start": "node src/electron-wait-react",
"react-start": "react-scripts start",
"pack": "build --dir",
"dist": "npm run build && build",
"postinstall": "install-app-deps"
},
"build": {
"appId": "com.electron.electron-with-create-react-app",
"win": {
"iconUrl": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
},
"directories": {
"buildResources": "public"
}
}Create a file called Procfile in the root folder of the app and put the following code in it:
react: npm run react-start
electron: npm run electron-startRun using:
yarn start
@Nahasean94 @mhebrard I think i got a solution.
So i tried just doing yarn dist: didnt work due to the build config specified here not being good enough now.
So i removed it completely and ran yarn dist again: (CRA is now supported by electron-builder so it makes its own proper config), but new problem.
The config looks for an electron.js file in the public folder to run the app.. so basically the electron-starter.js just without the devTools open. So i copied it into the public and renamed it to electron.js and ran yarn dist yet again. This time it worked, it builds the reactscript then the electron part, but be sure to wait for the process to be complete building everything. :D
So to tidy things up, just change the main entry point in your package.json to 'public/electron.js' and use that instead of the electron-starter.js that was in src folder just to avoid using 2 of the same files basically.
Hope this helps! :D