rebuiltron 5.0.0 → 6.0.1

package/README.md

@@ -9,7 +9,7 @@ A tool made to easily build an offline **React/Electron** app using webpack.
 The idea behind Rebuiltron was to migrate one of my project initially created with the deprecated [CRA](https://create-react-app.dev/) to a maintained tool configured with Electron in mind. As such, it has been developed using [react-scripts](https://github.com/facebook/create-react-app/tree/main/packages/react-scripts) as a base, but heavily edited and stripped of a lot of features.
 
 > [!IMPORTANT]
-> Since I made Rebuiltron specifically for one of my own projects, I only kept in the configuration what *this* project needed and nothing more. Except for the entry points and some SASS options, **Rebuiltron doesn't offer any configurable options**. If you are looking to create a new Electron/React app, or even migrating an existing CRA app, you should probably take a look at [electron-vite](https://electron-vite.org/) instead.
+> Since I made Rebuiltron specifically for one of my own projects, I only kept in the configuration what *this* project needed and nothing more. Except for the entry points and some basic options, **Rebuiltron doesn't offer many configurable options**. If you are looking to create a new Electron/React app, or even migrating an existing CRA app, you should probably look for a more generic tool.
 
 
 ## Features
@@ -20,10 +20,10 @@ Rebuiltron uses webpack with [SWC](https://swc.rs/) to compile JavaScript instea
 - Development server taking care of starting Electron
 - Production bundler for React and Electron code
 - Support for React, JSX, SASS, ICSS
-- Support for ESM
+- Support for ES6 imports on all processes
 
 > [!WARNING]
-> Rebuiltron **doesn't support**: TypeScript, Flow, CSS Modules, Jest, and proxying.
+> Rebuiltron **doesn't support**: TypeScript, Flow, CSS Modules, ESM, Jest, and proxying.
 
 
 ## Installation
@@ -36,7 +36,7 @@ yarn add rebuiltron -D
 
 ## Configuration
 
-The following documentation assume you already have a basic knowledge of how to use React and Electron.
+The following documentation assumes you already have a basic knowledge of how to use React and Electron.
 
 ### Folder structure
 
@@ -56,12 +56,14 @@ Set the main Electron entry in `package.json`:
 
 ```json
 {
-  "main": "electron/main.js",
+  "main": "build/static/js/electron.main.js",
 }
 ```
 
+This field points to the compiled version of the main file and **must** be named as above. Your original main file can be named however you want.
+
 ### Scripts
-Add Rebuiltron scripts:
+Add Rebuiltron scripts to your `package.json`:
 
 ```json
 {
@@ -84,12 +86,13 @@ Add your desired [browserslist](https://github.com/browserslist/browserslist) in
 
 ### Configuration file
 
-At the root of your project, create a `rebuiltron.config.cjs` file.
+At the root of your project, create a `rebuiltron.config.js` file.
 
 #### Options:
 
-| Option | Type | Required | Description |
+| Name | Type | Required | Description |
 | --- | :---: | :---: | --- |
+| `main` | `string` | ✓ | Main entry. The path must be relative.
 | `renderers` | `object` | ✓ | Renderer entries. It takes the name of the entries as keys and their paths as values. All paths must be relative. |
 | `preloads` | `object` | ✓ | Preload entries. It takes the name of the entries as keys and their paths as values. All paths must be relative. |
 | `srcAlias` | `string` | ✗ | Custom [alias](https://webpack.js.org/configuration/resolve/#resolvealias) to the `src` folder.
@@ -104,12 +107,13 @@ At the root of your project, create a `rebuiltron.config.cjs` file.
 
 ```js
 module.exports = {
+  main: "./electron/main.js",
   renderers: {
     app: "./src/app.js",
     worker: "./src/worker.js"
   },
   preloads: {
-    worker: "./electron/preloads/worker.js"
+    app: "./electron/preloads/app.js"
   },
   srcAlias: "@app",
   sassOptions: {
@@ -124,14 +128,27 @@ module.exports = {
 > [!NOTE]
 > Your renderers entry file(s) will be automatically injected into your HTML file(s). Thus, make sure you have a corresponding HTML file in the `public` folder for each entry (using the same name).
 
+### Preloads
+
+Since Rebuiltron will build the preload file(s) both in development and production, you can use a single path for both environment. Built files use the names declared in your configuration: `electron.preload.[name].js`.
+
+```js
+const appWindow = new BrowserWindow({
+  webPreferences: {
+    // Using the example configuration file above
+    preload: path.join(__dirname, "electron.preload.app.js"),
+  }
+});
+```
+
 ### Environment variables
 
 When the development server is running, Rebuiltron exposes a `DEV_LOCAL_URL` variable that you can access on your main process using `process.env.DEV_LOCAL_URL`.
 
 ```js
-if(!app.isPackaged) {
-  appWindow.loadURL(`${process.env.DEV_LOCAL_URL}/index.html`);
-}
+app.isPackaged
+  ? appWindow.loadFile(join(__dirname, "../../app.html")) // Prod
+  : appWindow.loadURL(`${process.env.DEV_LOCAL_URL}/app.html`); // Dev
 ```
 
 ## Usage

package/configurations/base.js

@@ -1,22 +1,12 @@
 const { createHash } = require("crypto");
 
-const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
-const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
 const TerserPlugin = require("terser-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
-const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
-const CopyPlugin = require("copy-webpack-plugin");
 
 const paths = require("../helpers/paths");
-const { shouldUseSourceMap, isEnvDevelopment, isEnvProduction } = require("../helpers/environment");
+const { isEnvDevelopment, isEnvProduction } = require("../helpers/environment");
 const { emptyOr } = require("../helpers/utils");
-const imageLoaders = require("../loaders/images");
-const styleLoaders = require("../loaders/style");
-const javascriptLoaders = require("../loaders/javascript");
-const rebuiltronConfig = require("../rebuiltronConfig");
 
 
 const { srcAlias } = require(paths.appConfig);
@@ -72,53 +62,14 @@ module.exports = {
 						comments: false
 					}
 				}
-			}),
-			new CssMinimizerPlugin()
+			})
 		]
 	},
 	module: {
-		strictExportPresence: true,
-		rules: [
-			// Handles `node_modules` packages that contain sourcemaps
-			...emptyOr(shouldUseSourceMap, [{
-				enforce: "pre",
-				exclude: /@babel(?:\/|\\{1,2})runtime/,
-				test: /\.(js|mjs|jsx|ts|tsx|css)$/,
-				loader: require.resolve("source-map-loader")
-			}]),
-			{
-				oneOf: [
-					...imageLoaders,
-					...javascriptLoaders,
-					...styleLoaders,
-					{
-						// Makes sure the assets get served by `WebpackDevServer`
-						exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-						type: "asset/resource"
-					}
-				]
-			}
-		]
+		strictExportPresence: true
 	},
 	plugins: [
-		...emptyOr(isEnvProduction, [
-			new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]), // Injects scripts into HTML
-			new MiniCssExtractPlugin({
-				filename: `${rebuiltronConfig.buildDirs.css}/[name].[contenthash:8].css`,
-				chunkFilename: `${rebuiltronConfig.buildDirs.css}/[name].[contenthash:8].chunk.css`
-			}),
-			new CopyPlugin({
-				patterns: [{
-					from: paths.appPublic,
-					to: paths.appBuild,
-					globOptions: {
-						ignore: ["**/*.html"]
-					}
-				}]
-			})
-		]),
 		...emptyOr(isEnvDevelopment, [
-			new ReactRefreshWebpackPlugin({ overlay: false }),
 			new CaseSensitivePathsPlugin() // Detects case errors in import paths
 		]),
 		new ModuleNotFoundPlugin(paths.appPath) // Gives some necessary context to module not found errors

package/configurations/main.js

@@ -1,16 +1,28 @@
 const paths = require("../helpers/paths");
 const rebuiltronConfig = require("../rebuiltronConfig");
 const baseConfig = require("./base");
+const javascriptLoaders = require("../loaders/javascript");
+
+
+const { main } = require(paths.appConfig);
 
 
 module.exports = {
 	...baseConfig,
 	target: "electron-main",
 	entry: {
-		[rebuiltronConfig.buildFileNames.main]: paths.electronMain
+		[rebuiltronConfig.buildFileNames.main]: main
 	},
 	output: {
 		...baseConfig.output,
 		filename: `${rebuiltronConfig.buildDirs.js}/[name].js`
+	},
+	module: {
+		...baseConfig.module,
+		rules: [
+			{
+				oneOf: javascriptLoaders
+			}
+		]
 	}
 };

package/configurations/preloads.js

@@ -3,6 +3,7 @@ const { mapKeys } = require("lodash");
 const paths = require("../helpers/paths");
 const rebuiltronConfig = require("../rebuiltronConfig");
 const baseConfig = require("./base");
+const javascriptLoaders = require("../loaders/javascript");
 
 
 const { preloads } = require(paths.appConfig);
@@ -12,10 +13,18 @@ module.exports = {
 	...baseConfig,
 	target: "electron-preload",
 	entry: mapKeys(preloads, (_value, entryName) => (
-		`${rebuiltronConfig.buildFileNames.preload}.${entryName}`)
-	),
+		`${rebuiltronConfig.buildFileNames.preload}.${entryName}`
+	)),
 	output: {
 		...baseConfig.output,
 		filename: `${rebuiltronConfig.buildDirs.js}/[name].js`
+	},
+	module: {
+		...baseConfig.module,
+		rules: [
+			{
+				oneOf: javascriptLoaders
+			}
+		]
 	}
 };

package/configurations/renderers.js

@@ -1,13 +1,21 @@
 const path = require("path");
 
 const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CopyPlugin = require("copy-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
+const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const { keys } = require("lodash");
 
 const paths = require("../helpers/paths");
-const { isEnvProduction, shouldUseSourceMap } = require("../helpers/environment");
+const { isEnvProduction, isEnvDevelopment, shouldUseSourceMap } = require("../helpers/environment");
 const { emptyOr } = require("../helpers/utils");
 const rebuiltronConfig = require("../rebuiltronConfig");
 const baseConfig = require("./base");
+const imageLoaders = require("../loaders/images");
+const styleLoaders = require("../loaders/style");
+const javascriptLoaders = require("../loaders/javascript");
 
 
 const { renderers } = require(paths.appConfig);
@@ -24,9 +32,59 @@ module.exports = {
 		chunkFilename: `${rebuiltronConfig.buildDirs.js}/${isEnvProduction ? "[name].[contenthash:8].chunk.js" : "[name].chunk.js"}`,
 		assetModuleFilename: `${rebuiltronConfig.buildDirs.media}/[name].[hash][ext]`
 	},
+	optimization: {
+		...baseConfig.optimization,
+		minimizer: [
+			...baseConfig.optimization.minimizer,
+			new CssMinimizerPlugin()
+		]
+	},
+	module: {
+		...baseConfig.module,
+		rules: [
+			// Handles `node_modules` packages that contain sourcemaps
+			...emptyOr(shouldUseSourceMap, [{
+				enforce: "pre",
+				exclude: /@babel(?:\/|\\{1,2})runtime/,
+				test: /\.(js|mjs|jsx|ts|tsx|css)$/,
+				loader: require.resolve("source-map-loader")
+			}]),
+			{
+				oneOf: [
+					...imageLoaders,
+					...javascriptLoaders,
+					...styleLoaders,
+					{
+						// Makes sure the assets get served by `WebpackDevServer`
+						exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+						type: "asset/resource"
+					}
+				]
+			}
+		]
+	},
 	plugins: [
 		...baseConfig.plugins,
-		...keys(renderers).map(renderer => (
+		...emptyOr(isEnvProduction, [
+			new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]), // Injects scripts into HTML
+			new MiniCssExtractPlugin({
+				filename: `${rebuiltronConfig.buildDirs.css}/[name].[contenthash:8].css`,
+				chunkFilename: `${rebuiltronConfig.buildDirs.css}/[name].[contenthash:8].chunk.css`
+			}),
+			new CopyPlugin({
+				patterns: [{
+					from: paths.appPublic,
+					to: paths.appBuild,
+					globOptions: {
+						ignore: ["**/*.html"]
+					}
+				}]
+			})
+		]),
+		...emptyOr(isEnvDevelopment, [
+			new ReactRefreshWebpackPlugin({ overlay: false })
+		]),
+		...keys(renderers).map((renderer) => (
 			new HtmlWebpackPlugin({
 				inject: true,
 				template: path.join(paths.appPublic, `${renderer}.html`),

package/helpers/paths.js

@@ -3,17 +3,11 @@ const { isEnvDevelopment } = require("./environment.js");
 const { resolveApp } = require("./utils.js");
 
 
-const packageJsonPath = resolveApp("package.json");
-const packageJson = require(packageJsonPath);
-
-
 module.exports = {
 	appConfig: resolveApp(rebuiltronConfig.configFileName),
-	electronMain: resolveApp(packageJson.main),
 	appPath: resolveApp("."),
 	appBuild: resolveApp(rebuiltronConfig.appDirs.build),
 	appPublic: resolveApp(rebuiltronConfig.appDirs.public),
-	appPackageJson: packageJsonPath,
 	src: resolveApp(rebuiltronConfig.appDirs.src),
 	appNodeModules: resolveApp("node_modules"),
 	appWebpackCache: resolveApp("node_modules/.cache"),

package/loaders/javascript.js

@@ -3,17 +3,6 @@ const { shouldUseSourceMap, isEnvProduction } = require("../helpers/environment"
 
 
 module.exports = [
-	{
-		// Converts `import.meta.url` before SWC transpiles so paths using it stay dynamic
-		test: /\.js$/,
-		include: [paths.electronMain],
-		loader: require.resolve("string-replace-loader"),
-		options: {
-			search: "import.meta.url",
-			replace: "require('url').pathToFileURL(__filename).toString()",
-			flags: "g"
-		}
-	},
 	{
 		test: /\.(js|jsx)$/,
 		exclude: [paths.appNodeModules],

package/loaders/style.js

@@ -13,7 +13,7 @@ const { sassOptions } = require(paths.appConfig);
 
 const _publicPath = rebuiltronConfig.buildDirs.css
 	.split("/")
-	.reduce(path => (path + "../"), "");
+	.reduce((path) => (path + "../"), "");
 
 const _getBaseStyleLoaders = () => ([
 	...emptyOr(isEnvDevelopment, [require.resolve("style-loader")]),

package/package.json

@@ -1,50 +1,51 @@
 {
   "name": "rebuiltron",
-  "version": "5.0.0",
+  "version": "6.0.1",
   "author": "Arkellys",
   "license": "MIT",
-  "bin": "bin/index.js",
+  "bin": {
+    "rebuiltron": "bin/index.js"
+  },
   "scripts": {
     "lint": "eslint ."
   },
   "devDependencies": {
     "eslint": "^8.57.0",
-    "eslint-config-arklint": "^1.5.0"
+    "eslint-config-arklint": "^1.11.0"
   },
   "dependencies": {
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@svgr/webpack": "^8.1.0",
-    "@swc/core": "^1.4.16",
-    "browserslist": "^4.23.0",
+    "@swc/core": "^1.7.26",
+    "browserslist": "^4.23.3",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "copy-webpack-plugin": "^12.0.2",
-    "css-loader": "^7.1.1",
-    "css-minimizer-webpack-plugin": "^6.0.0",
-    "detect-port": "^1.5.1",
+    "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "detect-port": "^1.6.1",
     "fs-extra": "^11.2.0",
     "html-webpack-plugin": "^5.6.0",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.9.0",
-    "postcss": "^8.4.38",
+    "mini-css-extract-plugin": "^2.9.1",
+    "postcss": "^8.4.47",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^8.1.1",
-    "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^9.5.6",
+    "postcss-normalize": "^13.0.0",
+    "postcss-preset-env": "^10.0.3",
     "react-dev-utils": "^12.0.1",
-    "react-refresh": "^0.14.0",
+    "react-refresh": "^0.14.2",
     "resolve-url-loader": "^5.0.0",
-    "sass-loader": "^14.2.1",
+    "sass-loader": "^16.0.1",
     "source-map-loader": "^5.0.0",
     "spinnies": "^0.5.1",
-    "string-replace-loader": "^3.1.0",
     "style-loader": "^4.0.0",
     "swc-loader": "^0.2.6",
     "terser-webpack-plugin": "^5.3.10",
-    "webpack": "^5.91.0",
-    "webpack-dev-server": "^5.0.4"
+    "webpack": "^5.94.0",
+    "webpack-dev-server": "^5.1.0"
   },
   "peerDependencies": {
-    "electron": ">=28.0.0",
+    "electron": ">=32.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },

package/rebuiltronConfig.js

@@ -1,5 +1,5 @@
 module.exports = {
-	configFileName: "rebuiltron.config.cjs",
+	configFileName: "rebuiltron.config.js",
 	buildDirs: {
 		js: "static/js",
 		media: "static/media",

package/scripts/build.js

@@ -3,14 +3,11 @@ process.env.NODE_ENV = "production";
 
 
 const { measureFileSizesBeforeBuild, printFileSizesAfterBuild } = require("react-dev-utils/FileSizeReporter");
-const { isEmpty } = require("lodash");
-const clearConsole = require("react-dev-utils/clearConsole");
 
-const checkSetup = require("../checkSetup");
+const buildApp = require("../tasks/buildApp");
+const checkSetup = require("../tasks/checkSetup");
 const paths = require("../helpers/paths");
 const { exitProcessWithError } = require("../helpers/utils");
-const log = require("../helpers/logger");
-const spinnies = require("../helpers/spinnies");
 
 
 process.on("unhandledRejection", exitProcessWithError);
@@ -20,19 +17,9 @@ const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 
 checkSetup
 	.then(() => measureFileSizesBeforeBuild(paths.appBuild))
-	.then(previousFileSizes => {
-		const buildApp = require("../buildApp");
-		return buildApp(previousFileSizes);
-	})
-	.then(({ stats, previousFileSizes, warnings }) => {
-		spinnies.remove("build");
-		clearConsole();
-
-		isEmpty(warnings)
-			? log.success("Compiled successfully!")
-			: log.warning(["Compiled with warnings.\n", warnings.join("\n\n")]);
-
-		console.log("File sizes after gzip:\n");
+	.then((previousFileSizes) => buildApp(previousFileSizes))
+	.then(({ stats, previousFileSizes }) => {
+		console.log("\nFile sizes after gzip:\n");
 
 		printFileSizesAfterBuild(
 			stats,

package/scripts/start.js

@@ -4,21 +4,25 @@ process.env.NODE_ENV = "development";
 
 const clearConsole = require("react-dev-utils/clearConsole");
 
-const checkSetup = require("../checkSetup");
+const checkSetup = require("../tasks/checkSetup");
+const startDevServer = require("../tasks/startDevServer");
+const compileMain = require("../tasks/compileMain");
+const watchPreloads = require("../tasks/watchPreloads");
+const startElectron = require("../tasks/startElectron");
 const { exitProcessWithError } = require("../helpers/utils");
-const spinnies = require("../helpers/spinnies");
 
 
 process.on("unhandledRejection", exitProcessWithError);
 
-checkSetup.then(([port]) => {
-	const createDevServer = require("../createDevServer");
-	const devServer = createDevServer(port);
-
+checkSetup.then(async ([port]) => {
 	clearConsole();
-	spinnies.add("devServer", { text: "Starting the development server" });
 
-	devServer.start();
+	await watchPreloads();
+	await compileMain();
+	const devServer = await startDevServer(port);
+	await startElectron(port);
+
+	console.log();
 
 	["SIGINT", "SIGTERM"].forEach((sig) => {
 		process.on(sig, async () => {

package/tasks/buildApp.js

@@ -0,0 +1,65 @@
+const fsExtra = require("fs-extra");
+const webpack = require("webpack");
+const clearConsole = require("react-dev-utils/clearConsole");
+const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
+const { bold, green, yellow } = require("chalk");
+
+const paths = require("../helpers/paths");
+const webpackConfig = require("../webpack.config");
+const spinnies = require("../helpers/spinnies");
+const log = require("../helpers/logger");
+
+
+/**
+ * Builds the app for production.
+ * @param {any} previousFileSizes - Size of the files of the previous build
+ * @returns {Promise<{ stats: webpack.Stats | undefined, previousFileSizes: any }>} Result of the build
+ */
+
+module.exports = (previousFileSizes) => {
+	fsExtra.emptyDirSync(paths.appBuild);
+	const compiler = webpack(webpackConfig.production);
+
+	return new Promise((resolve, reject) => {
+		clearConsole();
+		spinnies.add("build", { text: "Creating the production build" });
+
+		compiler.run((error, stats) => {
+			if (!error) {
+				return resolve({
+					stats,
+					previousFileSizes
+				});
+			}
+
+			spinnies.fail("build", {
+				text: "Failed to compile"
+			});
+
+			reject(error);
+		});
+
+		compiler.hooks.done.tap("done", (stats) => {
+			clearConsole();
+
+			const statsData = stats.toJson({ all: false, warnings: true, errors: true });
+			const { errors, warnings } = formatWebpackMessages(statsData);
+
+			if (stats.hasErrors()) throw new Error(errors);
+
+			if (stats.hasWarnings()) {
+				spinnies.update("build", {
+					text: `Compiled ${yellow(bold("with warnings"))}`,
+					status: "stopped",
+					color: "white"
+				});
+
+				return log.warning(warnings.join("\n\n"));
+			}
+
+			spinnies.succeed("build", {
+				text: `Compiled ${green(bold("successfully"))}`
+			});
+		});
+	});
+};

package/{checkSetup.js → tasks/checkSetup.js}

@@ -2,11 +2,12 @@ const fs = require("fs");
 
 const detect = require("detect-port");
 
-const { isEnvProduction } = require("./helpers/environment");
-const rebuiltronConfig = require("./rebuiltronConfig");
-const { resolveApp } = require("./helpers/utils");
+const { isEnvProduction } = require("../helpers/environment");
+const rebuiltronConfig = require("../rebuiltronConfig");
+const { resolveApp } = require("../helpers/utils");
 
 /**
+ * @type {Promise<number>}
  * Checks whether the default port is available, otherwise resolves with the next available port.
  */
 
@@ -20,6 +21,7 @@ const checkPort = new Promise(async (resolve) => {
 });
 
 /**
+ * @type {Promise<void>}
  * Checks whether Electron's entry point is set.
  */
 
@@ -38,6 +40,7 @@ const checkEntryPoint = new Promise((resolve, reject) => {
 });
 
 /**
+ * @type {Promise<void>}
  * Checks whether Rebuiltron's config file exists and contains the required fields.
  */
 
@@ -51,8 +54,9 @@ const checkAppConfig = new Promise((resolve, reject) => {
 		]);
 	}
 
-	const { preloads, renderers } = require(configPath);
+	const { main, preloads, renderers } = require(configPath);
 
+	if (!main) reject("Configuration error: `main` field is required.");
 	if (!preloads) reject("Configuration error: `preloads` field is required.");
 	if (!renderers) reject("Configuration error: `renderers` field is required.");
 

package/tasks/compileMain.js

@@ -0,0 +1,41 @@
+const webpack = require("webpack");
+const { bold, green } = require("chalk");
+const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
+
+const webpackConfig = require("../webpack.config");
+const spinnies = require("../helpers/spinnies");
+
+
+/**
+ * Compiles main entry file for development.
+ * @returns {Promise<void>} Promise resolving when compilation is successful
+ */
+
+module.exports = () => {
+	const mainCompiler = webpack(webpackConfig.development.main);
+
+	return new Promise((resolve, reject) => {
+		spinnies.add("compile-main", { text: "Compiling main file..." });
+
+		mainCompiler.run((error) => {
+			if (!error) return resolve();
+
+			spinnies.fail("compile-main", {
+				text: "Failed to compile main file"
+			});
+
+			reject(error);
+		});
+
+		mainCompiler.hooks.done.tap("done", (stats) => {
+			const statsData = stats.toJson({ all: false, warnings: true, errors: true });
+			const { errors } = formatWebpackMessages(statsData);
+
+			if (stats.hasErrors()) throw new Error(errors);
+
+			spinnies.succeed("compile-main", {
+				text: `Main file compiled ${green(bold("successfully"))}`
+			});
+		});
+	});
+};

package/tasks/startDevServer.js

@@ -0,0 +1,45 @@
+const webpack = require("webpack");
+const WebpackDevServer = require("webpack-dev-server");
+const clearConsole = require("react-dev-utils/clearConsole");
+const { bold } = require("chalk");
+
+const webpackConfig = require("../webpack.config");
+const devServerConfig = require("../webpackDevServer.config");
+const spinnies = require("../helpers/spinnies");
+
+/**
+ * Starts the development server.
+ * @param {number} port - Port on which the renderers are served
+ * @returns {Promise<WebpackDevServer>} Development server instance
+ */
+
+module.exports = (port) => (
+	new Promise(async (resolve) => {
+		let devServer;
+		let isFirstRun = true;
+
+		const rendererCompiler = webpack(webpackConfig.development.renderers);
+
+		spinnies.add("devServer", { text: "Starting the development server" });
+
+		rendererCompiler.hooks.invalid.tap("invalid", () => {
+			clearConsole();
+			spinnies.add("compile", { text: "Compiling..." });
+		});
+
+		rendererCompiler.hooks.done.tap("done", () => {
+			if (isFirstRun) {
+				isFirstRun = false;
+
+				spinnies.succeed("devServer", { text: `Development server running on port ${bold(port)}` });
+				return resolve(devServer);
+			}
+
+			clearConsole();
+			spinnies.remove("compile");
+		});
+
+		devServer = new WebpackDevServer({ ...devServerConfig, port }, rendererCompiler);
+		await devServer.start();
+	})
+);

package/tasks/startElectron.js

@@ -0,0 +1,40 @@
+const { spawn } = require("child_process");
+const path = require("path");
+const fs = require("fs");
+
+const spinnies = require("../helpers/spinnies");
+
+
+/**
+ * Starts Electron.
+ * @param {number} port - Port on which the renderer is served
+ */
+
+module.exports = (port) => (
+	new Promise((resolve, reject) => {
+		spinnies.add("electron", { text: "Starting Electron" });
+
+		try {
+			const electronPath = require.resolve("electron");
+			const electronModulePath = path.dirname(electronPath);
+			const pathFile = path.join(electronModulePath, "path.txt");
+			const executablePath = fs.readFileSync(pathFile, "utf-8");
+			const electronExtPath = path.join(electronModulePath, "dist", executablePath);
+
+			spawn(electronExtPath, ["."], {
+				stdio: "inherit",
+				env: {
+					...process.env,
+					DEV_LOCAL_URL: `http://localhost:${port}`
+				}
+			}).on("close", process.exit);
+
+			spinnies.succeed("electron", { text: "Electron started" });
+			resolve();
+
+		} catch (error) {
+			spinnies.fail("electron", { text: "Failed to start Electron" });
+			reject(error);
+		}
+	})
+);

package/tasks/watchPreloads.js

@@ -0,0 +1,73 @@
+const webpack = require("webpack");
+const { red, bold, green, yellow } = require("chalk");
+const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
+const clearConsole = require("react-dev-utils/clearConsole");
+
+const webpackConfig = require("../webpack.config");
+const spinnies = require("../helpers/spinnies");
+const log = require("../helpers/logger");
+
+
+/**
+ * Sets up the watcher of preload files.
+ * @returns {Promise<void>} Promise resolving when compilation is successful
+ */
+
+module.exports = () => {
+	const preloadCompiler = webpack(webpackConfig.development.preloads);
+
+	return new Promise((resolve, reject) => {
+		let isFirstWatch = true;
+
+		preloadCompiler.watch({}, (error) => {
+			if (!isFirstWatch) return;
+			isFirstWatch = false;
+
+			if (!error) return resolve();
+
+			spinnies.fail("watch", {
+				text: "Failed to compile preload file(s)"
+			});
+
+			reject(error);
+		});
+
+		preloadCompiler.hooks.compile.tap("compile", () => {
+			if (!isFirstWatch) clearConsole();
+
+			spinnies.add("watch", {
+				text: "Compiling preload file(s)..."
+			});
+		});
+
+		preloadCompiler.hooks.done.tap("done", (stats) => {
+			const statsData = stats.toJson({ all: false, warnings: true, errors: true });
+			const { errors, warnings } = formatWebpackMessages(statsData);
+
+			if (stats.hasErrors()) {
+				if (isFirstWatch) throw new Error(errors); // Stops the process
+
+				spinnies.fail("watch", {
+					text: `Preload file(s) compiled ${red(bold("with errors"))}`,
+					failColor: "white"
+				});
+
+				return log.error(errors.join("\n\n"));
+			}
+
+			if (stats.hasWarnings()) {
+				spinnies.update("watch", {
+					text: `Preload file(s) compiled ${yellow(bold("with warnings"))}`,
+					status: "stopped",
+					color: "white"
+				});
+
+				return log.warning(warnings.join("\n\n"));
+			}
+
+			spinnies.succeed("watch", {
+				text: `Preload file(s) compiled ${green(bold("successfully"))}`
+			});
+		});
+	});
+};

package/webpack.config.js

@@ -1,7 +1,13 @@
-const { isEnvDevelopment } = require("./helpers/environment");
 const rendererConfig = require("./configurations/renderers");
 const preloadConfig = require("./configurations/preloads");
 const mainConfig = require("./configurations/main");
 
 
-module.exports = isEnvDevelopment ? rendererConfig : [rendererConfig, mainConfig, preloadConfig];
+module.exports = {
+	development: {
+		renderers: rendererConfig,
+		main: mainConfig,
+		preloads: preloadConfig
+	},
+	production: [rendererConfig, mainConfig, preloadConfig]
+};

package/buildApp.js

@@ -1,33 +0,0 @@
-const fsExtra = require("fs-extra");
-const clearConsole = require("react-dev-utils/clearConsole");
-const webpack = require("webpack");
-const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
-const { isEmpty, head } = require("lodash");
-
-const paths = require("./helpers/paths");
-const webpackConfig = require("./webpack.config");
-const spinnies = require("./helpers/spinnies");
-
-
-module.exports = (previousFileSizes) => {
-	fsExtra.emptyDirSync(paths.appBuild);
-
-	clearConsole();
-	spinnies.add("build", { text: "Creating the production build" });
-
-	const compiler = webpack(webpackConfig);
-
-	return new Promise((resolve, reject) => {
-		compiler.run((error, stats) => {
-			const statsData = error
-				? { errors: [error?.message || error], warnings: [] }
-				: stats.toJson({ all: false, warnings: true, errors: true });
-
-			const { errors, warnings } = formatWebpackMessages(statsData);
-
-			return !isEmpty(errors)
-				? reject(["Failed to compile.\n", head(errors)])
-				: resolve({ stats, previousFileSizes, warnings });
-		});
-	});
-};

package/createDevServer.js

@@ -1,73 +0,0 @@
-const { spawn } = require("child_process");
-const path = require("path");
-const fs = require("fs");
-
-const webpack = require("webpack");
-const WebpackDevServer = require("webpack-dev-server");
-const clearConsole = require("react-dev-utils/clearConsole");
-const { bold } = require("chalk");
-
-const webpackConfig = require("./webpack.config");
-const devServerConfig = require("./webpackDevServer.config");
-const { exitProcessWithError } = require("./helpers/utils");
-const spinnies = require("./helpers/spinnies");
-
-
-let isElectronStarted = false;
-
-
-const _startElectron = (port) => {
-	spinnies.add("electron", { text: "Starting Electron" });
-
-	try {
-		const electronPath = require.resolve("electron");
-		const electronModulePath = path.dirname(electronPath);
-		const pathFile = path.join(electronModulePath, "path.txt");
-		const executablePath = fs.readFileSync(pathFile, "utf-8");
-		const electronExtPath = path.join(electronModulePath, "dist", executablePath);
-
-		spawn(electronExtPath, ["."], {
-			stdio: "inherit",
-			env: {
-				...process.env,
-				DEV_LOCAL_URL: `http://localhost:${port}`
-			}
-		}).on("close", process.exit);
-
-		spinnies.succeed("devServer", { text: `Development server running on port ${bold(port)}` });
-		spinnies.succeed("electron", { text: "Electron started\n" });
-
-		isElectronStarted = true;
-
-	} catch (error) {
-		exitProcessWithError({
-			message: [
-				"An error occurred while starting Electron.",
-				"Please make sure the dependency `electron` is installed."
-			],
-			stack: error.stack || error
-		});
-	}
-};
-
-module.exports = (port) => {
-	const compiler = webpack(webpackConfig);
-
-	// Starting (re)compiling
-
-	compiler.hooks.invalid.tap("invalid", () => {
-		clearConsole();
-		spinnies.add("compile", { text: "Compiling..." });
-	});
-
-	// Finished (re)compiling
-
-	compiler.hooks.done.tap("done", () => {
-		clearConsole();
-		spinnies.remove("compile");
-
-		if (!isElectronStarted) _startElectron(port);
-	});
-
-	return new WebpackDevServer({ ...devServerConfig, port }, compiler);
-};