express-webpack-react-redux-typescript-boilerplate

Example

• Demo Page - contains classic todo list, async server call, and 404 page with random moe images. (Support multi-language, currently English, Chinese, and Japanese)

  

  

  

Stack

• yarn - dependency manager
• express - node.js web framework for backend
• postgresql - advanced open source database
• materialize - a modern responsive front-end framework based on Material Design
• sass - CSS pre-processors
• postcss - CSS post-processor
• css-modules - for default scoped/local css
• typescript - a typed superset of javascript that scales
• webpack 4 - module bundler
• webpack-dev-server - serves a webpack app in development mode with hot reload
• followed ES6 standard
• babel - a JavaScript compiler that compile ES6 to ES5
• react - a JavaScript library for building user interfaces
• react-hot-loader 4 - hot module reload!
• react-router 4 - declarative routing for React
• react-redux 6 - the official react bindings for redux 4 (a predictable state container for js apps)
• react-saga - make redux asynchronous flows easy to read, write and test, the replacement for redux-thunk
• connected-react-router 6 - a redux binding for react-router 4, the replacement for react-router-redux v5
• react-loadable - better user experience for dynamic loading components
• react-i18next - internationalization for react done right
• immutable.js - persistent Immutable data structures for react redux state management
• editorconfig - maintain consistent coding styles between different editors and IDEs
• eslint - lint javascript files (.js, .jsx)
• tslint - lint typescript files (.ts, .tsx)
• stylelint - lint style files (.css, .scss)
• commitlint - lint git commit messages
• jest - painless javascript testing
• coveralls - test coverage
• husky - git hooks
• circle-ci 2 - continuous integration tool for testing and deployment
• heroku - a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
• docker - the open-source application container engine
• RESTful API design - follow RESTful api design best practice

How to run the example code

Prerequisite

• yarn or npm
• (optional) docker with docker-compose

Quickest way

The easiest way to run the example project is to use docker-compose:

docker-compose up --build

that's it :)

You can also follow instructions below if you want to customize it.

Install project dependencies

Go to project root directory:

yarn install

If you find permission problem when trying to install yarn globally, check this out.

Setup database and session store

You can either

• setup postgresql and redis using docker images:

docker-compose up -d postgres redis

or

• maintain it by yourself, if so, make sure you set the right config in backend/config.json.

Build & Run

On development (with hot reload):

yarn dev

On production (with terser and other optimazitions):

yarn prod

Profile assets bundle

Thanks to webpack-bundle-analyzer, we can analyze and then optimize our assets bundle through DLL Plugin.

yarn profile

Run test

yarn test

Code coverage

yarn coverage

Deployment

yarn deploy

Contributing

See CONTRIBUTING.md

License

MIT License