ShockJS

Purpose

ShockJS is an isomorphic starterkit/framework application. It was built to jump start complex ReactJS application's that require server-side rendering and RBAC support.

Features

• Server-side rendering
• Built in RBAC
• Bootstrap theme with Font Awesome
• Sass
• Database migrations
• Rest API
• Login
• Contact page with recaptcha
• Client-side routing
• write ES6 for server and client

Installation

This will eventually be done using slush but for now you will need to clone this repo:

git clone https://github.com/shockjs/shockjs.github.io.git

Configure your database settings:

src/server/config/development.json

Install dependencies:

npm install

You will need gulp if you dont already have it to get started:

npm install -g gulp

Run migrations:

gulp migrate

Create a super user:

gulp user --create

Just type gulp to build the project and start the pm2 server:

gulp

Access the server at http://localhost:8000/

Structure

ShockJS is broken up into three sections.

• src/server: server only code, any changes made here will only convert to ES5 and restart the pm2 server.
  • api: api endpoints go here and will extends off the base class RestApi. They will also need to be included in the api.js
  • classes: currently storing reusable classes however will likely be pushed out into separate modules.
  • config: this is the configuration for the website. To get started only development.json and main.json needs to be configured with database details. Also to override main.json for the local environment include a main-local.json.
  • graphql: this is in early development however the main purpose is to work with the rest api to pull back only data needed.
  • models: ORM models for bookshelf.js, they are combined with the shared model of the same name so that validation etc can be shared.
  • templates: These are jade templates and are mainly used for the structure outside of the react body. Also email templates are stored here.
  • utils: General utilities, usually a single function per file that have a single purpose.
  • server.js: This is what starts the Hapi server.
• src/client: client only code, any changes made here will convert to ES5, bundle using webpack and restart the pm2 server.
  • components: ReactJS components that are not rendered server-side.
  • models: basically just classes that inherit from shared models for validation etc.
  • scss: Sass files for styling.
  • static: Files that exposed over http. Most files will be generated to here in the dist folder.
  • client.js: Begins the client-side routing.
• src/shared: code shared between client and server, any changes made here will convert to ES5, bundle using webpack and restart the pm2 server.
  • classes: Reusable classes, these will be most likely moved to separate modules.
  • components: ReactJS components that are rendered on both client and server. Also contains blocks which are also known as ducks, they combine action types/actions/reducer into single module. I have renamed ducks to blocks as blocks made more sense to me. Blocks make a complete store.
  • constants: Mostly shared action names are stored here but can be used for other constants.
  • models: The shared models for server and client. Mostly shared validation goes here.
  • store: The configuration for the redux store.
  • utils: General utilities, usually a single function per file that have a single purpose.

File Naming

Javascript does not really have a standard around this however lowercase/full-stops seems to be commonly used and this is what will be used in the this project. Also files will be appended by their intended use:

• component: ReactJS components
• block: bundled action types, actions and reducer
• model: ORM or form models
• api: Api classes that extend from the RestApi class
• type: GraphQL type