{"id":17049539,"url":"https://github.com/armour/express-webpack-react-redux-typescript-boilerplate","last_synced_at":"2025-05-07T10:12:53.263Z","repository":{"id":48590547,"uuid":"81514248","full_name":"Armour/express-webpack-react-redux-typescript-boilerplate","owner":"Armour","description":":tada: A full-stack boilerplate that using express with webpack, react and typescirpt!","archived":false,"fork":false,"pushed_at":"2021-07-19T09:33:44.000Z","size":17112,"stargazers_count":165,"open_issues_count":44,"forks_count":42,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-12-20T03:10:32.867Z","etag":null,"topics":["babel","circleci","docker","es6","eslint","express","github-actions","heroku","jest","materialize-css","react","react-hot-reload","react-redux","react-router","react-saga","stylelint","tslint","typescript","webpack","yarn"],"latest_commit_sha":null,"homepage":"https://express-react-typescript.herokuapp.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Armour.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-10T01:46:44.000Z","updated_at":"2024-05-01T10:48:40.000Z","dependencies_parsed_at":"2022-09-04T11:50:52.371Z","dependency_job_id":null,"html_url":"https://github.com/Armour/express-webpack-react-redux-typescript-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Armour%2Fexpress-webpack-react-redux-typescript-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Armour%2Fexpress-webpack-react-redux-typescript-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Armour%2Fexpress-webpack-react-redux-typescript-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Armour%2Fexpress-webpack-react-redux-typescript-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Armour","download_url":"https://codeload.github.com/Armour/express-webpack-react-redux-typescript-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231439065,"owners_count":18376836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","circleci","docker","es6","eslint","express","github-actions","heroku","jest","materialize-css","react","react-hot-reload","react-redux","react-router","react-saga","stylelint","tslint","typescript","webpack","yarn"],"created_at":"2024-10-14T09:54:50.711Z","updated_at":"2024-12-27T05:06:23.338Z","avatar_url":"https://github.com/Armour.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# express-webpack-react-redux-typescript-boilerplate\n\n[![Dependency Status](https://david-dm.org/Armour/express-webpack-react-redux-typescript-boilerplate/status.svg)](https://david-dm.org/Armour/express-webpack-react-redux-typescript-boilerplate)\n[![CircleCI](https://circleci.com/gh/Armour/express-webpack-react-redux-typescript-boilerplate/tree/master.svg?style=shield)](https://circleci.com/gh/Armour/express-webpack-react-redux-typescript-boilerplate/tree/master)\n[![Appveyor](https://ci.appveyor.com/api/projects/status/github/Armour/express-webpack-react-redux-typescript-boilerplate?svg=true\u0026branch=master)](https://ci.appveyor.com/api/projects/status/github/Armour/express-webpack-react-redux-typescript-boilerplate?svg=true\u0026branch=master)\n[![Coverage Status](https://coveralls.io/repos/github/Armour/express-webpack-react-redux-typescript-boilerplate/badge.svg?branch=master)](https://coveralls.io/github/Armour/express-webpack-react-redux-typescript-boilerplate?branch=master)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)](http://makeapullrequest.com)\n[![Tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n[![Template from jarvis](https://img.shields.io/badge/Hi-Jarvis-ff69b4.svg)](https://github.com/Armour/Jarvis)\n\n## Example\n\n* [Demo Page](https://express-react-typescript.herokuapp.com/) - contains classic todo list, async server call, and 404 page with random [moe images](https://github.com/Armour/express-webpack-react-redux-typescript-boilerplate/tree/master/frontend/src/pages/NotFoundPage/assets/images). (Support multi-language, currently English, Chinese, and Japanese)\n\n  ![Home Page](https://user-images.githubusercontent.com/5276065/44188928-402d7800-a0d5-11e8-8445-0c0dece815c2.png)\n\n  ![React Page](https://user-images.githubusercontent.com/5276065/44188929-402d7800-a0d5-11e8-8580-f9a330765f6a.png)\n\n  ![404 Page](https://user-images.githubusercontent.com/5276065/44188930-402d7800-a0d5-11e8-919c-a4baa2c969ab.png)\n\n## Stack\n\n* [x] [yarn](https://github.com/yarnpkg/yarn) - dependency manager\n* [x] [express](http://expressjs.com/) - node.js web framework for backend\n* [x] [postgresql](https://www.postgresql.org/) - advanced open source database\n* [x] [materialize](http://materializecss.com/) - a modern responsive front-end framework based on Material Design\n* [x] [sass](https://github.com/sass/sass) - CSS pre-processors\n* [x] [postcss](https://github.com/postcss/postcss) - CSS post-processor\n* [x] [css-modules](https://github.com/css-modules/css-modules) - for default scoped/local css\n* [x] [typescript](https://github.com/Microsoft/TypeScript) - a typed superset of javascript that scales\n* [x] [webpack 4](https://github.com/webpack/webpack) - module bundler\n* [x] [webpack-dev-server](https://github.com/webpack/webpack-dev-server) - serves a webpack app in development mode with hot reload\n* [x] followed [ES6 standard](https://github.com/lukehoban/es6features)\n* [x] [babel](https://babeljs.io/) - a JavaScript compiler that compile ES6 to ES5\n* [x] [react](https://facebook.github.io/react/) - a JavaScript library for building user interfaces\n* [x] [react-hot-loader 4](https://github.com/gaearon/react-hot-loader) - hot module reload!\n* [x] [react-router 4](https://github.com/ReactTraining/react-router) - declarative routing for React\n* [x] [react-redux 6](https://github.com/reactjs/react-redux) - the official react bindings for [redux 4](https://github.com/reactjs/redux) (a predictable state container for js apps)\n* [x] [react-saga](https://github.com/redux-saga/redux-saga/) - make redux asynchronous flows easy to read, write and test, the replacement for [redux-thunk](https://github.com/reduxjs/redux-thunk)\n* [x] [connected-react-router 6](https://github.com/supasate/connected-react-router) - a redux binding for react-router 4, the replacement for [react-router-redux v5](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux)\n* [x] [react-i18next](https://github.com/i18next/react-i18next) - internationalization for react done right\n* [x] [immutable.js](https://github.com/facebook/immutable-js/) - persistent Immutable data structures for react redux state management\n* [x] [editorconfig](http://editorconfig.org/) - maintain consistent coding styles between different editors and IDEs\n* [x] [eslint](http://eslint.org/) - lint javascript files (.js, .jsx)\n* [x] [tslint](https://palantir.github.io/tslint/) - lint typescript files (.ts, .tsx)\n* [x] [stylelint](https://stylelint.io/) - lint style files (.css, .scss)\n* [x] [commitlint](https://github.com/marionebl/commitlint) - lint git commit messages\n* [x] [jest](https://facebook.github.io/jest/) - painless javascript testing\n* [x] [coveralls](https://coveralls.io/) - test coverage\n* [x] [husky](https://github.com/typicode/husky) - git hooks\n* [x] [circle-ci 2](https://circleci.com/) - continuous integration tool for testing and deployment\n* [x] [heroku](https://www.heroku.com/) - a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.\n* [x] [docker](https://github.com/docker/docker) - the open-source application container engine\n* [x] [RESTful API design](https://docs.microsoft.com/en-us/azure/architecture/best-practices/api-design) - follow RESTful api design best practice\n\n## How to run the sample code\n\n### Prerequisite\n\n* `yarn` or `npm`\n* (optional) `docker` with `docker-compose`\n\n### Quickest way\n\nThe easiest way to run the example project is to use `docker-compose`:\n\n```bash\ndocker-compose up --build\n```\n\nthat's it :)\n\nYou can also follow instructions below if you want to customize it.\n\n### Install project dependencies\n\nGo to project root directory:\n\n```bash\nyarn install\n```\n\nIf you find permission problem when trying to install yarn globally, check [this](https://github.com/yarnpkg/yarn/issues/1060#issuecomment-268160528) out.\n\n### Setup database and session store\n\nYou can either\n\n* setup `postgresql` and `redis` using docker images:\n\n```bash\ndocker-compose up -d postgres redis\n```\n\nor\n\n* maintain it by yourself, if so, make sure you set the right config in `backend/config.json`.\n\n### Build \u0026 Run\n\nOn development (with hot reload):\n\n```bash\nyarn dev\n```\n\nOn production (with [terser](https://github.com/terser-js/terser) and other optimazitions):\n\n```bash\nyarn prod\n```\n\n## Profile assets bundle\n\nThanks to [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer), assets bundle can be analyzed and optimized through [DLL Plugin](https://webpack.js.org/plugins/dll-plugin/).\n\n```bash\nyarn profile\n```\n\n## Run test\n\n```bash\nyarn test\n```\n\n## Code coverage\n\n```bash\nyarn coverage\n```\n\n## Deployment\n\nEvery push on master branch will trigger [Github Actions](.github/main.workflow) for heroku deployment.\n\n## Contributing\n\nSee [CONTRIBUTING.md](https://github.com/Armour/express-webpack-react-redux-typescript-boilerplate/blob/master/.github/CONTRIBUTING.md)\n\n## License\n\n[MIT License](https://github.com/Armour/express-webpack-react-redux-typescript-boilerplate/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farmour%2Fexpress-webpack-react-redux-typescript-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farmour%2Fexpress-webpack-react-redux-typescript-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farmour%2Fexpress-webpack-react-redux-typescript-boilerplate/lists"}