How should be the project architecture ( or structure ) of React + Electron?

user_7551963 0
Viewed 906

Last week, I've started building a desktop application with electron and I want to integrate React with it.

Electron official documentation does not provide a detailed Framework Integration section.

So, I've tried to do some googling and I've found a useful article about converting Create React App to electron application.

However, I just get confused about the project structure and how to make sure that I have everything to take my app into production ( React + Electron ) without tears in the future.

Where should I put my renderers?

How these renders can handle React Pages or React Components?

Please, would you guide me to set up React-Electron for a production-ready application?

My current structure

enter image description here

The main.js is the main file ( process ) for Electron.

electron reactjs
1 Answers

It doesn't really matter too much about your structure provided you have one and it makes sense.

I'm the developer of secure-electron-template, which is a react/electron template so I'll share with you the format of this project and you can use this as a template if you'd like.

app/
    electron/
        main.js    <-- BrowserWindow gets created here, event handlers, etc.
        menu.js    <-- Custom menu is defined here
        preload.js    <-- Preload code is here
    src/
        components/    <-- Reusable .jsx components
        core/    <-- The root wrapper element of the app (contains a store, page router)
        pages/    <-- Each page of the app (.jsx and .css).
            home/
                home.jsx
                home.css
            about/
                about.jsx
                about.css
        redux/    <-- Page routing code, may not be specific to you
        index.html    <-- Root html page
        index.jsx    <-- Root element that renders the root wrapper element
dist/    <-- Gets auto-created
node_modules/
resources/
    icon.icns
    icon.ico
    icon.png
    etc...
test/    <-- Contains test scripts
.gitignore
.babelrc
package.json
README.md
webpack.config.js
user_18370800
Related