- Clone the repository.
- Open command line in local repository.
- Run
npm install
. - (For developers) Install Atom plugins:
apm install nuclide pigments linter-eslint linter-stylelint prettier-atom
- Run
npm start
. - Open browser to URL
localhost:3000
.
- Set environment variable
NODE_ENV
todevelopment
orproduction
. Linux:export NODE_ENV=production
. - Run
./node_modules/.bin/webpack
. - Copy files from
dist
andpublic
.
The local development server will auto-refresh when code is changed.
- Node.js: A framework that hosts most of the frontend stack. It allows running tasks written in JavaScript.
- Webpack: Compiles multiple modules (JavaScript/CSS files) into a few static assets. This allows working with JavaScript code in multiple modules to keep things organized.
- Webpack-dev-server: Hosts the compiled files from Webpack, keeps the compiled files cached, and refreshes the browser when the files change. This allows highly efficient progress.
- Babel: Transpiles modern JavaScript (ES6) to browser compatible JavaScript. Onkibot-froentend uses the so-called
stage-0
, which has the most modern (and also experimental) set of features. - React: Used to create interactive user interfaces elegantly. This allows highly modular and elegant JavaScript code for UI.
- Material UI: A library of useful components to be used with React.
- Redux: Provides a useful interface for working with a page's state. This allows useful reasoning about state changes in the page.
- React-Redux: Binds React and Redux together to allow efficient UI responsiveness to state changes.
- SASS: Provides advanced CSS features.
app
: All files that have to be compiled by Webpack.index.ejs
: Template for the index page.entry.js
: Entry module for the JavaScript.actions
: Action generator functions.reducers
: Redux reducer functions.index.js
: Exports the combined reducer function.
components
: Presentational React components. See here.containers
: Container React components. See here.
public
: Static assets that do not have to be compiled by Webpack.images
: Images.