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-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 sample 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, assets bundle can be analyzed and optimized through DLL Plugin.

yarn profile

Run test

yarn test

Code coverage

yarn coverage

Deployment

Every push on master branch will trigger Github Actions for heroku deployment.

Contributing

See CONTRIBUTING.md

License

MIT License