joeysherman/este

Starter kit for universal full–fledged React apps. One stack for browser, mobile, server.

Starter kit for universal full–fledged React apps. One stack for browser, mobile, server.

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 minimum viable 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, podívejte se na javascript-skoleni.cz.

Techniques

• universal architecture with immutable app state
  • code shared across platforms (browser, server, native mobile)
  • server side rendering or server-less pre-rendering to HTML files
  • universal internationalization
  • universal crash reporting
  • universal data fetching
  • universal forms with universal validation
  • universal components with universal styles
• stateless functional UI with dynamic typed styles
• flowtype FTW
• vanilla hot reloading makes everything hot reloadable
• Firebase integration (este.firebaseapp.com)
  • email and facebook login
  • declarative queryFirebase higher order component for Firebase imperative API
  • users presence

Libraries

• redux
• redux-observable
• found
• ramda
• react-intl
• redux-persist
• formatjs
• jest Painless JavaScript Testing.
• raven-js Crash reporting client for Sentry.
• fela Universal, Dynamic & High-Performance Styling in JavaScript
• And much more. Explore the repository.

Prerequisites

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

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
cd este
yarn (or 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 jest run jest tests
• gulp jest-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
• gulp prettier prettify source code

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
• gulp to-html render app to HTML for static hosting like Firebase
• gulp deploy-now deploy to Now
• gulp deploy-heroku deploy to Heroku
• gulp deploy-firebase deploy to Firebase
• 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
• change src/common/app/favicons/original/favicon.png, then gulp favicon and gulp -p
• modify your FB app_id e.g. for iOS

Links

• wiki
• twitter.com/estejs

Tips

• Recommended editor is Atom. Check settings.
• Install nuclide.io, enable "Use the Flow binary included in each project".

Credit

Made by Daniel Steigerwald and the community.