kwhinnery/main.js

## main.js
const path = require('path');
const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 1280,
    height: 720,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  win.loadFile(path.join(__dirname, 'public', 'index.html'));

  win.webContents.openDevTools();
}

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

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  });
});

## package.json
{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "concurrently 'npm:watch' 'npm:electron'",
    "electron": "electron .",
    "watch": "webpack --watch",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Kevin Whinnery",
  "license": "UNLICENSED",
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.19.3",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^8.2.5",
    "concurrently": "^7.4.0",
    "css-loader": "^6.7.1",
    "electron": "^21.1.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

## public_index.html
<html>
<head>
  <meta charset="UTF-8">
  <title>Hi</title>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

## src_index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './app/App.jsx';

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);

## webpack.config.js
const path = require('path');

module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  devtool: 'cheap-module-source-map',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public'),
  },

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
        ],
      },

      {
        test: /\.(jsx|js)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                "targets": "defaults"
              }],
              '@babel/preset-react'
            ]
          }
        }]
      }
    ],
  },
};
	const path = require('path');
	const { app, BrowserWindow } = require('electron');

	function createWindow() {
	const win = new BrowserWindow({
	width: 1280,
	height: 720,
	webPreferences: {
	preload: path.join(__dirname, 'preload.js')
	}
	});

	win.loadFile(path.join(__dirname, 'public', 'index.html'));

	win.webContents.openDevTools();
	}

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

	app.whenReady().then(() => {
	createWindow();

	app.on('activate', () => {
	if (BrowserWindow.getAllWindows().length === 0) createWindow()
	});
	});
	{
	"name": "project",
	"version": "1.0.0",
	"description": "",
	"main": "main.js",
	"scripts": {
	"start": "concurrently 'npm:watch' 'npm:electron'",
	"electron": "electron .",
	"watch": "webpack --watch",
	"build": "webpack",
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "Kevin Whinnery",
	"license": "UNLICENSED",
	"devDependencies": {
	"@babel/core": "^7.19.3",
	"@babel/preset-env": "^7.19.3",
	"@babel/preset-react": "^7.18.6",
	"babel-loader": "^8.2.5",
	"concurrently": "^7.4.0",
	"css-loader": "^6.7.1",
	"electron": "^21.1.0",
	"style-loader": "^3.3.1",
	"webpack": "^5.74.0",
	"webpack-cli": "^4.10.0"
	},
	"dependencies": {
	"react": "^18.2.0",
	"react-dom": "^18.2.0"
	}
	}
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hi</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="bundle.js"></script>
	</body>
	</html>
	import React from 'react';
	import ReactDOM from 'react-dom/client';
	import './index.css';
	import App from './app/App.jsx';

	const root = ReactDOM.createRoot(document.getElementById('app'));
	root.render(<App />);
	const path = require('path');

	module.exports = {
	mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
	devtool: 'cheap-module-source-map',
	entry: './src/index.js',
	output: {
	filename: 'bundle.js',
	path: path.resolve(__dirname, 'public'),
	},

	module: {
	rules: [
	{
	test: /\.css$/i,
	use: [
	// Creates `style` nodes from JS strings
	"style-loader",
	// Translates CSS into CommonJS
	"css-loader",
	],
	},

	{
	test: /\.(jsx\|js)$/,
	include: path.resolve(__dirname, 'src'),
	exclude: /node_modules/,
	use: [{
	loader: 'babel-loader',
	options: {
	presets: [
	['@babel/preset-env', {
	"targets": "defaults"
	}],
	'@babel/preset-react'
	]
	}
	}]
	}
	],
	},
	};