How to Structure a Web/Electron App - Code will be in both places

Question

We have several tools for our website written in Angular 1 for order tracking, pricing quotes, etc. It has a pretty normal npm structure

root/
├── build/
├── src/
│   ├── scripts/
│   ├── assets/
│   ├── app.js
|   ├── node_modules/
|   ├── build/
├── package.json
├── webpack.config.js

Now we're going to create a Desktop App and we've decided to go with Electron since all the tools we've already written for the website can just work. Basically, the plan is to extend the website code and have some desktop-only features hidden with build switches.

So my question is, what's the best way to set up the folder structure? Electron uses sub-projects (by convention in an ./app folder). Right now, I have it set up like this

root/
├── app/
├── build/
├── dist/
├── src/
│   ├── assets/
|   ├── build/
|   ├── node_modules/
│   ├── scripts/
│   ├── app.js
├── package.json
├── webpack.config.js

When we build our website, Webpack compiles the src folder to build. For Electron, we've added the additional steps that the contents of build then get copied over to app (the electron sub-project folder) and the electron build is run which outputs to dist.

This works, but seems hacky. Is there a better way to do this? Or would a better way to have an "electron" branch and a "web app" branch?

Answer 1

I remember finding a thread awhile ago on the electron forum where a moderator addressed this question and said that there wasn't a specific convention for file structuring.
Though, from my experience, it seems like most electron apps use either this structure:

root/ 
├── assets/ 
├── css/
├── js/ 
├── node_modules/
├── index.html
├── main.js
├── package.json
├── (ect..)

Or a more npm-based structure like the one you're currently using. It usually seems to depend on the complexity of the application and the conventions of the supplementary tools being used.

As for having a single branch vs separate branches, I think that at that point it comes down to personal preference, though I think it may be easier to maintain as a single branch.

If you're interested in checking out some other approaches you can check out the various boilerplates on the electron website.