Coder Coded Fullstack

---

DEPRECATED!

This repo should be updated according to the changes in https://github.com/CoderCoded/crcd-react

WebApp boilerplate with following technologies:

• Babel for ES2015 and beyond
• Riot for client-side views and routing
• Webpack for client-side bundles
• Redux for client-side state
• Pure for client-side styles
• PostCSS with PreCSS for style transforms
• bunyan and browser-bunyan for logging
• Express for server-side app and API
• Nunjucks for server-side rendering
• Passport for authentication
• Objection.js for ORM

Check out mdl branch for more opinionated client side including Material Design Lite. NOTE: Not updated for a while, master is more up to date.

We have decided not to use isomorphic rendering since it just makes the app a bit too complex. However, we use webpack and code splitting inspired by this guide by Pete Hunt.

NOTE: This is still a work in progress. The crcd-web module can already be used though.

The three parts of the stack

crcd-api

This module is for building a node express based API for the application.

Folder structure

• src/ : Source for api module
• build/ : Build output

NOTE: This module is in early development stage, not ready to be used yet.

crcd-db

This module is for building a database layer to be used by the API server and also by the web server. We have decided to build it on top of PostgreSQL and Redis. Redis is used for caching and sessions. This module is supposed to handle authentication and authorization, crcd-web and crcd-api import this and thus this module doesn't include a standalone server. This module must be built before starting the web or API server.

Building

npm install
npm run build

Folder structure

• src/ : Source for db module
• lib/ : Build output

NOTE: This module is in early development stage, not ready to be used yet.

crcd-web

This module is for building a the client-side web app but also for creating authentication views and static sites. It is possible to build this module into a static site with webpack bundled assets. Initially based on react-redux-universal-hot-example.

Installation

npm install

Running Dev Server

npm run dev

Builds static views in dev mode and starts the express server and a webpack server which handles the hot reload. Note: make sure the static views don't overlap with the ones served by express, e.g. static-views/login/index.html matches in express before a route defined as /login.

Building and Running Production Server

npm run build
npm run start

Does the same as dev build but instead of the webpack dev server, it creates a webpack bundle. Static views are built in production mode and the express server is started.

Folder structure

• src/ : Source for server (built using Babel)
  • config/ : YAML or JSON configs for the web-server
  • routes/ : Routes for the web-server
  • static/ : Static files and webpack build output
  • static-views/ : Nunjucks templates to be rendered as static html files into static/
  • views/ : Nunjucks templates to be server with web-server
  • client/ : Source for client (built using Webpack)
    • components/ : Re-usable Riot components
    • containers/ : "Smart" Riot components that are used as wrappers etc.
    • entries/ : Entry files for webpack bundles
    • redux/ : Everything related to redux (store, middlewares and modules)
    • routes/ : Client-side routes
    • styles/ : Shared styles etc.
    • utils/ : Helpers etc.
• build/ : Build output
  • static/dist : Webpack output
• .tmp/ : Temp builds in dev mode

Screenshots