reatty

Reatty

Out-of-box:

DEMO: You can find it here

But Reatty requires at least mock DB, so gh-pages demo doesn't work without mock data

What is it?

Simple, but robust boilerplate.

"Create-react-app/Next.js are better! Why you created this stuff?"

Yeah, I know, they are better :wink:
Personally, I spent more time on customizing Next.js than was spent on implementation of this starter.

I like Create-react-app and Next, but for me - these "template-killers" aren't always the best solution.

Why I need it?

Many templates currently aren't 100% ready - some setups have old dependencies versions (boilerplates with webpack v1.* is a good example), other templates are too small and you have to write setup code by yourself.

Also, this setup isn't a "template-killer", it's just a robust setup that works.

Pros:

• You have already some code pre-written.
• Code was written following React&Redux concepts (containers/components).
• Latest dependencies.
• Few webpack chunks + App is ready for offline.

Cons:

• You have already some code pre-written. But you always can remove it :)
• No SSR (currently).

Includes:

• React and Redux
• React-Router + React-Router-Redux
• JSON-server for dev purposes
• Redux-thunk
• Fetch polyfill
• Semantic-ui-react and normalize.css for UI
• Store2 - LocalStorage access
• Webpack 2, babel (stage-0 + decorators), Redux-dev-tools
• Jest - awesome library for easy testing.

Usage

git clone https://github.com/Metnew/reatty.git reatty
cd reatty && rm -rf .git  
npm install

Run:

npm run dev # run app in dev mode
npm run db  # run mock db for app(from another process)

Build:

npm run build # build app

It generates dist folder.

Test:

npm run test # run tests with Jest

You can take a look at more advanced example of testing here.

Folder structure:

│ Reatty
├── common - Your App
│   └── actions - application actions
│   ├── api - Services and XHR utils(also custom form validation, see InputComponent from components/common)
│   ├── components - components according to "Redux philosophy"
        └── common - common components of App, currently only wrapper for Semantic <Input /> component
│   ├── config - frontend config depending on REACT_WEBPACK_ENV
│   ├── containers - containers according to "Redux philosophy"
│   ├── reducers - application reducers
│   ├── routing - application routing
│   ├── styles - styles folder with scss vars, mixins, etc.
│   ├── index.jsx - project entry
│   ├── index.html
├── db // mock db
├── static - static assets(imgs, media)
├── webpack_config - Webpack configuration scripts

Also:

PRs, questions and issues are welcome)

LICENSE

MIT