The most complete React/Flux dev stack and starter kit for universal functional web apps. Forget about evil frameworks, learn laser focused libraries and patterns instead.

Techniques

• Universal JavaScript (formerly isomorphic), one dev stack for browser, server, desktop, mobile.
• Functional works: App state snapshots, time travel, hot reload everything.
• React with server side rendering on expressjs backend.
• Super minimal Flux with atomic immutable.js app state for fast rendering and sane state management.
• ECMAScript 2015+ with babeljs.io. JSX and Flowtype syntax supported. Sourcemaps are enabled by default.
• Well tuned webpack dev stack with handy notifier. TDD ready.
• Karma as the test runner, mocha as test framework, and Chai as BDD / TDD assertion library.
• Shallow rendering for testing React components without DOM.
• eslint ES6 linting with React JSX support. (Sublime Text 3 integration)
• Localization via formatjs.io, stale browsers supported as well.
• react-router for routing on client and server side.
• Simple yet powerfull sync/async validation based on famous chriso/validator.js
• Login and Signup example, requireAuth higher order component to protect access to specific pages.
• LESS, SASS, Stylus, or plain CSS with autoprefixer.
• Easy undo/redo and load/save for app state.

Prerequisites

Install node.js. Then install gulp.js.

npm install -g gulp

Windows

Use this if you are using JEST or another library, which has to be compiled.

• Install Python - Install version 2.7 of Python and add it to your path or/and create a PYTHONPATH environment variable.
• Install Visual Studio (Express Edition is fine) - We will need this for some of modules that are compiled when we are installing Este. Download VS Express, get one of the versions that has C++ - Express 2013 for Windows Desktop for example.
• Set Visual Studio Version Flags - We need to tell node-gyp (something that is used for compiling addons) what version of Visual Studio we want to compile with. You can do this either through an environment variable GYP_MSVS_VERSION. If you are using Express, you have to say GYP_MSVS_VERSION=2013e.

Thanks to Ryanlanciaux

Create App

git clone https://github.com/este/este.git este-app
cd este-app
npm install

To create an empty app, clone https://github.com/este/bare.git.

Start Development

• run gulp
• point your browser to localhost:8000
• build something beautiful

Dev Tasks

• gulp run app in development mode
• gulp -p run app in production mode
• gulp test run eslint, karma-ci, webpack build for production
• gulp tdd run app in dev mode with Karma configured for test driven development

CI Tasks

• npm start just run app, remember to set NODE_ENV=production and others environment variables.
• npm postinstall just alias for gulp build --production, useful for Heroku.
• npm test just alias for gulp test

Documentation

So you decided to give a chance to this web stack, but where is documentation? Code is documentation itself as it illustrates various patterns, but for start you should read something about React.js. Then you should learn what is the Flux application architecture. Now refresh you JavaScript knowledge about "new" JavaScript - learn ES6. This stack uses immutable.js and class-less design for a good reason. Check this nice short video, wouldn't be possible with classic OOP classes everywhere approach. Functional programming is a next (current) big thing, read why. Express.js is used on the Node.js based server. Application is universal, so we can share code between browser, server, mobile, whatever easily. Congrats, you're Este.js expert level 1 now :-)

Links

• wiki: Recommended React Components
• wiki: Recommended Sublime Text 3 Packages
• twitter.com/estejs
• github.com/enaqx/awesome-react

Tips and Tricks

• To check app state, press ctrl+shift+s, then open console.
• With global app state, we don't need IoC container so badly - SOLID: the next step is Functional. Still DI is relevant for some cases and then use Pure DI.
• Learn immutable.js, for example Seq. Very handy even for native arrays and objects. For example, get object values: Seq(RoomType).toSet().toJS()
• Even though we can use import {canUseDOM} from 'react/lib/ExecutionEnvironment' to detect browser/server, don't do it since it's runtime value. Use webpack DefinePlugin to set process.env.IS_BROWSER rather, because compilation removes dead code.
• How to use Closure Tools, gist
• Recommended editors are sublimetext and atom.io (tips).
• When gulp command fails with No gulpfile found. Problem is with gulp version on your system. Simple fix: gulpjs/gulp-cli#27 (comment)

Training

• learn-reactjs.com
• javascript-skoleni.cz
• DzejEs.cz - czech articles about Este

Notes

• Este.js dev stack works on OSX, Linux, and Windows. Feel free to report any issue.
• As a rule of thumb, Este.js supports all evergreen browsers plus last two pieces of IE.
• You can support Este.js development via Bitcoin - daniel.steigerwald.cz/#donate-estejs

Credit

made by Daniel Steigerwald, twitter.com/steida