Fixes so app works in production builds

- Fix path to wp-files used when creating new sites
- Loosen CSP rules so tailwind styles can run in production
- Move React to devDependencies, we don't need to include it unbundled
  in the production node_modules folder
- Ensure the external wasm files get copied into the production build

README.md

@@ -5,6 +5,7 @@ A desktop app experience for building a block themes.
 ## Deving
 
 ```bash
+$ nvm use
 $ npm install
 $ npm start
 ```
@@ -16,3 +17,9 @@ The app auto-opens and the Chromium developer tools are opened by default.
 `src/renderer.ts` is the entrypoint for the "renderer"—the code running in the Chromium window.
 
 Code formatting has been set up just to make merging PRs easier. It uses the same prettier/eslint mechanism as Calypso, see p4TIVU-9Lo-p2 for details on setting up your editor.
+
+## Building Installers
+
+```bash```
+$ npm run make
+```

forge.config.ts

@@ -1,15 +1,22 @@
+// When ts-node runs this file it doesn't seem to use our tsconfig.json project
+// settings, so we need to reference custom package definitions manually.
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="./src/custom-package-definitions.d.ts" />
+
 import type { ForgeConfig } from '@electron-forge/shared-types';
 import { MakerZIP } from '@electron-forge/maker-zip';
 import { MakerDMG } from '@electron-forge/maker-dmg';
 import { AutoUnpackNativesPlugin } from '@electron-forge/plugin-auto-unpack-natives';
 import { WebpackPlugin } from '@electron-forge/plugin-webpack';
+import ForgeExternalsPlugin from '@timfish/forge-externals-plugin';
 
 import { mainConfig } from './webpack.main.config';
 import { rendererConfig } from './webpack.renderer.config';
 
 const config: ForgeConfig = {
 	packagerConfig: {
 		asar: true,
+		extraResource: [ './wp-files' ],
 	},
 	rebuildConfig: {},
 	makers: [ new MakerZIP( {}, [ 'darwin' ] ), new MakerDMG( {}, [ 'darwin' ] ) ],
@@ -34,6 +41,8 @@ const config: ForgeConfig = {
 				port: parseInt( process.env.PORT, 10 ),
 			} ),
 		} ),
+		// This plugin bundles the externals defined in the Webpack config file.
+		new ForgeExternalsPlugin( { externals: Object.keys( mainConfig.externals ?? {} ) } ),
 	],
 };
 

package.json

@@ -26,6 +26,7 @@
 		"@electron-forge/maker-zip": "^7.2.0",
 		"@electron-forge/plugin-auto-unpack-natives": "^7.2.0",
 		"@electron-forge/plugin-webpack": "^7.2.0",
+		"@timfish/forge-externals-plugin": "^0.2.1",
 		"@types/react": "^18.2.42",
 		"@types/react-dom": "^18.2.17",
 		"@typescript-eslint/eslint-plugin": "^5.0.0",
@@ -44,6 +45,8 @@
 		"postcss": "^8.4.32",
 		"postcss-loader": "^7.3.3",
 		"prettier": "npm:wp-prettier@3.0.3",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"style-loader": "^3.0.0",
 		"tailwindcss": "^3.3.6",
 		"ts-loader": "^9.2.2",
@@ -54,8 +57,6 @@
 		"@php-wasm/node": "^0.5.4",
 		"@wp-now/wp-now": "^0.1.63",
 		"electron-squirrel-startup": "^1.0.0",
-		"file-stream-rotator": "^1.0.0",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
+		"file-stream-rotator": "^1.0.0"
 	}
 }

src/wp-now-definitions.d.ts → src/custom-package-definitions.d.ts

@@ -11,3 +11,13 @@ declare module '@wp-now/wp-now' {
 	function getWpNowConfig( ...args: any[] ): Promise< any >;
 	function startServer( ...args: any[] ): Promise< Server >;
 }
+
+declare module '@timfish/forge-externals-plugin' {
+	import type { PluginBase } from '@electron-forge/plugin-base';
+
+	class ForgeExternalsPlugin extends PluginBase< { externals: string[] } > {
+		name: string;
+	}
+
+	export = ForgeExternalsPlugin;
+}

src/index.ts

@@ -130,8 +130,8 @@ app.on( 'ready', () => {
 		const policies = [
 			"default-src 'self'",
 			"script-src-attr 'none'",
+			"style-src 'self' 'unsafe-inline'", // unsafe-inline is used by tailwind
 			process.env.NODE_ENV === 'development' && "script-src 'self' 'unsafe-eval'", // unsafe-eval is used by hot reloading
-			process.env.NODE_ENV === 'development' && "style-src 'self' 'unsafe-inline'", // unsafe-inline is used by tailwind
 		];
 
 		callback( {

src/site-server.ts

@@ -2,6 +2,7 @@ import nodePath from 'path';
 import { pathExists, recursiveCopyDirectory, isEmptyDir } from './fs-utils';
 import { getWpNowConfig, startServer, type Server as WPNowServer } from '@wp-now/wp-now';
 import { portFinder } from './port-finder';
+import { app } from 'electron';
 
 const servers = new Map< string, SiteServer >();
 
@@ -11,11 +12,27 @@ export async function createSiteWorkingDirectory( path: string ): Promise< boole
 		return false;
 	}
 
-	await recursiveCopyDirectory( nodePath.resolve( 'wp-files/latest/wordpress' ), path );
+	const wpFilesPath = nodePath.join( getResourcesPath(), 'wp-files', 'latest', 'wordpress' );
+
+	await recursiveCopyDirectory( wpFilesPath, path );
 
 	return true;
 }
 
+function getResourcesPath(): string {
+	if ( process.env.NODE_ENV === 'development' ) {
+		return process.cwd();
+	}
+
+	const exePath = nodePath.dirname( app.getPath( 'exe' ) );
+
+	if ( process.platform === 'darwin' ) {
+		return nodePath.resolve( exePath, '..', 'Resources' );
+	}
+
+	return nodePath.join( exePath, 'resources' );
+}
+
 export async function stopAllServersOnQuit() {
 	// We're quitting so this doesn't have to be tidy, just stop the
 	// servers as directly as possible.

webpack.main.config.ts

@@ -18,10 +18,8 @@ export const mainConfig: Configuration = {
 		extensions: [ '.js', '.ts', '.jsx', '.tsx', '.css', '.json' ],
 	},
 	externals: {
-		/**
-		 * We need to add PHP Wasm as an external because it uses the __dirname
-		 * variable, and Webpack messes with it.
-		 */
+		// We need to add PHP Wasm as an external because it uses the __dirname
+		// variable, and Webpack messes with it.
 		'@php-wasm/node': '@php-wasm/node',
 	},
 };