The best dev stack and starter kit for React universal web apps.
Forget about evil frameworks, use laser focused libraries and design patterns instead.
If you are using different node versions on your machine, use
nvm to manage them.
- Functional works: App state snapshots, time travel, hot reload everything.
- React with server side rendering on expressjs backend.
- React Native for iOS and Android (wip).
- Redux Flux with atomic immutable.js app state.
- ECMAScript 2015+ with babeljs.io. JSX and Flowtype syntax supported. Sourcemaps enabled by default.
- react-router for isomorphic routing.
- Universal/Isomorphic data fetching example.
- Well tuned webpack dev stack.
- eslint (Sublime Text 3 integration)
- Localization via formatjs.io.
- Simple yet powerfull sync/async validation based on chriso/validator.js
- LESS, SASS, Stylus, or plain CSS with autoprefixer.
- Long Term Caching.
- React Helmet for handling Title and Meta changes on server and client
- And much more.
git clone https://github.com/este/este.git este-app cd este-app npm install
- point your browser to localhost:8000
- build something beautiful
gulprun web app in development mode
gulp -prun web app in production mode
gulp testtest app
- wiki: Recommended React Components
- wiki: Recommended Sublime Text 3 Packages
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
- To check current app state, just open browser console.
- With functional programming (SOLID: the next step is Functional), we don't need DI containers. We can use plain old Pure DI. Check
- Learn immutable.js, for example Seq. Handy even for native arrays and objects. For example, get object values:
- Recommended editors are sublimetext and atom.io (tips).
Why do I get EACCES error during
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.
- Find the path to npm's directory:
npm config get prefixFor many systems, this will be
- 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 style inline, which makes them hot reloadable. This behaviour disappears in production mode (
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
use() by the main app, like any other middleware.
Is it possible use XXX library with Este?
Yes. Este makes little assumptions about your stack, and passing every bit of needed info through props. This is not a framework, nothing prevents you from picking the bits you're interested in.
Why Este is pure and why we have to pass data through props?
Pure means no side effects. Programming without side effects rocks. It allows us to hot reload everything and testing is much easier as well. When component renders only data passed through props, shouldComponentUpdate can be implemented only once per whole app. One can say it's verbose, but it isn't. It's explicit. And remember, we have to pass only data going to be rendered. Actions have access to app state.
- Este.js dev stack works on OSX, Linux, and Windows.
- As a rule of thumb, Este.js supports all evergreen browsers plus last two pieces of IE.
- Support Este.js development via Bitcoin - daniel.steigerwald.cz/#donate-estejs
made by Daniel Steigerwald, twitter.com/steida, @grabbou and the community