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.

Pokud máte zájem o školení JavaScript, React.js, nebo Este.js, napište mi daniel@steigerwald.cz

Techniques

Truly universal architecture
- code shared across platforms (browser, server, native mobile)
- server side rendering or server-less pre-rendering to HTML files
- universal routing
- universal internationalization (with runtime language switching)
- universal crash reporting (via Sentry)
- universal data fetching
- universal forms with universal validation (universal ftw, yeah)
Well tuned dev stack (OS X, Linux, Windows)
Immutable app state
Stateless functional UI components with inline-styles
Flowtype
Vanilla hot reloading makes everything hot reloadable
Firebase integration (este.firebaseapp.com)
- useful predefined Redux actions
- email and facebook login
- declarative queryFirebase higher order component for Firebase imperative API
- user presence
Este is monorepo, read why.

Libraries

react and react native
redux
babeljs
immutablejs
react-router
react-router-redux
react-intl
redux-storage
webpack
expressjs
eslint
formatjs Universal internationalization.
react-helmet A document head manager for React.
webpack-isomorphic-tools
chriso/validator.js For simple yet powerfull Este sync/async validation.
bluebird Because it's better than native implementation.
AVA Futuristic JavaScript test runner.
SASS or plain CSS with autoprefixer
uuid Generate RFC-compliant UUIDs in JavaScript.
react-native-uuid node-uuid for react-native.
gulp Aren't NPM scripts better? No.
raven-js Crash reporting client for Sentry.
gulp-real-favicon Generate a multiplatform favicon with RealFaviconGenerator
react-native-fbsdk For Facebook Login in React Native. Follow the readme install notes.
rebass Configurable React Stateless Functional UI Components
And much more. Explore the repository.

Prerequisites

Optional

Facebook SDK for iOS In order to make Facebook login work on iOS
Facebook SDK for Android In order to make Facebook login work on Android
firebase-cli npm install -g firebase-tools
firebase-bolt npm install -g firebase-bolt
react-native-cli npm install -g react-native-cli

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

Create App

git clone --depth=1 https://github.com/este/este.git 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 -f run web app in development mode, but only browser source rebuilds on file changes
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

Flow

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

Documentation

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 :-)

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

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.

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.

Find the path to npm's directory: npm config get prefix For many systems, this will be /usr/local
Change the owner of npm's directory's to the effective name of the current user

sudo chown -R `whoami` <directory>

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.

Training

Credit

Made by Daniel Steigerwald and the community.

License

maniacs-js/este

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages