Yet another FLUX starter kit

Features

• Creating an isomorphic, FLUX application using frill-core, React and hapi
• Configrations, i18n, file-loading using frill-utils
• Automatically creates API using dogwater (waterline from sails) and footprints
• Supports local authentication.
• Supports JSON Web Tokens and OAuth for authentication using hapi-auth-jwt2.
• Watch and automatic builds using gulp, webpack, and Babel
• Auto-reload using Browsersync, and nodemon
• Documentation using ESDoc, and hapi-swagger for the API
• Lints using ESLint, alternatively JSHint
• Testing with Mocha, Chai, Sinon.js, and jsdom
• Styles using Stylus
• Example of a model using Sequelize
• Deployments using Shipit
• and many more!

You can always implement anything yourself.

Getting Started

$ npm install -g frill

NOTE: use sudo if necessary

then, the command below creates a new project from your current directory:

$ frill new appName

if you only want the front-end (for creating isomorphic flux app), use:

$ frill frontend appName

if you only want the back-end (for creating APIs with hapi), use:

$ frill backend appName

Building your app

$ npm run build

or

$ gulp build

building your app for release, use:

$ npm run build-release

or

$ gulp build --release

Run app and watch for changes

$ npm start

or

$ npm run watch

or

$ gulp

Run your app as a daemon

Start app

$ npm run service-start

Stop app

$ npm run service-stop

Restart app

$ npm run service-restart

See forever for more information.

Deploying your app

Install Shipit

$ npm install -g shipit

Configure deployments inside ./config/default.js to your environment, then

For production

$ shipit production deploy

For staging

$ shipit staging deploy

shipit (environment) pwd, shipit (environment) start, shipit (environment) stop, shipit (environment) restart is configured by default.

See Shipit and shipit-deploy for more information.

Testing your app

$ npm test

exports NODE_ENV=test automatically

or

$ NODE_ENV=test gulp test

IMPORTANT: You should always use test for your NODE_ENV environment variable to make sure that your production/development database will not be affected by tests

Project directory structure

When using the new command:

.
├─ /docs/                   # Documentation files for the project
├─ /node_modules/           # 3rd-party libraries and utilities
├─ /public/                 # The folder for compiled output and serving
├─ /src/                    # The source code of the application
│  ├─ /actions/             # Actions that allow to trigger a dispatch to stores
│  ├─ /api/                 # REST API /api/ endpoints
│  │   ├─ /auth/            # Authentications
│  │   │  └─ /strategies/   # Authentication strategies
│  │   ├─ /footprints/      # Customize footprint routes
│  │   │  └─ /user.js       # An example for customizing footprint routes (filename must be identical with the model name)
│  │   ├─ /v1/              # Place your version 1 api routes here
│  │   └─ routes.js         # File to include all your API routes
│  ├─ /assets/              # Asset files should be placed here
│  │   └─ /images/          # Image files
│  ├─ /components/          # Place your Frill(or React) Components here
│  │   ├─ /Mediators/       # Components which watches the stores, dispatch actions, etc.
│  │   ├─ /Pages/           # Page components used in react-router (src/config/routes.jsx)
│  │   ├─ /UI/              # The 'dumb' (mainly)render-only components
│  │   └─ App.jsx           # A component which wraps around the app
│  ├─ /config/              # All configuration files are placed here
│  │   ├─ /env/             # Environment-specific configurations are placed here
│  │   │  ├─ /development/  # Configurations used in NODE_ENV = 'development'
│  │   │  └─ /production/   # Configurations used in NODE_ENV = 'production'
│  │   ├─ /locales/         # Language files are placed here
│  │   ├─ api.js            # Configurations for API routes
│  │   ├─ cache.js          # Configurations for hapi's caching
│  │   ├─ config.js         # Configurations for configurations
│  │   ├─ cors.js           # Configurations for CORS(Cross-Origin Resource Sharing)
│  │   ├─ deployment.js     # Configurations for deployments
│  │   ├─ footprints.js     # Configurations for footprints (Builds routes automatically from models)
│  │   ├─ i18n.js           # Configurations for internationalizations
│  │   ├─ logs.js           # Configurations for hapi's logging
│  │   ├─ models.js         # Configurations for models (Using 'dogwater' by default)
│  │   ├─ routes.jsx        # Routes for 'react-router'
│  │   ├─ server.js         # Basic configurations for hapi
│  │   ├─ session.js        # Configurations for sessions
│  │   └─ strategies.js     # Configurations for authentication strategies
│  ├─ /helpers/             # All helper methods/classes should be placed here
│  ├─ /models/              # Dogwater (waterline) models to use inside API
│  ├─ /stores/              # Stores that allow to emit changes to components
│  ├─ /styles/              # CSS(Stylus) files should be placed here
│  ├─ /templates/           # Template files should be placed here
│  ├─ /bootstrap.js         # Bootstraps client and server codes
│  ├─ /client.js            # Entrypoint for Client bundle
│  └─ /server.js            # Entrypoint for server-side application
├─ /tasks/                  # Gulp task scripts
├─ /test/                   # Test scripts (using Mocha)
├─ .gitignore               # List of files to exclude from git repository
├─ .eslintrc                # Configuration for ESLint
├─ .jshintrc                # Configuration for JSHint
├─ README.md                # The README file
├─ esdoc.json               # Configuration for ESDoc
├─ app.js                   # Entrypoint for server-side without using gulp
├─ gulpfile.babel.js        # Used for configuring gulp (in ES6 syntax)
├─ package.json             # List of 3rd party libraries using NPM
├─ webpack.config.js        # Webpack configuration for bundling client scripts
├─ shipitfile.js            # Enables ES6 syntax for shipitfile.babel.js
└─ shipitfile.babel.js      # Configuration for deployment tasks

NOTE: The project structure changes when using the $ frill frontend appName command and the $ frill backend appName command.

Questions or Bugs?

Please send us an issue, or a chat in gitter.

License

MIT