How to separate renderer and main process dependency while using React with electron? - reactjs

Question

I have React web app which I am trying to interoperate as desktop application. All my React dependencies are bundled by webpack on production so I don't need those node modules to be included in app.asar which unnecessarily increases size of my production build.
Now my problem is that it is blocking me to include main process dependency as I have rule to exclude the node_modules in package.json How can I separate the main process dependency to be included by electron-builder but ignore the render-process dependency. I am new to electron, so any help will be valuable for me.
My package.json looks like this:
"name": "app-name",
"version": "0.16.2",
"private": true,
"main": "public/electron.js",
"repository": "github repo",
"homepage": "./",
"build": {
"appId": "com.appname",
"productName": "productName",
"copyright": "copyright",
"dmg": {
"background": null,
"backgroundColor": "#ffffff",
"window": {
"width": "400",
"height": "300"
},
"contents": [{
"x": 100,
"y": 100
},
{
"x": 300,
"y": 100,
"type": "link",
"path": "/Applications"
}
]
},
"nsis": {
"createDesktopShortcut": "always",
"installerIcon": "./resources/icon.ico"
},
"mac": {
"target": "dmg",
"category": "public.app-category.business",
"icon": "./resources/icon.icns"
},
"win": {
"target": "nsis",
"extraResources": [
"./*.dll",
"!./exclude-me.dll"
]
},
"linux": {
"maintainer": "maintainer",
"target": "deb",
"category": "Utility"
},
"files": [
"./build/**/*",
"!node_modules"
],
"directories": {
"buildResources": "resources"
},
"publish": {
"provider": "github"
}
},
"scripts": {
"generate:meta": "node ./internals/scripts/generate-meta.js",
"start": "REACT_APP_CURRENT_GIT_SHA=`git rev-parse --short HEAD` craco start",
"electron:dev": "concurrently \"env-cmd -f .env.electron yarn start\" \"wait-on http://localhost:3002 && electron .\"",
"electron:prod": "yarn build:staging && electron-builder",
"electron:release": "electron-builder -p 'onTagOrDraft'",
"postinstall": "electron-builder install-app-deps",
"start:windows": "git rev-parse --short HEAD >sha.txt && set /p REACT_APP_CURRENT_GIT_SHA= < sha.txt && del sha.txt && craco start",
"start:prod": "env-cmd -f .env.production yarn start",
"start:dev": "env-cmd -f .env.staging yarn start",
"build": "yarn generate:meta && REACT_APP_CURRENT_GIT_SHA=`git rev-parse --short HEAD` craco build",
"build:staging": "env-cmd -f .env.staging yarn build",
"build:prod": "env-cmd -f .env.production yarn build",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx --quiet",
"lint-fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
"test": "craco test",
"eject": "craco eject",
"generate": "graphql-codegen --config codegen.yml",
"extract-translations": "i18next",
"analyze": "cross-env REACT_APP_INTERACTIVE_ANALYZE=1 yarn build"
},
"husky": {
"hooks": {
"pre-push": "yarn lint",
"pre-commit": "pretty-quick --staged"
}
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"#ant-design/icons": "^4.6.2",
"#apollo/client": "^3.3.16",
"#hookform/resolvers": "^2.4.0",
"#sentry/browser": "^6.13.3",
"#sentry/tracing": "^6.13.3",
"#stripe/react-stripe-js": "^1.4.1",
"#stripe/stripe-js": "^1.15.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#twilio/voice-sdk": "^2.0.1",
"#types/react-beautiful-dnd": "^13.1.1",
"#types/react-color": "^3.0.5",
"#types/react-highlight-words": "^0.16.3",
"#types/react-responsive": "^8.0.2",
"#welldone-software/why-did-you-render": "^6.1.1",
"antd": "^4.15.4",
"apollo-link-token-refresh": "^0.3.2",
"apollo-upload-client": "^15.0.0",
"apollo3-cache-persist": "^0.9.1",
"craco-less": "^1.18.0",
"date-fns": "^2.16.1",
"dompurify": "^2.2.6",
"electron-is-dev": "^2.0.0",
"electron-updater": "^4.3.9",
"env-cmd": "^10.1.0",
"fernet": "^0.4.0",
"firebase": "^9.1.1",
"graphql": "^15.5.0",
"history": "^5.0.0",
"husky": "^4.3.0",
"i18next": "^19.8.7",
"i18next-browser-languagedetector": "^6.0.1",
"i18next-http-backend": "^1.1.0",
"immer": "^8.0.1",
"jspdf": "^2.3.1",
"jwt-decode": "^3.1.2",
"libphonenumber-js": "^1.9.6",
"linkify-html": "^3.0.2",
"linkifyjs": "^3.0.1",
"lint-staged": "^10.5.3",
"lodash.debounce": "^4.0.8",
"lodash.get": "^4.4.2",
"lodash.isempty": "^4.4.0",
"lodash.omit": "^4.5.0",
"lodash.startswith": "^4.2.1",
"npm-watch": "^0.11.0",
"papaparse": "^5.3.0",
"prettier": "^2.2.1",
"rc-picker": "^2.5.15",
"react": "^17.0.1",
"react-beautiful-dnd": "^13.1.0",
"react-color": "^2.19.3",
"react-copy-to-clipboard": "^5.0.3",
"react-dom": "^17.0.1",
"react-draggable": "^4.4.3",
"react-flag-kit": "^0.3.1",
"react-h5-audio-player": "^3.6.1",
"react-highlight-words": "^0.17.0",
"react-hook-form": "^7.4.0",
"react-i18next": "^11.8.6",
"react-icons": "^4.1.0",
"react-mic": "^12.4.6",
"react-perfect-scrollbar": "^1.5.8",
"react-phone-input-2": "^2.13.9",
"react-responsive": "^8.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
"react-scroll": "^1.8.2",
"react-select": "^4.3.0",
"react-use-intercom": "^1.3.0",
"react-window": "^1.8.6",
"secure-ls": "^1.2.6",
"socket.io-client": "^3.0.4",
"styled-components": "^5.2.3",
"subscriptions-transport-ws": "^0.9.18",
"typescript": "^4.1.2",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^6.3.0",
"workbox-broadcast-update": "^6.3.0",
"workbox-cacheable-response": "^6.3.0",
"workbox-core": "^6.3.0",
"workbox-expiration": "^6.3.0",
"workbox-precaching": "^6.3.0",
"workbox-routing": "^6.3.0",
"workbox-strategies": "^6.3.0",
"xlsx": "^0.17.0",
"yup": "^0.32.5"
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.12.1",
"#craco/craco": "^6.2.0",
"#graphql-codegen/cli": "1.20.1",
"#graphql-codegen/fragment-matcher": "2.0.1",
"#graphql-codegen/introspection": "1.18.1",
"#graphql-codegen/typescript": "^1.20.2",
"#graphql-codegen/typescript-document-nodes": "1.17.9",
"#graphql-codegen/typescript-graphql-files-modules": "^1.18.1",
"#graphql-codegen/typescript-operations": "1.17.14",
"#graphql-codegen/typescript-react-apollo": "2.2.1",
"#types/apollo-upload-client": "^14.1.0",
"#types/dompurify": "^2.2.1",
"#types/emoji-mart": "^3.0.4",
"#types/jest": "^26.0.15",
"#types/lodash.debounce": "^4.0.6",
"#types/lodash.get": "^4.4.6",
"#types/lodash.isempty": "^4.4.6",
"#types/lodash.omit": "^4.5.6",
"#types/lodash.startswith": "^4.2.6",
"#types/node": "^12.0.0",
"#types/papaparse": "^5.2.4",
"#types/react": "^16.9.53",
"#types/react-copy-to-clipboard": "^5.0.0",
"#types/react-dom": "^16.9.8",
"#types/react-mic": "^12.4.2",
"#types/react-router-dom": "^5.1.6",
"#types/react-scroll": "^1.8.2",
"#types/react-select": "^4.0.13",
"#types/react-window": "^1.8.2",
"#types/requestidlecallback": "^0.3.1",
"#types/socket.io-client": "^1.4.34",
"#types/styled-components": "^5.1.4",
"#typescript-eslint/eslint-plugin": "^4.14.1",
"#typescript-eslint/parser": "^4.14.1",
"babel-plugin-import": "^1.13.3",
"compression-webpack-plugin": "6.1.1",
"concurrently": "^6.3.0",
"craco-swc": "^0.1.0",
"cross-env": "^7.0.3",
"electron": "^15.2.0",
"electron-builder": "^22.13.1",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^1.7.0",
"i18next-parser": "^3.6.0",
"less": "^3.12.2",
"prettier-eslint": "^12.0.0",
"pretty-quick": "^3.1.0",
"simple-progress-webpack-plugin": "^2.0.0",
"wait-on": "^6.0.0",
"webpack-bundle-analyzer": "^4.4.2",
"webpackbar": "^5.0.0-3"
},
"description": "description",
"author": "author"
} ```

Answer 1

If those dependencies are packed with webpack you can safely move them to devDependencies, which aren't included in the node_modules of the final application