How To Organize React and ElectronJS Project Structure

I recently implemented a store inventory desktop application, Inventory-Hub, for a local company in Indonesia. I have seen tutorials on setting up development and production with CRA(Create-React-App), but not on file structures to organize coding workflow. Therefore, I would like to share how I structured my React + ElectronJS application so that you can create clean, effective code.

ElectronJS is an open-source framework created and maintained by Github. It allows the development of desktop GUI application.

The file structure below is what I found easiest for finding and organizing files on handlers, client-side components, and back-end database management. File structure shows the architecture of the application and how your project best meets its objective. (Note: This article does not include Redux. You can also add Redux for data management system, which will make it even cleaner. I will integrate Redux in the future, and perhaps make a post on it.) Now let’s start!

You can containerize each component into services. For instance, Login has its own Login directory. Put all implementation and test for that feature in one folder. For instance, inside Login directory, you can put the component(Login.js), CSS files(Login.css), and test files for that component(Login.test.js). This makes it easier to understand the code, debug your application, and adding new features will be a lot more simple.

Second, I organized IPC Main in ‘main-process’ for handling all features from client-side. One simple rule that I discover is to place your files based on features instead of its role.

Each event listener from components file will have IPC Renderer Module to send data to ‘main-process’ directory. Each folder will base on components in ‘src’ folder. For example, Login button in client-side evokes event listener, calling IPC Renderer with a tag ‘Login’. Then, IPC Renderer sends data to ‘main-process/Login/Login.async.js’ to do main process functionality. Therefore, you don’t need to write a long file path when requiring a module from the main-process.

You can put all models in model file directory in the root project folder. For instance, the picture below indicates product.js and user.js. I use SequelizeJS for back-end object relational mapping (ORM). Therefore, I initialized all my models in this directory.

How do you connect the database model to the main process? I created a file called ‘db.js’ in the root folder and initialized all sequelize instances by importing models, association and exporting to main.js.

In main.js, import db.js, by require(‘db.js’), and instantiated db as follows:

let db = require('db.js');
app.on(‘ready’, () => {
// instantiate your db instance here
db.sequelize
.authenticate()
.then(() => {
console.log('Connection has been established successfully');
return db.sequelize.sync({});
})
.then(() => {
console.log('db is already in sync');
})
});

If you have config, environment variable for various development versions, create a config directory in the root folder. That’s it! Now you can develop your desktop application better and faster, because you find files and implement new features more easily. All the code and file structure template are posted on Github.Please comment below if you have any questions or suggestions regarding the file structure in React and ElectronJS. Meanwhile, if you are interested to see Inventory-Hub, go to this website learn more about the product. I will write more about the process of building a side-project. Stay tuned!

Thanks for reading and don’t forget to clap clap clap! 😃

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Edward Huang

Edward Huang

Software Engineer. Sharing my notes, thoughts, and document my journey in technology, functional programming, and careers in tech | https://www.Edward-Huang.com