Reactatouille provides a simple boilerplate setup to allow the developer to focus in what matters.
## Getting Started These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. Clone the repository to your local environment, install any dependencies and install the packages. Run the development command to start a local server, run the test command to run unit tests and the build command to create a new version for release. Use the `config.js` in the root to set any parameters, such as the `repository remote list`, it's recommended to use a PaaS like Heroku or alike to easy deployment. ### Pre-requisities ``` Nodejs & NPM ``` ### Installing ``` yarn install ``` ### Build for distribution You must run the build commands to generate a bundle js, css, images, fonts, etc, to distribute it into your test, staging or production environments. To so, you can run the commands below, that will generate the files under the `/dist` directory. ``` gulp build --env development ``` *this one in particular is only relevant if you wish to have stylesheets for server-side rendering, when in development. Otherwise, you'll see the components not styled. Or, ``` gulp build --env staging ``` Or, ``` gulp build --env production ``` ### Development ``` yarn start ``` or, ``` gulp ``` ### Test runner ``` yarn test ``` ### Tests The tests are split in two different categories, Unit and End-to-end (integration) tests. These are run separately, there are two different tasks for that matter: `gulp unit_test` & `gulp end2end_test`. ### Preview the app for distribution Run the command below to create a small web server to serve the app that exists for distribution ( remember to run the build command to create the `dist` directory for the desired `environment`). ``` gulp preview --env staging ``` Or ``` gulp preview --env production ``` ### Build architecture Find the source code under the `src` directory for javascript and `sass` for the stylesheets. Before modifying ensure that the development watcher is running by running the development watch command (see development notes). The `dist` directory holds the files ready for distribution. ### Bundle Analyzer Find report in `/dist/development/report.html`, utility report that represents bundle content as convenient interactive zoomable treemap This will help you: Realize what's really inside your bundle Find out what modules make up the most of it's size Find modules that got there by mistake Optimize it! ## Service worker You may find some data persistent, that's related with the service workers, please do on your browser console: navigator.serviceWorker.getRegistrations().then(function(registrations) { for(let registration of registrations) { registration.unregister() } }) ## Organizing the Redux application The first time you browse the javascript source directory you may find the way files are organized unusual. The approach Reactatouille exposes is based on an article published by Jack Hsu; A very good read, that explains how to better organize code in the context of a React and Redux application but not exclusively ( https://jaysoo.ca/2016/02/28/organizing-redux-application/ ). While opinionated, you may want to organize it differently, as it was in previous versions of Reactatouille. ## Built With * ReactJS * React Router 4 * Webpack 2 * SASS * ES2015 * GULP * JEST * ENZYME * POPMOTION * STANDARDJS * UNIVERSAL / ISOMORPHIC * REDUX DEVTOOLS (Browser extension support) * SERVICEWORKER / APPCACHE ### Logo