Skip to content

creativecolab/civicchallenge-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frontend for D4SD

Currently hosted at https://d4sd.org/

Build Status dependencies Status devDependencies Status CodeClimate GPA

Overview

  • Frontend: React w/ Server Side Rendering + Redux + CSS (SCSS)
  • Backend: Node.js + Express
  • Lint Tools: ESLint (Airbnb Config)
  • Build Tools: Webpack + Babel (Stage 0 + React + ES2015 Presets)
  • Test Tools: AVA (Unit Testing), [TODO] Nightwatch.js (Browser Testing)
  • Deployment Tools: pm2

Requirements

  • Node.js [v7.6.0]
  • Yarn [1.3.2]

Installing Node.js

Visit the Node.js website and follow the instructions to download/install. The Node.js installation comes with npm.

Using nvm is recommended to manage Node.js versions.

Installing Yarn

Visit the Yarn website and follow the instructions to download/install.

Installing npm packages

In the root directory of the project, run this command:

yarn (short for yarn install)

Development Mode

In the root directory of the project, run this command:

yarn dev (short for yarn run dev)

Development mode currently has these features:

  • Hot module reloading
  • Source mapping for CSS/JS files

Linting Info

This project uses ESLint with the full Airbnb config. Linting should work out of the box if the npm modules are installed.

In development mode, lint errors will result in an overlay on the browser window with the errors displayed and lint warnings will result in a warning message on the browser console. Both errors and warnings will be displayed on the terminal window.

To manually run ESLint on all client/server code, run this command:

yarn lint (short for yarn run lint)

Build Info

To build the production version of the project, run this command:

yarn build:all (short for yarn run build:all)

NOTE: client-sessions will throw an error in production mode if the connection is not secure. For local build testing, use this command:

yarn build:all:stage (short for yarn run build:all:stage)

Test Info

A barebones testing configuration with AVA for unit testing is set up. Nightwatch for browser testing will be set up. There are no substantial test cases written yet. To test the project, run this command:

yarn test (short for yarn run test)

People

Eun-hye, Gus, Lauren, Steven :)

Known Issues/Fixes

  • (4-28-2017) In development mode, an error message similar to the one copied below is displayed on the console. This is caused by the way that hot module reloading is implemented and does not cause issues in development mode or persist in producton mode. (source 1, tested and confirmed)
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) <!-- react-empty: 1 -
 (server) <div data-reactid="1"