{"id":20590912,"url":"https://github.com/jimli570/react-template","last_synced_at":"2026-04-11T10:35:52.962Z","repository":{"id":208907806,"uuid":"487115088","full_name":"jimli570/react-template","owner":"jimli570","description":"React template (up to date as in first half of 2022) project template using webpack for a modern SPA react project. Made it for for work, so we could have a good start on our React project back in 2022.","archived":false,"fork":false,"pushed_at":"2022-05-26T11:43:35.000Z","size":115,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-06T13:45:11.759Z","etag":null,"topics":["2022-project","boilerplate","project","react","react-router","react-router-dom","react18","redux","spa","template","web","webapp","webpack"],"latest_commit_sha":null,"homepage":"","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/jimli570.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-29T21:30:14.000Z","updated_at":"2024-10-26T01:20:58.000Z","dependencies_parsed_at":"2024-01-14T15:10:16.860Z","dependency_job_id":null,"html_url":"https://github.com/jimli570/react-template","commit_stats":null,"previous_names":["jimli570/react-template"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jimli570/react-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimli570%2Freact-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimli570%2Freact-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimli570%2Freact-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimli570%2Freact-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jimli570","download_url":"https://codeload.github.com/jimli570/react-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jimli570%2Freact-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31677819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T08:18:19.405Z","status":"ssl_error","status_checked_at":"2026-04-11T08:17:08.892Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["2022-project","boilerplate","project","react","react-router","react-router-dom","react18","redux","spa","template","web","webapp","webpack"],"created_at":"2024-11-16T07:38:45.743Z","updated_at":"2026-04-11T10:35:52.953Z","avatar_url":"https://github.com/jimli570.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](https://repository-images.githubusercontent.com/487115088/b85ddedf-c678-468f-b1f9-1634fd16e83b)\n\n# react-template\n\nReact template project.\n\n## Description\n\nModern up to date project template for a modern SPA react project.\n\nIt is important to have a good foundation to build your project upon, using the proper tools to your advantage, having a good structure. This will increase your developement speed, quality, testability etc. In the end, you pay less \u0026 gain more.\n\ntherefore I created this, to have a good starting point.\nIt might not contain everything you need, but it should be a good starting point for your creation of a modern webapplication.\n\n## Table of contents\n\n - [Description](#description)\n - [Table of contents](#table-of-contents)\n - [Getting Started](#getting-started)\n - [Prerequisites](#prerequisites)\n - [Installing](#installing)\n - [Executing program](#executing-program)\n - [Production deploy](#production-deploy)\n - [Development deploy](#development-deploy)\n - [Scripts](#scripts)\n - [Common](#common)\n - [Test](#test)\n - [Lint](#lint)\n - [Husky](#husky)\n - [Other](#other)\n - [Libraries \u0026 Tools](#libraries--tools)\n - [Dependencies](#dependencies)\n - [Production](#production)\n - [Development](#development)\n - [Optional](#optional)\n - [Help](#help)\n - [Project Files](#project-files)\n - [FAQ](#faq)\n - [Useful sites for developers](#useful-sites-for-developers)\n - [Version History](#version-history)\n - [Authors](#authors)\n - [License](#license)\n - [Acknowledgments](#acknowledgments)\n\n## Getting Started\n\n### Prerequisites\n\n[Node Package Manager](https://www.npmjs.com/)\n\n### Installing\n\nFrom withing the project root directory.\nStep 2 only needed if you actually want to set these as pre-commit hooks (which is a nice thing to have!).\n\n| Command order | Syntax | Description |\n| ------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------ |\n| 1 | ```npm install``` | Install all the project dependencies specified in package.json |\n| 2 | ```npm run husky:setup``` | Optional but recommended: Setup husky hooks. ```npm run lint``` \u0026 ```npm run test``` will be set as as pre-commit hooks. |\n\n\n### Executing program\n\n#### Production deploy\n\n| Syntax | Description |\n| ------------------- | -------------------------------------- |\n| ```npm run build``` | Builds the project into 'dist/' folder |\n\n#### Development deploy\n\n| Syntax | Description |\n| ------------------- | ---------------------------------------------------- |\n| ```npm run start``` | Deploys the applications locally in development mode |\n\n\u003c!-- --- --\u003e\n\n## Scripts\n\n### Common\n\n| Syntax | Description |\n| ------------------- | ---------------------------------------------------- |\n| ```npm run start``` | Deploys the applications locally in development mode |\n| ```npm run build``` | Builds the project into 'dist/' folder |\n\n### Test\n\n| Syntax | Description |\n| ------------------------------- | --------------------------------------------------- |\n| ```npm run test``` | Run tests once |\n| ```npm run test:watch``` | Tests run as you code |\n| ```npm run test:coverage``` | Print coverage report of tests |\n| ```npm run test:dumpcoverage``` | Dump coverage report of tests to 'out/coverage.out' |\n\n### Lint\n\n| Syntax | Description |\n| -------------------------- | ------------------------------------------ |\n| ```npm run lint``` | Lint 'src/' folder |\n| ```npm run lint:dumpcfg``` | Lint \u0026 dump 'src' folder to 'out/lint.out' |\n\n### Husky\n\nPre-commit hook.\n\n| Syntax | Description |\n| -------------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| ```husky:setup``` | You need to run this once in repository root, it will enable git-hooks. ```husky:makeexecutable``` is also called. |\n| ```husky:makeexecutable``` | Runs 'scripts/setupHusky.sh' which sets the '.husky/pre-commit' as a executable |\n\n### Other\n\n| Syntax | Description |\n| ------------------------------ | ----------------------------------------------------------------- |\n| ```npm run eject``` | Avoid this, ejects all configs and gives you full control of them |\n| ```npm run upload-to-server``` | Example script |\n\n\u003c!-- --- --\u003e\n\n## Libraries \u0026 Tools\n\n### Dependencies\n\nDescribes some of the libraries in use, or that might be used. These can be adjusted for you needs in package.json file.\n\n#### Production\n\nPackages that I most likely will use in production.\n\n| Package | Description |\n| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |\n| ```react``` | The framework used for the webinterface |\n| ```react-dom``` | Extends react to enable DOM-manupilation (single page apps) |\n| ```react-redux``` | The store (state-machine), which share/sync state between components |\n| ```react-router-dom``` | The router, helps link between the browser's URL/History and components allowing for certain paths to render whatever view is associated with it |\n| ```@apollo/client``` | Used to interface with a potential backend. If you decide to not use this, then also remove Apollo from 'src/App.tsx' |\n\n#### Development\n\nPackages that I most likely will use in development.\n\n| Package | Description |\n| ----------------------- | -------------------------------------------------------------------------------------------------------------------- |\n| ```react-app-rewired``` | Tweak the create-react-app webpack config(s) without using 'eject' and without creating a fork of the react-scripts. |\n\n#### Optional\n\nPackages I might want to use in the projects.\n\n| Package | Description |\n| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |\n| ```create-react-app``` | Used to create the inital Preact/redux/typescrip configurations \u0026 additional tools used in this project. You do not need to run this again. |\n| ```cra-template-redux-typescript``` | Template used together with ```create-react-app``` for configs. |\n| ```react-bootstrap``` | Got some usefull scss/css in it, mostly for for layouting \u0026 getting good default css-settings. |\n\n## Help\n\nSome things might be worthwhile mentioning, or explanings.\nThis is a good section for that.\n\n### Project Files\n\nSome explenation of the files in the project.\n\n | Name | Type | Description |\n | ----------------------------------- | ------ | ------------------------------------------------------------------------------------------------------ |\n | ```public/``` | folder | Static content that will be available in the project, index.html being the template for the html entry |\n | ```scripts/``` | folder | A place to put your custom scripts in |\n | ```src/``` | folder | Project sourcecode |\n | ```.eslintignore``` | file | Contains list of folders \u0026 files that should be ignored by eslint |\n | ```.eslintrc.js``` | file | Eslint configuration |\n | ```.browserslistrc``` | file | Specifies supported browsers |\n | ```.gitignore``` | file | Contains list of folders \u0026 files that should be ignored by git |\n | ```README.md``` | file | This is the README you are reading right now |\n | ```config-overrides.js``` | file | Override project configuration that otherwise might be difficult to hook into in here. |\n | ```package-lock.json``` | file | Contains dependency-tree of all the packages and subpackages |\n | ```package.json``` | file | This is the project entrypoint |\n | ```react-template.code-workspace``` | file | Template workspace file for VS Code, with some plugin recommendations |\n | ```tsconfig.json``` | file | Typescript configuration |\n\n\nThen enviroment-files are useful hooks for the tools, where you can define variables that you may use in your project.\nIf a variable is not used in the project, it will not be included in the build. \nRemember to use the ```REACT_APP_``` prefix when naming the variables, otherwise they will not be included.\n \n | Name | Type | Description |\n | ---------------------- | ---- | -------------------------------------------------------------------------------------- |\n | ```.env``` | file | Define env-variables that can be used in the application here. this one is always read |\n | ```.env.local``` | file | Make your own local overrides here. Do not commit changes, keep in .gitignore |\n | ```.env.development``` | file | Read in development |\n | ```.env.test``` | file | Read in test |\n | ```.env.production``` | file | Read in production |\n \n### FAQ\n\n\u003cdetails\u003e\n\u003csummary\u003eHow was these project files initially created\u003c/summary\u003e\n\u003cbr\u003e\nThe inital configurations was generated using 'create-react-app'. This\ndoes not have to be done again.\n\n```npx create-react-app my-app --template redux-typescript```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eProblems using the precommit hook\u003c/summary\u003e\n\u003cbr\u003e\nThis is problubary because the git-hook is not set as executeable, \ntry running ```npm run husky:makeexecutable```, it sets the './husky/pre-commit' as a executable.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eFailed to parse source map from '...node_modules/ts-invariant/src/invariant.ts'\u003c/summary\u003e\n\u003cbr\u003e\nIf getting some warnings like below\nThis error currently turn up on the dev-server, the is a sourcemap missing, nothing to worry about.\n\n```\nCompiled with warnings.\nFailed to parse source map from '...node_modules/ts-invariant/src/invariant.ts'....\n```\n\nSome more comments about the issue can be found [here](https://github.com/mswjs/msw/issues/1030#issuecomment-1001449665)\n\u003c/details\u003e\u003cbr/\u003e\n\n### Useful sites for developers\n\n| Link | Description |\n| --------------------------------------- | ------------------------------------------------ |\n| [caniuse](https://caniuse.com/) | Check browser support |\n| [w3schools](https://www.w3schools.com/) | Tutorials in most web-techs |\n| [Metatags](https://metatags.io/) | Useful for generating social media metadata tags |\n\n## Version History\n\n* 1.0.0 (2022-04-30)\n * Initial Release. All packages up to date.\n\n## Authors\n\nJimmy Liikala\n[@jimli570](https://github.com/jimli570)\n\n## License\n\nCopyright (c) [2022] [Jimmy Liikala]\n\n\u003cdetails\u003e\n \u003csummary\u003eMIT License\u003c/summary\u003e\n \u003cbr\u003e\n\n ![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)\n\n Permission is hereby granted, free of charge, to any person obtaining a copy\n of this software and associated documentation files (the \"Software\"), to deal\n in the Software without restriction, including without limitation the rights\n to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n copies of the Software, and to permit persons to whom the Software is\n furnished to do so, subject to the following conditions:\n\n The above copyright notice and this permission notice shall be included in all\n copies or substantial portions of the Software.\n\n THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n SOFTWARE.\n \u003c/details\u003e\n\n## Acknowledgments\n\nThanks to Robin Isaksson [@asura6](https://github.com/asura6) for verifying the project and shedding light on parts that needed improvements. \n\n\u003cdetails\u003e\n\u003csummary\u003eSome resources found useful in the making\u003c/summary\u003e\n\u003cbr\u003e\n \n* [Getting Started with React Redux](https://react-redux.js.org/introduction/getting-started)\n* [Markdown guide](https://www.markdownguide.org/)\n* [jest](https://jestjs.io)\n* [Apollo GraphQL](https://www.apollographql.com/)\n* [tsconfig.json](https://www.typescriptlang.org/tsconfig)\n* [package.json](https://docs.npmjs.com/cli/v7/configuring-npm/package-json)\n* [Common mistakes with React Testing Library](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)\n* [Customize Create React App without Ejecting](https://www.npmjs.com/package/react-app-rewired)\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjimli570%2Freact-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjimli570%2Freact-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjimli570%2Freact-template/lists"}