webpack-plugin: allow renderer to be handled by webserver and bundled build output of other frameworks (cra, angular, ...)

[Taschenbuch]

Pre-flight checklist

• [X] I have read the contribution documentation for this project.
• [X] I agree to follow the code of conduct that this project uses.
• [X] I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Problem description

short: popular frameworks like create-react-app (CRA) or angular already use webpack and typescript (typescript is optionally for CRA). They will setup for you a development server during development or bundle the code for the production. Especially the webserver gives invaluable framework specific feedback during the development phase. But currently the webpack-plugin wants to bundle the renderer production output and the renderer development webserver. though other frameworks already do that and give better framework related output to the user.

long: I will give you 2 examples for how popular frameworks like angular and create-react-app handle development phase and production output and then explain what would be nice for forge or the webpack-plugin:

ANGULAR:

• angular is using webpack and typescript (typescript is required, not optional). the screenshot below shows a angular project created by the ng new my-app command which is used to initialize angular projects.
• ng serve creates a webserver for development at http://localhost:4200/ which automatically updates when code is changed and gives angular specific feedback about erros in the console (probably a webpack webserver ? no idea about the details. So you want to keep this console window open for development to be able to check if code changes cause errors.
• ng build creates the deployable bundled output from the typescript code (uses typescript and webpack internally)

CREATE-REACT-APP Create-react-app is using webpack and optionally typescript. The screenshot below shows a react project created by the commandnpx create-react-app my-app which is probably the most popular framework for people to start with react. It is very similar to angular: one command to create a build output react-scripts build for production. One command for developping to start a development webserver which automatically updates when code is changed and reports errors: react-scripts start. The difference to angular is: the webserver has a different port. The build output folder has a different name and a different folder/files structure. The console output is different too because it is specialized for react and has some additional automatically applied eslint when changing code.

Proposed solution

ELECTRON-FORGE WEBPACK-PLUGIN feature request:

• an option to tell the webpack plugin to NOT try to bundle/handle renderer code for BUILD and DEVELOPMENT. This way those web-frameworks can handle the renderer part by themself. The webpack plugin can still handle the preload and main process entry points. Because that is not done by the web-frameworks and is probably the hard part for people who want to convert their project into an electron project.

• an option to tell webpack plugin to NOT remove everything except the .webpack folder, because that would remove the build output folders created by frameworks like angular/create-react-app. They would be missing in the electron package otherwise.

  • Then people could use npm scripts like this for developing: angular: npm run ng start + npm run electron-forge start create-react-app: npm run react-scripts start + npm run electron-forge start In both cases you would have 2 console windows open. One for the running electron-forge start output and one for the running react/angular webserver output.
  • And those npm scripts for production build which do not require you to keep console windows open because they will finish sequentially: angular: npm run ng build && npm run electron-forge make create-react-app : npm run react-scripts build && npm run electron-forge make nice-to-have further configurations:

• development

  • a setting to tell the webpack plugin which url to open for development. e.g. which will be used for MAIN_WINDOW_WEBPACK_ENTRY e.g. developmentWebserver: "http://localhost:4200/", // for angular or "http://localhost:3000/"" for create-react-app

• production

  • a setting to set the path to the entry point in the create-react-app/angular bundled build output (used for MAIN_WINDOW_WEBPACK_ENTRYagain) e.g. buildHtml: "dist/my-angular-project-name/index.html", // for angular or "build/index.html" for create-react-app
  • a setting to say which folder(s) should be kept in addition to the .webpack folder instead of completely disabling the ingore pattern introduced by the webpack-plugin. e.g. buildDirs: ["dist/my-angular-project-name", "…"] // for angular or "build" for create-react-app

I only know create-react-app and angular, so maybe I am missing something which other people could add to improve this idea for other popular web frameworks that bundle their code already. NEXTJS and VUE come to my mind.

example config (those attributes are maybe at the wrong place and not that clear and maybe we need more of them. but just to give a rough example)

Alternatives considered

...

Additional information

No response

[Blaekbit]

Are there any updates or working examples on this usecase? We are trying to accomplish just that - an electron-forge app with a NextJS app inside of it. We would like to leverage the development server, build process, etc. from NextJS and hook that into the Electron Forge Webpack+Typescript "boilerplate".