Getting Setup
Node v8+ or install by NVM
DownloadCheck if Node is succesfully installed:
$ node -v
Install Dependencies
$ npm install
Starting the app
run client:
$ npm run webpack-dev
run server:
$ npm run start
On development, run client & server at one go
$ npm run dev
Running tests
$ npm test
Local development:
For server side, this repo uses 3001 as the default port number, if you want to change to a port number you prefered, add it to your own .env file and change your axios baseUrl (do not commit this)
Dev Tools
There are a few chrome extensions that make development a breeze.
Application Structure
.
├── client
│ └── index.js # client app bootstrapping and rendering
│ └── actions # redux actions
│ └── assets # assets that are not component-specific, including images or fonts
│ └── components # presentational react components that are mostly stateless, not connected to redux store
│ └── constants
│ └── containers # container react components that subscribe to redux
│ └── lib
│ └── middleware # redux middlewares
│ └── reducers # redux reducers
│ └── routes # react-router
│ └── sagas # redux sagas, generators mostly used for dealing with async flows
│ └── services # API services
│ └── store # redux store with middlewares applied and reducers connected
│ └── styles # global styles, variables
│ └── types # custom prop types for react components
├── config # webpack and other config files
├── server
│ └── app.js # express app setup including routes
│ └── server.js # server app entry point
│ └── lib
│ └── routes # express routes
│ └── services # API services
├── .env # used for development only, store env variables
└── test
└── client # jest unit tests and component tests
└── components
└── __snapshots__ # jest components snapshots
└── server # to be implemented
└── setup.js # scripts needed to run tests
└── jestSetup.js# jest setup
Some more explanations
.env
local development env variables. For an existing copy click here
test
This repo uses jest as the main test framework. For component tests, you can either choose jest + enzyme or jest snapshots. There are two examples set for Place.js. For debugging purpose, tests can be ran under auto reload mode
$ npm run test-tdd
To update the snapshots after logic changes:
$ npm run jest-update
Note that it's your responsibility to make sure the updated snapshots are the correct ones
Api tests, server side, saga are still pending for tests to be implemented.
For any new logics, please add tests in.
node
Server side uses await, if you prefer to use Promise, please go ahead
Eslint
Please make sure there are no eslint errors, for your convenience, it is recommended to install eslint on your local editor.
ES6
This repo uses es6 syntax. Please stick with it.
CSS
This repos uses CSS module and with PostCSS plugins. In general, you can define your style as global styles or component styles which stays within each component directory
Trouble shooting
Windows native cmd users, you may experience erros saying env is not recognised as internal command, in this case you may want to switch to a more advanced terminal
Production mode:
Not implemented yet