Using React with Electron - For Beginners!

burhanuday

Burhanuddin Udaipurwala

Posted on November 5, 2019

Using React with Electron - For Beginners!

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
💖 💪 🙅 🚩
burhanuday
Burhanuddin Udaipurwala

Posted on November 5, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

React Electron Boilerplate
react React Electron Boilerplate

January 22, 2020