Awesome
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
ornpm
- (optional)
docker
withdocker-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
andredis
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