este 0 editorconfig eslint circleci gulp npm

The most complete React/Flux dev stack and starter kit for isomorphic functional web apps. Este.js acts as a next-gen to-go everything-but-the-kitchen-sink boilerplate.

Este.js

Circle CI Join the chat at https://gitter.im/este/este Dependency Status Deploy

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.

Prerequisites

  • node.js (Node 5 with npm 3 is required).
  • gulp (npm install -g gulp)

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

Techniques

  • Truly universal architecture
    • code shared across platforms
    • server side rendering
    • isomorphic data fetching
    • prerender for static hosting
  • Functional works: immutability, hot reloading, time travel
  • Test driven development ready

Libraries

Installing

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

Start Development

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

React Native: facebook.github.io/react-native/docs/getting-started.html

Dev Tasks

  • gulp run web app in development mode
  • gulp -p run web app in production mode for local testing
  • npm test run all checks and tests
  • gulp mocha run mocha unit tests
  • gulp eslint eslint app

Production Tasks

  • gulp build -p build app for production, for example for Heroku
  • node src/server start app, remember to set NODE_ENV=production
  • gulp to-html render app to HTML for static hosting like Firebase

Documentation

For absolute beginners: react-howto.

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 and Redux. Refresh you JavaScript knowledge about “new” JavaScript - learn ES6. This stack uses immutable.js and class-less design for a good reason. 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

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

Tips and Tricks

  • To check current app state, just open browser console.
  • Install Redux devtools Chrome extension zalmoxisus/redux-devtools-extension
  • With functional programming (SOLID: the next step is Functional), we don’t need DI containers. We can use plain old Pure DI. Check injectDependencies middleware in configureStore.
  • Learn immutable.js, for example Seq. Handy even for native arrays and objects. For example, get object values: Seq(RoomType).toSet().toJS()
  • Recommended editors are sublimetext and atom.io (tips).

FAQ

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 style 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 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.

How React Native is used in this project?

Just as regular React Native project created via react-native init AwesomeProject. We can easily share modules across platforms. But remember to check gulpfile.babel.js for details.

Training

Notes

  • 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

Credit

Este.js

made by Daniel Steigerwald, twitter.com/steida and the community

Related Repositories

este

este

Starter kit for universal full–fledged React apps. ...

curso-responsive-design

curso-responsive-design

este es el repositorio oficial para el curso de responsive design, en el cual puedes mandar todos tus aportes al codigo o simplemente tenerlo de referencia para tu aprendizaje descargándolo o clonandolo en tu computadora ...

clase-de-github

clase-de-github

Este es un ejemplo de Github para la comunidad de #mejorandola ...

curso-responsive-design

curso-responsive-design

este es el repositorio oficial para el curso de responsive design, en el cual puedes mandar todos tus aportes al codigo o simplemente tenerlo de referencia para tu aprendizaje descargándolo o clonandolo en tu computadora ...

content-request

content-request

Este reposiório visa facilitar a indexação de conteúdo gerado pela comunidade Laravel Brasil. ...


Top Contributors

steida grabbou XeeD robi42 tajo ondrejbartas zigomir ironer amowu srigi AugustinLF rkoberg AlesJiranek ja-be solcik dougnukem fabriciocolombo geoRG77 iamhollow obimod mikker pstanisl sunnylqm bulby97 Restuta andykenward danielhusar schovi dmnd svains

Releases

-   9.2.0 zip tar
-   9.0.0 zip tar
-   7.0.2 zip tar
-   7.0.1 zip tar
-   7.0.0 zip tar
-   6.3.8 zip tar
-   6.3.7 zip tar
-   6.3.6 zip tar
-   6.3.5 zip tar
-   6.3.4 zip tar
-   6.3.3 zip tar
-   6.3.2 zip tar
-   6.3.1 zip tar
-   6.2.0 zip tar
-   6.1.0 zip tar
-   6.0.2 zip tar
-   6.0.1 zip tar
-   5.1.0 zip tar
-   5.0.2 zip tar
-   5.0.1 zip tar
-   5.0.0 zip tar
-   4.2.1 zip tar
-   4.2.0 zip tar
-   4.1.0 zip tar
-   4.0.0 zip tar
-   3.9.5 zip tar
-   3.9.4 zip tar
-   3.9.3 zip tar
-   3.9.2 zip tar
-   3.9.1-0 zip tar