loading...

Using React with Electron - For Beginners!

burhanuday profile image Burhanuddin Udaipurwala ・1 min read

I created this boilerplate after working on electron for one of my own apps. This is aimed at beginners and is a raw boilerplate built with create-react-app.

It contains some scripts i added to simplify usage for beginners. Do take a look!

Repository - Click to view

This is an example electron/create-react-app application, and serves as an example of how to structure your project if you want to share pieces of your codebase between electron and react.

Usage

  • Clone the repository
  • cd into the directory and run npm install
  • Delete git files rm -rf .git

Development

  • Run npm start to start the react development server
  • After that, run npm run start-electron in a different terminal to start the electron app

Build and package

  • Run npm run package to compile react, copy files and then package your app
  • A new dist folder will be created in the root of your project containing the executable files
  • NOTE: add --mac to the postpackage script besides --win if you are on a mac computer

Project structure

  • electron/: Code for the main Electron process
  • src/react/: Code for the React renderer process
  • src/shared/: Code shared between React and Electron
  • package.json: Contains scripts for running the app in development, building it, and packaging it for production using electron-builder

Posted on by:

burhanuday profile

Burhanuddin Udaipurwala

@burhanuday

3rd year Computer Engineering student at KJSIEIT, India. Currently working with React and React Native

Discussion

markdown guide
 

In the example project, the electron and the React code are in separate files and only communicate using events. You could access the file system from the electron specific files, so you would never actually have to handle files in the React part of the application. What needs to be done will be sent by React and acted upon by electron

Other than that, you can eject from CRA environment and then modify the config according to your needs.

If your project relies heavily on the file system, then this might not be the React boilerplate you are looking for.

This boilerplate is aimed at beginners and has minimal number of packages required for developing and publishing

Take a look at Electron React Boilerplate for a more rounded boilerplate