Skip to content
This repository was archived by the owner on Oct 3, 2023. It is now read-only.

README.md

Latest commit

 

History

History
128 lines (106 loc) · 5.36 KB

README.md

File metadata and controls

128 lines (106 loc) · 5.36 KB

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 .js & .jsx 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