duke-lv / 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

• Main Page

  • Contains the classic Todo List like below:

    

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
• 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 (optional)

Install yarn follows official documentation.

Use docker

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

docker-compose up

that's it :)

you can also manually install and run it by following below

Install project dependencies

Go to project root directory:

yarn
yarn global add gulp
bash patch.sh

If you meet permission problem when try to install yarn globally, check this out.

Database setup

Make sure you have postgresql installed, and set the right configs in backend/config.json.

Build & Run

On development (with react-hot-reload):

gulp

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

NODE_ENV=production gulp

Profile assets bundle

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