Reduce desktop app size

.gitignore

@@ -43,7 +43,10 @@ android/app/src/main/java/com/expensify/chat/generated/
 node_modules/
 npm-debug.log
 yarn-error.log
+
+# Bundled code
 dist/
+desktop-build/
 
 # BUCK
 buck-out/

config/electronBuilder/electronBuilder.config.js

@@ -0,0 +1,44 @@
+const {version} = require('../../package.json');
+
+const isStaging = process.env.ELECTRON_ENV === 'staging';
+const isPublishing = process.argv.includes('--publish');
+
+/**
+ * The configuration for the production and staging Electron builds.
+ * It can be used to create local builds of the same, by omitting the `--publish` flag
+ */
+module.exports = {
+    appId: 'com.expensifyreactnative.chat',
+    productName: 'New Expensify',
+    extraMetadata: {
+        version,
+    },
+    mac: {
+        category: 'public.app-category.finance',
+        target: [
+            {target: 'dmg', arch: ['x64', 'arm64', 'universal']},
+        ],
+        icon: isStaging ? './desktop/icon-stg.png' : './desktop/icon.png',
+        hardenedRuntime: true,
+        entitlements: 'desktop/entitlements.mac.plist',
+        entitlementsInherit: 'desktop/entitlements.mac.plist',
+        type: 'distribution',
+    },
+    dmg: {
+        internetEnabled: true,
+    },
+    publish: [{
+        provider: 's3',
+        bucket: isStaging ? 'staging-expensify-cash' : 'expensify-cash',
+        channel: 'latest',
+    }],
+    afterSign: isPublishing ? './desktop/notarize.js' : undefined,
+    files: [
+        'dist',
+        '!dist/www/{.well-known,favicon*}',
+    ],
+    directories: {
+        app: 'desktop',
+        output: 'desktop-build',
+    },
+};

config/webpack/webpack.common.js

@@ -1,17 +1,12 @@
-const _ = require('underscore');
 const path = require('path');
-const {IgnorePlugin} = require('webpack');
+const {IgnorePlugin, DefinePlugin} = require('webpack');
 const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
+const dotenv = require('dotenv');
+const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
 const CustomVersionFilePlugin = require('./CustomVersionFilePlugin');
 
-// Check for a --platform command line argument (default to 'web')
-// If it is 'web', we want to ignore .desktop.js files, and if it is 'desktop', we want to ignore .website.js files.
-const platformIndex = _.findIndex(process.argv, arg => arg === '--platform');
-const platform = (platformIndex > 0) ? process.argv[platformIndex + 1] : 'web';
-const platformExclude = platform === 'web' ? new RegExp(/\.desktop\.js$/) : new RegExp(/\.website\.js$/);
-
 const includeModules = [
     'react-native-animatable',
     'react-native-reanimated',
@@ -25,7 +20,16 @@ const includeModules = [
     'react-native-google-places-autocomplete',
 ].join('|');
 
-const webpackConfig = {
+/**
+ * Get a production grade config for web or desktop
+ * @param {Object} env
+ * @param {String} env.envFile path to the env file to be used
+ * @param {'web'|'desktop'} env.platform
+ * @returns {Configuration}
+ */
+const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
+    mode: 'production',
+    devtool: 'source-map',
     entry: {
         app: './index.js',
     },
@@ -59,7 +63,20 @@ const webpackConfig = {
             ],
         }),
         new IgnorePlugin(/^\.\/locale$/, /moment$/),
-        new CustomVersionFilePlugin(),
+        ...(platform === 'web' ? [new CustomVersionFilePlugin()] : []),
+        new DefinePlugin({
+            __REACT_WEB_CONFIG__: JSON.stringify(
+                dotenv.config({path: envFile}).parsed,
+            ),
+
+            // React Native JavaScript environment requires the global __DEV__ variable to be accessible.
+            // react-native-render-html uses variable to log exclusively during development.
+            // See https://reactnative.dev/docs/javascript-environment
+            __DEV__: /staging|prod/.test(envFile) === false,
+        }),
+
+        // This allows us to interactively inspect JS bundle contents
+        ...(process.env.ANALYZE_BUNDLE === 'true' ? [new BundleAnalyzerPlugin()] : []),
     ],
     module: {
         rules: [
@@ -78,15 +95,13 @@ const webpackConfig = {
                  */
                 exclude: [
                     new RegExp(`node_modules/(?!(${includeModules})/).*|.native.js$`),
-                    platformExclude,
                 ],
             },
             {
                 test: /\.js$/,
                 loader: 'eslint-loader',
                 exclude: [
                     /node_modules|\.native\.js$/,
-                    platformExclude,
                 ],
                 options: {
                     cache: false,
@@ -142,8 +157,9 @@ const webpackConfig = {
         // without this, web will try to use native implementations and break in not very obvious ways.
         // This is also why we have to use .website.js for our own web-specific files...
         // Because desktop also relies on "web-specific" module implementations
+        // This also skips packing web only dependencies to desktop and vice versa
         extensions: ['.web.js', (platform === 'web') ? '.website.js' : '.desktop.js', '.js', '.jsx'],
     },
-};
+});
 
 module.exports = webpackConfig;

config/webpack/webpack.desktop.js

@@ -0,0 +1,56 @@
+const path = require('path');
+const webpack = require('webpack');
+const _ = require('underscore');
+
+const desktopDependencies = require('../../desktop/package.json').dependencies;
+const getCommonConfig = require('./webpack.common');
+
+/**
+ * Desktop creates 2 configurations in parallel
+ * 1. electron-main - the core that serves the app content
+ * 2. web - the app content that would be rendered in electron
+ * Everything is placed in desktop/dist and ready for packaging
+ * @param {Object} env
+ * @returns {webpack.Configuration[]}
+ */
+module.exports = (env) => {
+    const rendererConfig = getCommonConfig({...env, platform: 'desktop'});
+    const outputPath = path.resolve(__dirname, '../../desktop/dist');
+
+    rendererConfig.name = 'renderer';
+    rendererConfig.output.path = path.join(outputPath, 'www');
+
+    // Expose react-native-config to desktop-main
+    const definePlugin = _.find(rendererConfig.plugins, plugin => plugin.constructor === webpack.DefinePlugin);
+
+    const mainProcessConfig = {
+        mode: 'production',
+        name: 'desktop-main',
+        target: 'electron-main',
+        entry: {
+            main: './desktop/main.js',
+            contextBridge: './desktop/contextBridge.js',
+        },
+        output: {
+            filename: '[name].js',
+            path: outputPath,
+            libraryTarget: 'commonjs2',
+        },
+        resolve: rendererConfig.resolve,
+        plugins: [definePlugin],
+        externals: [
+            ..._.keys(desktopDependencies),
+            'fsevents',
+        ],
+        node: {
+            /**
+             * Disables webpack processing of __dirname and __filename, so it works like in node
+             * https://github.com/webpack/webpack/issues/2010
+             */
+            __dirname: false,
+            __filename: false,
+        },
+    };
+
+    return [mainProcessConfig, rendererConfig];
+};

config/webpack/webpack.dev.js

@@ -1,12 +1,13 @@
 const path = require('path');
-const webpack = require('webpack');
 const {merge} = require('webpack-merge');
-const dotenv = require('dotenv');
-const common = require('./webpack.common');
+const getCommonConfig = require('./webpack.common');
 
-const env = dotenv.config({path: path.resolve(__dirname, '../../.env')}).parsed;
-
-module.exports = () => {
+/**
+ * Configuration for the local dev server
+ * @param {Object} env
+ * @returns {Configuration}
+ */
+module.exports = (env = {}) => {
     // Check if the USE_WEB_PROXY variable has been provided
     // and rewrite any requests to the local proxy server
     const proxySettings = process.env.USE_WEB_PROXY === 'false'
@@ -18,7 +19,9 @@ module.exports = () => {
             },
         };
 
-    return merge(common, {
+    const baseConfig = getCommonConfig(env);
+
+    return merge(baseConfig, {
         mode: 'development',
         devtool: 'inline-source-map',
         devServer: {
@@ -27,15 +30,5 @@ module.exports = () => {
             ...proxySettings,
             historyApiFallback: true,
         },
-        plugins: [
-            new webpack.DefinePlugin({
-                __REACT_WEB_CONFIG__: JSON.stringify(env),
-
-                // React Native JavaScript environment requires the global __DEV__ variable to be accessible.
-                // react-native-render-html uses variable to log exclusively during development.
-                // See https://reactnative.dev/docs/javascript-environment
-                __DEV__: true,
-            }),
-        ],
     });
 };