https://github.com/djizco/electron-react-boilerplate
A Simple Electron Boilerplate for Desktop Apps. Uses Electron, React, Redux, Webpack, and more.
https://github.com/djizco/electron-react-boilerplate
babel bulma css electron eslint ramda react redux webpack
Last synced: 11 months ago
JSON representation
A Simple Electron Boilerplate for Desktop Apps. Uses Electron, React, Redux, Webpack, and more.
- Host: GitHub
- URL: https://github.com/djizco/electron-react-boilerplate
- Owner: djizco
- License: mit
- Created: 2016-11-20T20:32:37.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-10-03T05:17:39.000Z (over 3 years ago)
- Last Synced: 2025-04-29T14:36:03.134Z (about 1 year ago)
- Topics: babel, bulma, css, electron, eslint, ramda, react, redux, webpack
- Language: JavaScript
- Homepage:
- Size: 233 KB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Electron React Boilerplate
## Quick Start
#### for Development
```bash
npm install
npm run dev
# new window
npm start
```
#### for Production
```bash
npm run build
npm run pack
```
#### Other Commands
```bash
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](http://bradfrost.com/blog/post/atomic-web-design/).
## Technologies
[Electron](http://electron.atom.io/) - Desktop GUI Application
[React](https://facebook.github.io/react/) - View Library
[Redux](http://redux.js.org/) - State Manager
[Webpack](https://webpack.github.io/) - Code Packager for React
[Bulma](http://bulma.io/) - CSS Framework
[Material-UI](http://material-ui.com/) - React Element Library
[FontAwesome](http://fontawesome.io/) - Icons
[Ramda](http://ramdajs.com/) - Functional Library
[date-fns](https://date-fns.org/) - Date Functions Library
[ESLint](http://eslint.org/) - Code Linter
[Jest](https://jestjs.io/) - Testing Framework