Electron React Boilerplate

Quick Start

for Development

npm install
npm run dev

# new window
npm start

for Production

npm run build
npm run pack

Other Commands

npm test
npm run test:verbose
npm run lint
npm run lint:fix

Setup Instructions

To setup your own project, you will need to copy the contents of this project into a new repo. You will need to update the content in these files to names of your project and yourself:

package.json: name, version, description, repository, author, bugs, homepage,
LICENSE: (update to your preferred license)
app/index.html: description and title
this README.md

This is also a good time to go through the included libraries to add or remove features that you want.

After this you can commit the files into a new repository and push up to your github. You can now start updating files in your client to begin working on your own project!

Features

Webpack conveniently bundles your code for you.
Babel lets you use ES6/7 features.
CSS pre-processor setup for LESS and SASS lets you keep your styles clean and organized.
ESLint helps you maintain a high level of code quality.
Jest and Enzyme give you a robust testing frame work to make sure your code works.

Code Structure

- config
- scripts
- app
  - assets
    - images
    - icons
  - components
    - atoms
    - molecules
    - organisms
    - templates
    - pages
    - environment
  - hooks
  - store
    - actions
    - reducers
    - thunks
    - tests
  - styles
  - utils

Component Heirarchy:

Environment > Pages > Templates > Organisms > Molecules > Atoms

This is based on atomic design. Learn more about atomic design.

Technologies

Electron - Desktop GUI Application

React - View Library

Redux - State Manager

Webpack - Code Packager for React

Bulma - CSS Framework

Material-UI - React Element Library

FontAwesome - Icons

Ramda - Functional Library

date-fns - Date Functions Library

ESLint - Code Linter

Jest - Testing Framework

djizco/electron-react-boilerplate