{"id":15862291,"url":"https://github.com/sydrawat01/react-boilerplate","last_synced_at":"2026-05-11T02:12:43.152Z","repository":{"id":48423826,"uuid":"371686910","full_name":"sydrawat01/react-boilerplate","owner":"sydrawat01","description":"🍽 A production-ready boilerplate for React+TypeScript applications. Features supported include Typescript, React Router, Redux Toolkit along with Webpack, Babel, ESLint, Prettier and Husky to name a few.","archived":false,"fork":false,"pushed_at":"2021-07-27T05:00:03.000Z","size":1248,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-02-07T13:26:03.017Z","etag":null,"topics":["boilerplate","production","react","react-redux","react-router","redux-toolkit","typescript"],"latest_commit_sha":null,"homepage":"https://boilerplate-react-ts.web.app/","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/sydrawat01.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-28T12:02:44.000Z","updated_at":"2023-03-07T02:48:40.000Z","dependencies_parsed_at":"2022-08-24T09:43:12.822Z","dependency_job_id":null,"html_url":"https://github.com/sydrawat01/react-boilerplate","commit_stats":null,"previous_names":[],"tags_count":4,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sydrawat01%2Freact-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sydrawat01%2Freact-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sydrawat01%2Freact-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sydrawat01%2Freact-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sydrawat01","download_url":"https://codeload.github.com/sydrawat01/react-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246709936,"owners_count":20821298,"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":["boilerplate","production","react","react-redux","react-router","redux-toolkit","typescript"],"created_at":"2024-10-05T22:40:19.551Z","updated_at":"2026-05-11T02:12:43.074Z","avatar_url":"https://github.com/sydrawat01.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e :hibiscus: \u003ca href=\"https://boilerplate-react-ts.web.app/\"\u003eReact Boilerplate\u003c/a\u003e\u003c/h1\u003e\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./src/assets/react-logo.svg\" alt=\"react\" width=\"85\"/\u003e\n    \u003cimg src=\"./src/assets/ts-logo.svg\" alt=\"ts\" width=\"60\" /\u003e\n    \u003cimg src=\"./src/assets/redux-logo.svg\" alt=\"redux\" width=\"60\" /\u003e\n    \u003cimg src=\"./src/assets/router-logo.svg\" alt=\"react-router\" width=\"60\"\u003e\n\u003c/div\u003e\n\nThis is a solid React + Typescript Boilerplate, using [Webpack](https://webpack.js.org/) and [Babel](https://babeljs.io/), with [`CSS Modules`](https://github.com/css-modules/css-modules), [`SASS`](https://sass-lang.com/) and traditional CSS stylesheets. Supports [React-Router](https://reactrouter.com) and [Redux-Toolkit](https://redux-toolkit.js.org/) too!\n\nThis boilerplate also uses a [webapck dashboard](https://github.com/FormidableLabs/webpack-dashboard) provided by [FormidableLabs](https://github.com/FormidableLabs), which makes you feel like you work at NASA! :neckbeard:\n\n## :star2: Features\n\nThis boilerplate has a lot of features, some worth mentioning are:\n\n- Change the theme with the click of a button!\n- [TypeScript](https://www.typescriptlang.org/) support\n- React-Router and Redux Toolkit support\n- CSS Modules and SASS support\n- [React Refresh for Webpack](https://github.com/pmmmwh/react-refresh-webpack-plugin)\n- [Dotenv for Webpack](https://github.com/mrsteele/dotenv-webpack)\n- [ESLint](https://eslint.org/)\n- [Prettier](https://prettier.io/)\n- [Husky](https://github.com/typicode/husky) with [lint-staged](https://github.com/okonet/lint-staged)\n- [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)\n- [Docker](https://www.docker.com/) support added in [v2.0.1](https://github.com/sydrawat/react-boilerplate/releases/tag/v2.0.1)!\n- [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) as described by [Brad Frost](https://bradfrost.com/), is followed in this boilerplate. It is highly opinionated, and hence the boilerplate structure is very flexible, adjustable according to you requirements.\n- Improved styles with atomic design approach with SASS for reference.\n- Redux Thunk example for fetching posts from [JSON Placeholder](https://jsonplaceholder.typicode.com/).\n\n## :arrow_heading_down: Installation\n\n- Install the boilerplate using the following command:\n\n```shell\n  npx degit https://github.com/sydrawat/react-boilerplate my-app\n```\n\n\u003e Please note that you'll need the [degit](https://www.npmjs.com/package/degit) package pre-installed on your system. If you do not have it installed beforehand, it automatically prompts you to install the package when you run the above command.\n\n- You'll need to install the dependencies as well:\n\n```shell\n  #for yarn users\n  yarn\n  #for npm users\n  npm i\n```\n\n## :microscope: Usage\n\nIf you do not want to install the template using a third party package, you can do so by downloading this boilerplate manually from here. Here's how to do so:\n\n- Clone the repository\n\n```shell\n  git clone https://github.com/sydrawat/react-boilerplate.git my-app\n```\n\n- Run the following command\n\n```shell\n  #for yarn users\n  yarn\n  #for npm users\n  npm i\n```\n\n## :construction: Development\n\nTo run the development server, run the following command:\n\n```shell\n  #for yarn users\n  yarn start\n  #for npm users\n  npm run start\n```\n\n\u003e This serves the app on `localhost:3000` via the webpack-dev-server package.\n\n## :rocket: Build\n\n- Run the following command to build your project for production:\n\n```shell\n  #for yarn users\n  yarn build\n  #for npm users\n  npm run build\n```\n\n- To see bundle info from [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) plugin, use the following command(s):\n\n```shell\n  #for yarn users\n  yarn build:info\n  #for npm users\n  npm run build:info\n```\n\n\u003e Bundle info will be shown on `localhost:3001`. This will open automatically in your preferred browser when you run the above command(s).\n\n- To see the app in prodution mode, navigate to the `build/` folder that is generated after running the above command. This will serve the production ready app to `localhost:5000`.\n\n```shell\n  cd build/;\n  npx serve\n```\n\n## :whale: Docker\n\nIf you wish to **_dockerise_** your project, and make it available as a docker image at [docker hub](https://hub.docker.com/), you can do so with a few simple commands!\n\n### Development\n\nTo test the application as a docket container in development mode, we need to simply run the following command(s):\n\n- To create a docker image that will run a container, use:\n\n```shell\n  docker-compose build\n```\n\n- Once the above command completes it's execution, we can now run either of the following commands:\n\n  - **_No-strings-attached_** dev server:\n\n  ```shell\n    docker-compose up\n    # Or, to run in detached mode (i.e, in the background)\n    docker-compose up -d\n  ```\n\n  - To see the cool `webpack-dashboard`:\n\n  ```shell\n    docker-compose run -p 3000:3000 dev\n  ```\n\n  - To peform cleanup:\n\n  ```shell\n    docker-compose down\n  ```\n\n### Deploy on [Docker Hub](https://hub.docker.com/)\n\nTo deploy or `push` your project docker image to the [docker hub](https://hub.docker.com/), use the following set of command(s):\n\n```shell\n  docker build -t \u003cusername\u003e/\u003crepository\u003e:\u003ctag\u003e .\n  docker tag \u003cusername\u003e/\u003crepository\u003e:\u003ctag\u003e \u003cusername\u003e/\u003crepository\u003e:latest\n  docker push \u003cusername\u003e/\u003crepository\u003e:\u003ctag\u003e\n\n  # It might look something like this:\n  docker build -t user/app:v1.0.0 .\n  docker tag user/app:v1.0.0 user/app:latest\n  docker push user/app:v1.0.0\n```\n\nIf all went well, your image will now be live on Docker Hub and it will be easy to share.\n\n### Next Steps\n\nAt this point, I can see that my application is running from a docker container locally, and I have that image on Docker Hub, so that's a big portion of the battle. From here, there are two more issues to cover:\n\n- [ ] Setting up a continuous integration tool to test and deploy code\n- [x] Setting up a production server to receive and serve code (maybe change it from Firebase to DigitalOcean?)\n\n\u003e :construction: This is still a Work-In-Progress. Please refer to [this issue](https://github.com/sydrawat/react-boilerplate/issues/2) for more details.\n\n## :scroll: License\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./License)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsydrawat01%2Freact-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsydrawat01%2Freact-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsydrawat01%2Freact-boilerplate/lists"}