/Baus-Boilerplate

Boilerplate for Universal JS application with React, Webkit, and Express

Primary LanguageJavaScript

Baus Boilerplate

Boilerplate for Universal JS applications with Webkit, React, Redux, and Express.

Requirements

Environment Variables

Non required dev variables

DEV_TOOL_POS={top|right|bottom|left}
DEV_TOOL_VISIBLE={true|false}

Quick Dev Start

  • nvm use if using NVM to select the correct version of Node
  • npm install -g babel babel-cli
  • npm install
  • npm start

Production Start

  • npm install
  • npm run dist
  • npm run prod

NPM Scripts

ex. npm run [command]

  • dev - Runs Babel Node with Dev Webpack config for Express and Hot Module Reloading
  • postinstall - Runs distribution task on install - specifically in place for Heroku build
  • dist - Distribution task to build Production Webpack bundles
  • clean - Remove any old builds and make a new distribution folder
  • eslint-all - ESLint all .jsx & .js files excluding .gitignore files
  • eslint-file - ESLint a specific file TBA at end of command
  • webpack-prod - Production Webpack build command
  • start - Start Node server
  • prod - Start Node server for Production env
  • test - TBD

Modernizr

VM Environments for Local Development

Pick your poison - included are setups for Vagrant or Docker to assist in local development

Vagrant

  • Install Vagrant and run vagrant up

Docker

  • Build container and change name or version tag as needed docker build -t baus-boilerplate:1.0 .
  • Run container and change ports as needed docker run --rm -it -v $(pwd):/var/www/dist -p 8080:8080 baus-boilerplate:1.0

Terraform

Set the required variables in terraform.tfvars. Then set the following variables in your environment:

  export TF_VAR_heroku_api_key=
  export TF_VAR_cloudflare_api_key=

Structure

.
├── App/                              # Main Application
|   ├── Components/                   
|   |   ├── Component Group/          # Child Components / Dumb Components
|   |   |   ├── Index.jsx             # Componet Entry Point
|   |   |   ├── Component.jsx         # Child Component Incorporated in Index.jsx
|   |   ├── Component.jsx             # Single Component
|   |
|   ├── Containers/                   
|   |   ├── Container.jsx             # Main Parent / Smart Component
|   |
|   ├── Stylesheets/                  # Base Styles to be imported where needed
|   |   ├── Animations/               # Animation mixins and easing functions
|   |   ├── Defaults/                 # Default Global styles
|   |   ├── Fonts/                    # Font Families
|   |   ├── Mixins/                   # Mixin functions
|   |   ├── Modules/                  # Module Styles for Different Components
|   |   |   ├── Component.scss        # Specific styles imported for a component
|   |   ├── Utilities/                # Utility sytles - ie. clearfix
|   |   ├── Variables.scss            # Global variables
|   |
|   ├── Templates                     # Handlebars Templates for base page rendering
|   ├── app.js                        # Main App Entry Point for React Application for page content
|   ├── routes.js                     # Application Routes used by App.js with React-Router
|
├── Public                            # Public folder for output and static content
|   ├── Dist                          # Output folder for generated application
|   ├── Fonts                         # Font Files
|   ├── Images                        # Image Location
|
├── Server                            # Express Server Files
|   ├── Dev.Server.js                 # Todo: Seperate Dev server requirements from main server
|   ├── Server.js                     # Main Server to render and return page
|
├── Webpack                           # Webpack Config Files
|   ├── Dev.Config.js                 # Dev Config for Dev Server and Hot Loading
|   ├── Production.Config.js          # Production Output config to generate final files
|
├── Index.js                          # Express App Entry Point

Webpack

Webpack is used as commonjs module bundler, css builder (using sass-loader) and assets loader (images and svg files).

Development Config

  • Enables source maps
  • Hot Module Replacement - Adds JS and CSS updates to page without reload or state change
  • webpack-error-notification plugin. To get notified on errors while compiling the code, on Mac you must brew install terminal-notifier.

CSS Loading

In order to load CSS inline and prevent any FOUC both configs set a process.env.BROWSER global variable, useful to require CSS from the components, e.g:

  if (process.env.BROWSER) {
    require('../style/MyComponent.scss');
  }

TODO

  • TDD / BDD
  • Split code into chunks for different pages with webpack and include through react router