EsrefDurna/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

  • Contains the classic Todo List like below:

    

• Cocomic

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

    

Stack

• express - backend
• yarn - dependency manager
• gulp - task runner
• materialize - a modern responsive front-end framework based on Material Design
• sass - CSS pre-processors
• postcss - CSS post-processor
• webpack 3 - 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 3 - 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 below instructions if you want it to be more customizable

Install project dependencies

Go to project root directory:

yarn install
yarn global add gulp

If you meet 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 your own, if so, make sure you set the right configs in backend/config.json

Build & Run

On development (with react-hot-reload and redux-devtools):

gulp

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

NODE_ENV=production gulp

Profile assets bundle

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

gulp profile

Run test

gulp test

Code coverage

gulp coveralls

Deployment

gulp 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