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.
Další školení JavaScriptu, Reactu, Este.js se koná 5. a 6. května v Praze. Cena je 9800 Kč, pokud se registrujete nyní. Pište na [email protected].
- Truly universal architecture
- code shared across platforms (browser, server, native mobile)
- server side rendering
- universal data fetching
- an optional rendering to HTML files (for static hosting)
- universal internationalization with runtime language switching
- universal forms with universal validation (universal ftw, yeah)
- Functional works (immutability, hot reload, time traveling)
- Test driven development
- Advanced performance with pure components
- Well tuned dev stack
- Firebase Redux integration (este.firebaseapp.com)
- useful predefined actions
- email and facebook login
- declarative queryFirebase higher order component for Firebase imperative api
- Este is monorepo, read why.
- 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.
- mochajs The fun, simple, flexible JavaScript test framework.
- SASS or plain CSS with autoprefixer
- shortid Short id generator. Url-friendly. Non-predictable.
- gulp Aren't NPM scripts better? No.
- And much more. Explore the repository.
If you are using different node versions on your machine, use nvm to manage them.
git clone https://github.com/este/este.git este-app
cd este-app
npm install
- run
gulp
- point your browser to localhost:8000
- build something beautiful
React Native: Getting Started
gulp
run web app in development modegulp ios
run iOS app in development modegulp android
run Android app in development modegulp -p
run web app in production modegulp mocha
run mocha unit testsgulp mocha-watch
continuous test running for TDDgulp eslint
eslintgulp eslint --fix
fix fixable eslint issuesgulp extractDefaultMessages
extract messages for translation
gulp build -p
build app for productionnpm test
run all checks and testsnode src/server
start app, remember to set NODE_ENV and SERVER_URLgulp to-html
render app to HTML for static hosting like Firebasegulp deploy
deploy app
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
- 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
injectMiddleware
inconfigureStore
. - 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 (tips) and atom.io.
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>
In dev mode, webpack loads all the styles inline, which makes them hot reloadable. This behaviour disappears in production mode (gulp -p
).
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.
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.
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. But remember to check gulpfile.babel.js for details.
- Este.js dev stack works on OSX, Linux, and Windows.
- As a rule of thumb, Este.js supports all evergreen browsers plus the last two major versions of IE.
- Support Este.js development via Bitcoin - daniel.steigerwald.cz/#donate-estejs
Made by Daniel Steigerwald, twitter.com/steida and the community.