react-webapp-seed

React and Webpack Seed Project for The Greenhouse, as a template / starter project for frontend web applications. This is a simple starter project meant to get you up and running as fast as possible with a full local and production build with all the tools working together and as minimal friction and configuration as possible. Simply clone the repo and edit the files as needed to match your project.

Redux Redux dependencies are installed but not used in the seed for a reason. Redux is something you should need, not sure by default. For an example of a project used redux with this stack, checkout github-dashboard

Setup Steps

• README.md - project name, Links, sections on release procedure, CI, AWS info
• webpack.config.develop.js - API proxy
• package.json - name, description, version
• Configure your project with continuous integration by running bin/build.sh

Tooling

The following tools are used in the application

• React - as the Front-End library
• Webpack - Module loader / bundler, primary build tool
• Node - local development and build time JavaScript runtime
• Yarn - package manager for build and application dependencies
• TypeScript - superset of JavaScript for writing application code
• Jest - unit testing library / runner, with [Enyzme][]

Links

• Repository (Github)- TODO
• Issue Tracker (JIRA) - TODO
• Documentation (Confluence) - TODO
• Continuous Integration (Jenkins) - TODO
• Development Environment - TODO
• Production Enviornment - TODO

Project Setup

Note: It is recommended that a Javascript based IDE is used, like Webstorm, as they have a lot of the code quality and syntax tooling supported as plugins, often times right out of the box.

Recommended plugins to have are:

• Git (can show changed lines in the gutter when viewing a file)
• EditorConfig
• gitignore
• Sass
• ESlint
• TypeScript
• NodeJS

Steps

1. If you don't already have it, download and install NodeJS 4.x (comes with NPM).

2. This project favors Yarn, so make sure you have the latest by updating it after installing Node by running

$ npm install -g yarn@^1.0.0

3. Now install the build and application dependencies by running

$ yarn install

Project Layout

An overview of important files and configurations for the applications

Root Files ('dot' files)

Also know as 'dot' files, these are the build and build configuration files for the application

• bin/ - shell scripts for continuous integration and build environments
• .babelrc - configuration file for Jest Babel preproccessor
• .editorconfig - configuration file for EditorConfig IDE plugin
• .eslintrc - linting rules for spec and build files
• package.json - NPM / Yarn dependency configuration file, for build related dependencies and defines all runnable scripts and commands
• jest.config.json - configuration for Jest
• tsconfig.json - TypeScript compiler configuration file
• tslint.json - configuration rules for TSLint
• webpack.config.common.js - webpack config for managing shared webpack configurations
• webpack.config.develop.js - webpack config for local development
• webpack.config.prod.js - webpack config for production builds

Application Files

Application code, including unit tests. Directories are intended to be kept as flat as possible with a B.O.F. (birds of a feather) organization.

• src - application code
• src/components/ - resusable UI features
• src/services/ - APIs for handling backend REST APIs or browser APIs, non UI related 'helpers'
• src/views/ - routable states ('pages')
• src/index.html - main layout of the application
• src/index.tsx - main entry way into the application and 'bootstrapper'
• src/polyfills.ts - collection of polyfills needed by the application
• src/routes.ts - routes for the application, maps to different views
• src/vendor.ts - vendor files from node_modules

Tasks

This project uses Webpack as the build tool, exectuted via NPM scripts. All available tasks are in the scripts section of package.json

Development

This will start up a Node (Express) server which watches for changes and 'redeploys' as needed.

Note: This task exports NODE_ENV=development

$ yarn run develop

See it in a browser by opening up

http://localhost:4567/

Production

This is the production build task for the project. It is used prior to deploying to an environment and build a production version of the application.

Note: This task exports NODE_ENV=production

$ yarn run build

Continuous Integration

Jenkins runs three scripts together (bin/build.sh) that lints non TS files, runs unit tests, and builds the application

$ yarn run clean
$ yarn run test -- --coverage
$ yarn run build

Demo

To serve a production build locally , like for a demo run:

$ npm run serve

Note: it is recommended you run this command from the master branch or a tag. By Default this proxies with the webpack-dev-server proxy.

Testing

To run Jest unit tests, run

$ yarn run test -- --watch

Dependency Management

All dependencies added or removed from the project must be done so through yarn

Add

# use --dev if it as devDependency
$ yarn add <package-name> [--dev]

Remove

$ yarn remove <package-name>

Upgrade

$ yarn upgrade <package-name>

Continuous Integration

TODO Document Your Continuous Integration Environment Here

Release Procedure

TODO Document Your Release Procedure Here

AWS Info

TODO Document Your AWS Info here (NO CREDENTIALS!!!!)

• s3 bucket -
• cloudfront distribution -