ahmadseder/express-webpack-react-redux-typescript-boilerplate

:tada: My full-stack boilerplate that using express with webpack, react and typescirpt! (hot module reload and materialize-css supported) :tada:

Express Webpack React Redux Typescript Boilerplate

Example

• Demo Page

  • A page contains the classic Todo List as follows:

    

• Cocomic

  • An open-source platform for comic/manga collaboration (SFU CMPT470 course project, no typescript). source code here.

    

Stack

• yarn - dependency manager
• express - node.js framework for backend
• materialize - a modern responsive front-end framework based on Material Design
• sass - CSS pre-processors
• postcss - CSS post-processor
• webpack 4 - module bundler
• webpack-dev-middleware - offers a dev middleware for webpack, which arguments a live bundle to a directory
• webpack-hot-middleware - add hot reloading into an existing server without webpack-dev-server
• followed ES6 standard
• babel - compile ES6 to ES5
• react - building user interfaces
• react-hot-loader 4 - hot module reload!
• react-router 4 - routing
• react-redux - the official react bindings for redux (a predictable state container for js apps)
• connected-react-router - a redux binding for react-router 4, currently a replacement for react-router-redux v5
• immutable.js - persistent Immutable data structures for react redux state management
• Typescript - a typed superset of javascript that scales
• DefinitelyTyped - high quality TypeScript type definitions
• 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)
• postgresql - advanced open source database
• prismjs - code syntax highlight
• 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

How to run the example code

Prerequisite

• node
• yarn (recommended) or npm
• docker (recommended) 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

• run 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 react-hot-reload and redux-devtools):

yarn run-dev

On production (with uglify-js and other optimazitions):

yarn run-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 coveralls

Deployment

yarn deploy

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

License

MIT License