Electron-React-Blueprint

Introduction

      Template for creating electron-react applications. Setup in 2 parts, react frontend and electron backend. Run NPM Install on the initial directory.

      Note: This was built using webpack manually, there may still be some tweaks to configuration required.

Instructions

Clone repo to your local

PA C:\> git clone https://github.com/glitchy-sage/electron-react-blueprint.git APP_NAME

↓ Learn the root-level commands below ↓

Root-Level Commands

1. npm install - Runs install in root file and electron/react sub-directories. Note: This command will also run npm run postinstall automatically afterwards. This script is responsible for installing lower dependencies.

PS C:\electron-react> npm install 

2. npm run update - Runs update in root file and electron/react sub-directories. Note: Must be NPM RUN UPDATE, not just NPM UPDATE.

PS C:\electron-react> npm run update 

3. Serve Development Enviroment Commands

• npm start - Runs headless react server, then launches electron afterwards to communicate with the localhost:3000.

PS C:\electron-react> npm start 

• npm run serve:react - Runs react server on localhost:3000, then opens browser for viewing.

PS C:\electron-react> npm run serve:react 

• npm run serve:electron - Runs electron to communicate with the localhost:3000.

PS C:\electron-react> npm run serve:electron 

3. Application Build Commands

• npm run build - Runs build command for react, once completed it then runs electron build.

PS C:\electron-react> npm run build 

• npm run build:react - Runs build command for react. Note: At the end of this command, the build file is copied to the electron directory as "public". This is for the next phase of development.

PS C:\electron-react> npm run build:react 

• npm run build:electron - Runs build command for electron. Note: This command utilizes the config file found in './electron-react/electron/electron-builder.json. In order to edit these configurations I recommend reading up on electron-builder.

PS C:\electron-react> npm run build:electron 

React-Level Commands

1. npm install - Runs install in react file.

PS C:\electron-react\react> npm install 

2. Start Commands

• npm start - Runs react server on localhost:3000, then opens browser for viewing.

PS C:\electron-react\react> npm start 

• npm run start:headless - Runs react server on localhost:3000, this does not open a browser for your viewing.

PS C:\electron-react\react> npm run start:headless 

3. Build Commands

• npm run build - Build's react files into static files and places into './build' directory.

PS C:\electron-react\react> npm run build 

• npm run postbuild - Note: This is run automatically after build, you should not need to call this manually. Runs Powershell script to move './build/' folder to electron folder as './public/'.

PS C:\electron-react\react> npm run postbuild 

Electron-Level Commands

1. npm install - Runs install in electron file.

PS C:\electron-react\electron> npm install 

2. npm start - Runs electron as specified in the './src/main.js' file.

PS C:\electron-react\electron> npm start