React-Lyef redux boilerplate: An opionated structure to create projects using React, Redux and Webpack.

Lyef Redux Boilerplate

NPM

An opionated structure to create projects using React, Redux and Webpack.

Webpack Dashboard for Lyef Redux Boilerplate

Getting Started

Just clone this repository and install everything with npm install.

You’ll need to have Node >= 4 on your machine. We recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.

Folders and Files

├── images
├── src
│   ├── actions
│   ├── components
│   ├── containers
│   ├── reducers
│   ├── services
│   ├── styles
│   │   ├── base
│   │   ├── compoents
│   │   ├── generic
│   │   ├── objects
│   │   ├── settings
│   │   ├── tools
│   │   ├── trumps
│   │   └── style.styl
│   ├── views
│   ├── app.js
│   ├── configureStore.js
│   ├── constants.js
│   ├── history.js
│   ├── root.js
│   └── routes.js
├── tests
│   ├── specs
│   │   └── views
│   ├── utils
│   │   └── helper.js
│   └── setup.js
├── webpack
│   ├── base.js
│   ├── dev.js
│   └── prod.js
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .npmrc
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── index.html
└── package.json

Commands

  • npm start: start a server on http://localhost:8000.
  • npm test: run your tests in a single-run mode.
  • npm run test:tdd: run and keep watching your test files.
  • npm run lint: lint all files searching for errors.
  • npm run lint:fix: fix automaticaly some lint errors.
  • npm run ci: run tests and lint.
  • npm build: build the project at dist.

Stack

  • React
  • React Router
  • Redux
  • Babel 6 - Javascript Compiler.
  • Webpack - Javascript module bundler.
  • Webpack Dashboard
  • Eslint - The pluggable linting utility for JavaScript and JSX.
  • Husky - Git hooks made easy.
  • Mocha - JavaScript test framework.
  • Chai - BDD / TDD assertion library.
  • Sinon - Standalone test spies, stubs and mocks for JavaScript.
  • Nyc - Istanbul command line interface.
  • Enzyme - JavaScript Testing utility for React.
  • JSDOM - A JavaScript implementation of the WHATWG DOM and HTML standards.
  • Stylus - Preprocessor CSS
  • PostCSS - A tool for transforming CSS with JavaScript

As you can see, we use a lot of great tools and if you want to see more, take a look at our package.json.

Code Standarts

This project uses eslint and .editorconfig is defined to have indent_size of 4 spaces. You can change that on .eslintrc file.

This project also uses Husky to prevent to push code with lint errors or broken tests. If you don't want this, you can uninstall running npm uninstall --save-dev husky and deleting the prepush command on package.json.

Contributing

We'd love to have your helping hand on our lyef-redux-boilerplate! See CONTRIBUTING.md for more information on what we're looking for and how to get started.

License

MIT License @ lyef

Comments

  • Update README.md
    Update README.md

    Nov 9, 2017

    changed webpack url site

    Reply
  • Problem React Router in Production
    Problem React Router in Production

    Mar 3, 2018

    Hi Guys, I did the following test:

    1. created route <Route exact path="/hello" component={HelloWorld} />
    2. Run build
    3. serve dist/

    And I went to the route /hello

    and don't work

    screen shot 2018-03-04 at 01 57 43

    Reply
  • fix indent_style in editorconfig
    fix indent_style in editorconfig

    Feb 16, 2018

    according to documentation:

    indent_style: set to tab or space to use hard tabs or soft tabs respectively.

    Don't spaces

    Reply
  • Upgrade dependencies
    Upgrade dependencies

    Aug 27, 2017

    Upgrade project dependencies.

    enhancement 
    Reply
  • Incorrect name in folder components of styles
    Incorrect name in folder components of styles

    Feb 19, 2017

    the folder components inside src/stylesIt's written wrong.

    Reply
  • Add css file minified
    Add css file minified

    Oct 19, 2017

    Hi guys,

    What do you think to add css files minified?

    Reply
  • @font-face not working
    @font-face not working

    Feb 2, 2017

    Estou usando esse boilerplate aqui na empresa que trabalho e estou tendo um problema na hora de renderizar as fonts.

    webpack Loader

    {
       test: /\.(eot|woff|ttf)$/,
       loader: 'file-loader?name=/css/fonts/[name].[ext]',
    },
    
    

    Assets

    screen shot 2017-02-02 at 11 38 28

    Folders Struct

    ├── src
    │   ├── actions
    │   ├── components
    │   ├── containers
    │   ├── reducers
    │   ├── services
    │   ├── styles
    │   │   ├── fonts
    │   │   └── style.styl
    

    Stylus

    @font-face
    	src: url('./AvantGarITCbyBTExtLig.eot')
    	src: url('./AvantGarITCbyBTExtLig.woff') format('woff'), url('./AvantGarITCbyBTExtLig.svg#AvantGardeITCbyBT-ExtraLight') format('svg')
    	font-weight: 300
    	font-style: normal
    
    @font-face
    	font-family: 'Avant Garde'
    	src: url('./AvantGarITCbyBTBoo.eot')
    	src: url('./AvantGarITCbyBTBoo.woff') format('woff'), url('./AvantGarITCbyBTBoo.svg#AvantGardeITCbyBT-Book') format('svg')
    	font-weight: normal
    	font-style: normal
    
    @font-face
    	font-family: 'Avant Garde'
    	src: url('./AvantGarITCbyBTMed.eot')
    	src: url('./AvantGarITCbyBTMed.woff') format('woff'), url('./AvantGarITCbyBTMed.svg#AvantGardeITCbyBT-Medium') format('svg')
    	font-weight: 700
    	font-style: normal
    
    @font-face
    	font-family: 'El-Iconfont'
    	src: url('./El-Iconfont.eot?p7b85o')
    	src: url('./El-Iconfont.eot?p7b85o#iefix') format('embedded-opentype'), url('./El-Iconfont.ttf?p7b85o') format('truetype'), url('./El-Iconfont.woff?p7b85o') format('woff'), url('./El-Iconfont.svg?p7b85o#El-Iconfont') format('svg')
    	font-weight: normal
    	font-style: normal
    
    
    
    
    Reply
  • Dependecy upgrade
    Dependecy upgrade

    Sep 2, 2017

    This PR is in progress, just opened to mark all tasks that need to be done

    Upgrade all project dependencies

    Tasks List

    • [x] Upgrade Dev Dependencies
    • [x] Upgrade Dependencies
    • [x] Fix lint errors
    • [x] Fix Alias in eslint
    • [x] Fix PostCSS in webpack
    • [x] Upgrade to [email protected]
    • [x] Squash commits and rewrite history
    Reply