Starter kit for full–fledged React apps. One stack for browser, mobile, server.
JavaScript Objective-C CSS Other
Latest commit 5894cc9 Aug 25, 2016 @steida steida Remove the premature optimization, the bind in constructor.
We don’t have to bind handlers in constructors any more.
Arrow functions are just fine.
AirBnb eslint rules do not enforce in anymore.
This commit makes ES6 class consistent with stateless functional
The thing is, it’s up to Redux connect to shouldComponentUpdate
Failed to load latest commit information.
android React Native 0.31, Close #1052, Close #1045 Aug 6, 2016
firebase Close #1057 Aug 8, 2016
gulp Replace function declaration with arrow function and add some flow types Aug 21, 2016
ios React Native 0.31, Close #1052, Close #1045 Aug 6, 2016
messages FormattedHTMLMessage considered harmful Aug 16, 2016
src Remove the premature optimization, the bind in constructor. Aug 25, 2016
webpack Replace function declaration with arrow function and add some flow types Aug 21, 2016
.babelrc removed 'transform-react-inline-elements' Jul 26, 2016
.buckconfig Upgrade to React and React Native May 25, 2016
.editorconfig New universal Este initial commit Oct 13, 2015
.eslintignore Update .eslintignore Feb 26, 2016
.eslintrc Remove the premature optimization, the bind in constructor. Aug 25, 2016
.flowconfig Enable Flowtype, Close #823 Aug 10, 2016
.gitattributes New universal Este initial commit Oct 13, 2015
.gitignore Update React Native 0.28, Close #970 Jul 2, 2016
.node-version Upgrade to Node 6, Close #846 May 26, 2016
.watchmanconfig New universal Este initial commit Oct 13, 2015
ISSUE_TEMPLATE .github dir is too much ceremony May 13, 2016
LICENSE New directories Sep 19, 2015
Procfile New universal Este initial commit Oct 13, 2015 Merge pull request #1074 from radek-novak/master Aug 15, 2016
circle.yml Upgrade to Node 6, Close #846 May 26, 2016
firebase.json Update firebase.json for new cli tool May 27, 2016
gulpfile.babel.js Ups Jul 28, 2016 Add native main.js May 9, 2016
index.ios.js Add native main.js May 9, 2016
package.json css-loader 0.24.0 Aug 24, 2016


Circle CI Join the chat at Dependency Status GitHub license

Happily maintained dev stack and starter kit for React universal apps. One stack for browser, server, mobile. Forget about evil frameworks, use laser focused libraries and design patterns instead.

You don't have to start with everything. Este is perfect even for plain static pages. You can gracefully add any platform later. Este mission is simple: Help startups to deliver minimal valuable product asap with the state of the art real-time universal app stack.

Další školení Este.js bude 23. a 24. srpna v Praze. Dva dny za 9 800 Kč. Pokud máte zájem nebo otázky, napište mi


  • Truly universal architecture
    • code shared across platforms (browser, server, native mobile)
    • server side rendering
    • universal data fetching (unique approach without react-router)
    • an optional rendering to HTML files (for static hostings)
    • universal internationalization with runtime language switching
    • universal crash reporting via Sentry
    • universal forms with universal validation (universal ftw, yeah)
  • Well tuned dev stack (OS X, Linux, Windows)
  • Immutable app state
  • Firebase integration (
    • useful predefined Redux actions
    • email and facebook login
    • declarative queryFirebase higher order component for Firebase imperative API
    • user presence
  • Este is monorepo, read why.



  • node.js Node 6 with NPM 3 is required.
  • gulp npm install -g gulp
  • git git cmd tool is required


If you are using different node versions on your machine, use nvm to manage them.

Create App

git clone --depth=1 este-app
cd este-app
npm install

Start Development

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

React Native: Getting Started

Dev Tasks

  • gulp run web app in development mode
  • gulp ios run iOS app in development mode
  • gulp android run Android app in development mode
  • gulp -p run web app in production mode
  • gulp ava run ava unit tests
  • gulp ava-watch continuous test running for TDD
  • gulp eslint eslint
  • gulp eslint --fix fix fixable eslint issues
  • gulp messages-extract extract messages for translation
  • gulp messages-check check missing and unused translations
  • gulp messages-clear remove unused translations
  • gulp favicon create universal favicon

Production Tasks

  • gulp build -p build app for production
  • npm test run all checks and tests
  • node src/server start app, remember to set NODE_ENV and SERVER_URL
  • gulp to-html render app to HTML for static hosting like Firebase
  • gulp deploy-heroku deploy Heroku app
  • gulp deploy-firebase deploy Firebase app
  • gulp deploy-firebase-database deploy Firebase database only

Customize Este App

  • set name in package.json
  • set locales, firebaseUrl, sentryUrl, etc. in src/server/config.js
  • remove unused locale-data from src/browser/index.js
  • set routes in src/browser/createRoutes.js and src/native/routes.js
  • set title, links, etc. in src/browser/app and src/native/app dirs
  • change src/common/app/favicons/original/favicon.png, then gulp favicon
  • delete unused app features, todos for example: src/{platform}/todos
  • remove unused reducers from src/common/configureReducer.js
  • modify your FB app_id e.g. for iOS


  • install
  • go to Nuclide settings, enable "Use the Flow binary included in each project"


For absolute beginners, see: react-howto.

So you've decided to give this web stack a chance, but where is the documentation? Code is documentation in itself as it illustrates various patterns, but to start with you should educate yourself on React.js and Redux. You should learn ES6 to refresh your knowledge about "new" JavaScript practices and syntax. This stack uses immutable.js and class-less design for a good reason. Express.js is used on the Node.js based server. The application architecture is universal so we can share code between the browser, server, & mobile platform easily. Congrats, you're Este.js expert level 1 now :-)



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

Tips and Tricks

  • Open developer console to check current app state.
  • With functional programming (SOLID: the next step is Functional), we don't need DI containers. We can use plain old Pure DI. Check injectMiddleware in configureMiddleware.
  • Learn immutable.js, for example Seq. Handy even for native arrays and objects. For example, get object values: Seq(RoomType).toSet().toJS()
  • Recommended editor is Atom. Check settings.


Why do I get EACCES error during npm install?

This indicates that you do not have permission to write to the directories that npm uses to store packages and commands. One possible solution is to change the permission to npm's default directory.

  1. Find the path to npm's directory: npm config get prefix For many systems, this will be /usr/local
  2. Change the owner of npm's directory's to the effective name of the current user sudo chown -R `whoami` <directory>

Why does the CSS flicker when starting the app/refreshing it?

In dev mode, webpack loads all the styles inline, which makes them hot reloadable. This behaviour disappears in production mode (gulp -p).

Does Hapi/SailJS/Restify/Rails work with Este? Do you have any example app for this framework?

Yes it does. Este is agnostic of what you use in your backend and is completely decoupled from the API. It uses an Express app for server-side rendering, but you can use anything for your API. The only benefit that an Express API has is that it can simply be called with a use() statement by the main app, just like any other middleware.

Is it possible use XYZ library with Este?

Yes. Este tries to make as few assumptions about your stack as possible. This is not a framework, nothing prevents you from picking the bits you're interested in.

How is React Native used in this project?

In the same way as any other React Native project is created via react-native init AwesomeProject. But thanks to the universal application design we can easily share modules across platforms.



Made by Daniel Steigerwald and the community.