logo
Published on

Using React with Electron - For Beginners!

Authors

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
Share: