Electron & React Config

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

readme.md

Electron + React Configuration

A template for building an electron app with react.

Using

Important: If you are using npm instead of yarn, change the references in the package.json scripts from yarn build to npm run build.

1. yarn install
2. yarn dev (yarn start runs the react on localhost:8080)

Folder structure

/app   - react code
/build - electron-builder output
/dist  - webpack output
/resources
    /assets - build icons
/public - static files (html,css,images,etc.)

Sources:

• https://www.valentinog.com/blog/babel/
• https://www.codementor.io/randyfindley/how-to-build-an-electron-app-using-create-react-app-and-electron-builder-ss1k0sfer

electron.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

const os = require('os');
const path = require('path');
const isDev = require('electron-is-dev');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 900,
    height: 680,
    webPreferences: {
      nodeIntegration: true
    }
  });
  mainWindow.loadURL(isDev ? 'http://localhost:8080' : `file://${path.join(__dirname, './dist/index.html')}`);
  if (isDev) {
    // Add React DevTools
    BrowserWindow.addDevToolsExtension(path.join(os.homedir(), '.config/google-chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/3.6.0_0/'));
    
    // Open the DevTools
    mainWindow.webContents.openDevTools();
  }
  mainWindow.on('closed', () => mainWindow = null);
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

package.json

{
  "name": "musia-electron",
  "description": "A music listening app",
  "homepage": "https://b3u.netlify.com",
  "version": "0.1.0",
  "main": "electron.js",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:8080 && electron .\"",
    "build": "webpack --mode production",
    "pack-all": "yarn build && electron-builder build -mwl",
    "pack-linux": "yarn build && electron-builder build --linux",
    "pack-mac": "yarn build && electron-builder build -m",
    "pack-win": "yarn build && electron-builder build --win --x64"
  },
  "author": "Binyamin Aron Green <[email protected]> (https://b3u.netlify.com)",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "concurrently": "^4.1.1",
    "css-loader": "^3.1.0",
    "electron": "^6.0.0",
    "file-loader": "^4.1.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "wait-on": "^3.3.0",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6",
    "electron-builder": "^21.2.0",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "electron-is-dev": "^1.1.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "build": {
    "appId": "com.b3u.netlify.${name}",
    "productName": "Musia",
    "copyright": "Copyright © 2019 ${author}",
    "linux": {
      "target": "deb"
    },
    "mac": {
      "category": "public.app-category.utilities"
    },
    "win": {
      "target": "msi"
    },
    "files": [
      "electron.js",
      "build/**/*",
      "dist/**/*",
      "node_modules/**/*"
    ],
    "directories": {
      "output": "build",
      "buildResources": "resources/assets"
    }
  }
}

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  devtool: 'source-map',
  entry: "./app/index.js",
  target: "electron-renderer",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      },
      {
        test:/\.(s*)css$/,
        use:[MiniCssExtractPlugin.loader,'css-loader?sourceMap', 'sass-loader?sourceMap']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
          use: ['file-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].bundle.css",
      chunkFilename: "[id].css"
    })
  ]
};