Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Burhanuddin Udaipurwala
Burhanuddin Udaipurwala

Posted on

     

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 runnpm install
  • Delete git filesrm -rf .git

Development

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

Build and package

  • Runnpm run package to compile react, copy files and then package your app
  • A newdist folder will be created in the root of your project containing the executable files
  • NOTE: add--mac to thepostpackage 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

Top comments(1)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
burhanuday profile image
Burhanuddin Udaipurwala
Frontend Engineer at Razorpay | Javascript, React, React Native
  • Location
    Mumbai
  • Education
    Bachelor of Engineering (Computer Engineering)
  • Work
    Frontend Engineer at Razorpay
  • Joined

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 atElectron React Boilerplate for a more rounded boilerplate

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Frontend Engineer at Razorpay | Javascript, React, React Native
  • Location
    Mumbai
  • Education
    Bachelor of Engineering (Computer Engineering)
  • Work
    Frontend Engineer at Razorpay
  • Joined

More fromBurhanuddin Udaipurwala

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp