ethan-barr / react-electron Goto Github PK

View Code? Open in Web Editor NEW

This is a boilerplate project that demonstrates how to integrate React with Electron to build a cross-platform desktop application. It provides a preloader component for a better user experience during app loading.

License: MIT License

JavaScript 86.95% HTML 6.81% CSS 6.24%

react-electron's Introduction

React Electron Boilerplate

Getting Started

To get started with this project, follow these steps:

Prerequisites

Node.js and npm installed on your machine.

Installation

Clone the repository to your local machine:

git clone https://github.com/Ethan-Barr/react-electron.git

Navigate to the project directory:
```
cd react-electron
```
Install the dependencies:
```
npm install
```

Development

To run the project in development mode:

npm run dev

This command starts the React development server with hot reloading and opens the Electron app with the React app loaded. Any changes you make to the code will automatically be reflected in the app. You will also be able to access the changes on localhost:3000.

Production

To build the project for production:

npm run build

This command builds the React app for production into the build directory.

To start the Electron app in production mode:

npm run electron

Project Structure

react-electron/
├── build/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── ...
├── main.js
└── package.json

build/: Contains the production build of the React app.
node_modules/: Contains the project dependencies.
public/: Contains the HTML template file.
src/: Contains the React components and stylesheets.
main.js: Electron main process file.
package.json: Project configuration and dependencies.