Currently hosted at https://d4sd.org/
- 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
- Node.js [v7.6.0]
- Yarn [1.3.2]
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.
Visit the Yarn website and follow the instructions to download/install.
In the root directory of the project, run this command:
yarn (short for yarn install)
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
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)
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)
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)
Eun-hye, Gus, Lauren, Steven :)
- (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"