Palo -- ES6-powered Express + React + Webpack + Jade
All modern technologies in one bundle:
ECMAScript 6/7 via Babel + Express 4 + React + Webpack + FlightPlan + SASS + Redux + Jade
To run in dev mode, type npm run dev
or pm2 start pm2.local.json
to run in watch mode.
To build project, type npm run build
.
Installation
- Global dependencies:
npm i -g \
babel@6.3.26 \
babel-cli@6.3.17 \
gulp@3.9.0 \
bower@1.7.1 \
expect@1.13.4 \
flightplan@0.6.8 \
karma@0.13.15 \
karma-jsdom-launcher@1.0.1 \
karma-mocha@0.2.1 \
karma-mocha-reporter@1.1.3 \
karma-sourcemap-loader@0.3.6 \
karma-webpack@1.7.0 \
kexec@2.0.2 \
mocha@2.3.4 \
nock@3.6.0 \
node-sass@3.4.2 \
pm2@0.15.10 \
rimraf@2.4.4 \
react-addons-test-utils@0.14.3 \
redux-mock-store@0.0.3 \
webpack-dev-server@1.14.0
- Dependencies
npm i
Features
- ES6 + ES2015 via Babel + ESlint
- React + helmet
- SASS and LESS support
- Autobuild all with Webpack
- Automated deploy
- PM2 support
- Redux
- Jade support from-the-box
- Sprite build from images directory
- Remote repository data fetch and Model+Service architectute, so you can attach any another ORM like Sequelize
- Comfortable project structure:
āāā app
āĀ Ā āāā actions
ā ā āāā ...
āĀ Ā āĀ Ā āāā // actions with redux
āĀ Ā āāā client.jsx // client-side entry point
āĀ Ā āāā components
āĀ Ā āĀ Ā āāā common // common react components
ā ā ā āāā authenticateComponent.jsx // predefined component wrapper to check authentication status
ā ā ā āāā ...
āĀ Ā āĀ Ā āĀ Ā āāā // other common components
āĀ Ā āĀ Ā āāā components // compoments like buttons etc.
ā ā ā āāā ...
āĀ Ā āĀ Ā āĀ Ā āāā // included component wrapper to check authentication status
āĀ Ā āĀ Ā āāā pages
āĀ Ā āĀ Ā āāā ...
āĀ Ā āĀ Ā āāā // page components which can be included as sub-components of routes in routes.jsx
āĀ Ā āāā constants
āĀ Ā āĀ āāā ...
āĀ Ā āĀ āāā actionTypes.js // predefined action types for redux
āĀ Ā āĀ Ā āāā // other constants
āĀ Ā āāā createDevToolsWindow.js // script to show devtools with stack traces etc.
āĀ Ā āāā elements
āĀ Ā āĀ āāā ...
āĀ Ā āĀ āāā Header.jsx // predefined script to render html head properly with helmet etc.
āĀ Ā āĀ Ā āāā // other constants
āĀ Ā āāā helmconfig.js // helmet config
āĀ Ā āāā images
āĀ Ā āĀ Ā āāā favicon.png // base favicon
āĀ Ā āĀ Ā āāā favicons
āĀ Ā āĀ Ā āāā apple-icon-152x152.png // apple touch icon
āĀ Ā āĀ Ā āāā chrome-icon-192x192.png // chrome icon
āĀ Ā āĀ Ā āāā favicon-16x16.png // basic favicon
āĀ Ā āĀ Ā āāā ms-icon-144x144.png // msie icon
āĀ Ā āĀ Ā āāā ...
āĀ Ā āĀ Ā āāā // page components which can be included as sub-components of routes in routes.jsx
āĀ Ā āāā reducers
āĀ Ā āĀ āāā ...
āĀ Ā āĀ Ā āāā index.js // reducer loader
āĀ Ā āĀ Ā āāā user.js // predefined user reducer
āĀ Ā āĀ Ā āāā // other reducers
āĀ Ā āāā routes.jsx // client-side router configuration
āĀ Ā āāā scss // preferred SCSS structure is similar to components dir structure
āĀ Ā āĀ Ā āāā common
āĀ Ā āĀ Ā āĀ Ā āāā helpers.scss
āĀ Ā āĀ Ā āĀ Ā āāā main.scss
āĀ Ā āĀ Ā āĀ Ā āāā mixins.scss
āĀ Ā āĀ Ā āĀ Ā āāā settings.scss
āĀ Ā āĀ Ā āāā components
āĀ Ā āĀ Ā āĀ Ā āāā _layout.scss
āĀ Ā āĀ Ā āĀ Ā āāā _login.scss
āĀ Ā āĀ Ā āĀ Ā āāā _logout.scss
āĀ Ā āĀ Ā āāā pages
āĀ Ā āĀ Ā āĀ Ā āāā _profile.scss
āĀ Ā āĀ Ā āāā sprites
āĀ Ā āĀ Ā āāā ...
āĀ Ā āĀ Ā āāā // generated sprite styles
āĀ Ā āāā server.jsx // entry point to server-side rendeting script
āĀ Ā āāā sprites
āĀ Ā āĀ āāā ...
āĀ Ā āĀ Ā āāā // generated sprite images
āĀ Ā āāā store
āĀ Ā āĀ Ā āāā configureStore.js
āĀ Ā āāā utils
āĀ Ā āāā classnames.js
āĀ Ā āāā immutableHelpers.js
āāā package.json
āāā pm2.development.json // pm2 configuration in development mode
āāā pm2.local.json // pm2 configuration in development mode with file watch
āāā pm2.production.json // pm2 configuration in production mode
āāā public
āĀ Ā āāā assets
āĀ Ā āĀ āāā ...
āĀ Ā āĀ Ā āāā // webpack generated output
āāā runtime
āĀ Ā āāā logs
āĀ Ā āāā stderr.log // application logs stdout output
āĀ Ā āāā stdout.log // application logs stderr output
āāā server
āĀ Ā āāā app.js // server entry point
āĀ Ā āāā configuration
āĀ Ā āĀ Ā āāā config.js // server common configuration
āĀ Ā āĀ Ā āāā development.js // server enviroment-based configuration
āĀ Ā āĀ Ā āāā production.js // server enviroment-based configuration
āĀ Ā āĀ Ā āāā local.js // server local configuration (unneccessary)
āĀ Ā āāā controllers
āĀ Ā āĀ Ā āāā EntryPointController.js // predefined client-side html entry point generator
āĀ Ā āĀ Ā āāā ServerStatusController.js // server statuc controller (to show uptime, release version etc.)
āĀ Ā āĀ Ā āāā SessionController.js // login/logout etc.
āĀ Ā āĀ Ā āāā SingleUserController.js // single user controller
āĀ Ā āĀ Ā āāā UserCollectionController.js // user collection controller
āĀ Ā āāā core
āĀ Ā āĀ Ā āāā base
āĀ Ā āĀ Ā āĀ Ā āāā Component.js
āĀ Ā āĀ Ā āĀ Ā āāā Controller.js
āĀ Ā āĀ Ā āĀ Ā āāā Exception.js
āĀ Ā āĀ Ā āĀ Ā āāā Model.js
āĀ Ā āĀ Ā āĀ Ā āāā Service.js
āĀ Ā āĀ Ā āāā bootstrap.js
āĀ Ā āĀ Ā āāā components
āĀ Ā āĀ Ā āĀ Ā āāā Pager.js
āĀ Ā āĀ Ā āĀ Ā āāā RemoteRequest.js
āĀ Ā āĀ Ā āāā constants
āĀ Ā āĀ Ā āĀ Ā āāā index.js
āĀ Ā āĀ Ā āĀ Ā āāā paths.js // framework files locations, so to change where some files are placed you can set it here
āĀ Ā āĀ Ā āāā enumerations
āĀ Ā āĀ Ā āĀ Ā āāā Environments.js
āĀ Ā āĀ Ā āĀ Ā āāā HttpMethods.js
āĀ Ā āĀ Ā āĀ Ā āāā PagerSortDirections.js
āĀ Ā āĀ Ā āĀ Ā āāā ServerParameters.js
āĀ Ā āĀ Ā āāā exceptions
āĀ Ā āĀ Ā āĀ Ā āāā ComponentAutowireException.js
āĀ Ā āĀ Ā āĀ Ā āāā CoreException.js
āĀ Ā āĀ Ā āĀ Ā āāā HttpNotFoundException.js
āĀ Ā āĀ Ā āĀ Ā āāā NotImplementedMethodException.js
āĀ Ā āĀ Ā āĀ Ā āāā SessionException.js
āĀ Ā āĀ Ā āāā skeleton-config.js
āĀ Ā āāā enumerations
āĀ Ā āĀ Ā āāā pager
āĀ Ā āāā exceptions
āĀ Ā āĀ Ā āāā UserNotFoundException.js
āĀ Ā āāā middlewares // predefined middlewares
āĀ Ā āĀ Ā āāā after
āĀ Ā āĀ Ā āĀ Ā āāā requestException.js
āĀ Ā āĀ Ā āāā before
āĀ Ā āĀ Ā āāā jsonRequest.js
āĀ Ā āĀ Ā āāā passport.js
āĀ Ā āĀ Ā āāā pureSend.js
āĀ Ā āĀ Ā āāā requestTime.js
āĀ Ā āĀ Ā āāā safeRequest.js
āĀ Ā āĀ Ā āāā serveStatic.js
āĀ Ā āĀ Ā āāā session.js
āĀ Ā āĀ Ā āāā webpackDev.js
āĀ Ā āĀ Ā āāā webpackHot.js
āĀ Ā āāā models
āĀ Ā āĀ Ā āāā User.js // predefined remote repository model
āĀ Ā āāā runtime
āĀ Ā āāā services
āĀ Ā āĀ Ā āāā UserService.js // predefined user service
āĀ Ā āāā views
āĀ Ā āāā index.jade // client-side entry point html template
āāā webpack
āāā settings.js // webpack common environment-agnostic settings
āāā webpack.config.development.js // webpack + hot reload config
āāā webpack.config.production.js // webpack production config
TODO
- Implement Flightplan.js deployment script (restore) to deploy via
npm run deploy:target
ot via fly target
. - Refactor configuration (divide config declaration from data instantiation)
- Add support to load middleware from node_modules without compatibility wrapper