Using React with Electron — For Beginners!

Subscribe to my newsletter and never miss my upcoming articles

header image for boilerplate

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.

You can use it as a boilerplate for your next project

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

Go to Github — Repository — Click to view

No Comments Yet