{"id":15011334,"url":"https://github.com/gvanderest/react-typescript-boilerplate","last_synced_at":"2025-05-13T09:31:22.073Z","repository":{"id":141674947,"uuid":"111636126","full_name":"gvanderest/react-typescript-boilerplate","owner":"gvanderest","description":"Boilerplate for React in TypeScript ","archived":false,"fork":false,"pushed_at":"2018-02-16T00:33:56.000Z","size":57,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-01T21:45:23.849Z","etag":null,"topics":["boilerplate","jest","lesscss","react","reactjs","redux","stylus","tslint","typescript","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/gvanderest.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-22T04:25:32.000Z","updated_at":"2022-06-12T19:30:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"55e0f884-9505-46ec-bea9-4a04d388cc0d","html_url":"https://github.com/gvanderest/react-typescript-boilerplate","commit_stats":{"total_commits":54,"total_committers":1,"mean_commits":54.0,"dds":0.0,"last_synced_commit":"2c46dad72da83d0f0de7db0aa087d5b31b4750d7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvanderest%2Freact-typescript-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvanderest%2Freact-typescript-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvanderest%2Freact-typescript-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gvanderest%2Freact-typescript-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gvanderest","download_url":"https://codeload.github.com/gvanderest/react-typescript-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253913065,"owners_count":21983249,"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","jest","lesscss","react","reactjs","redux","stylus","tslint","typescript","webpack"],"created_at":"2024-09-24T19:40:44.349Z","updated_at":"2025-05-13T09:31:22.061Z","avatar_url":"https://github.com/gvanderest.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React TypeScript Boilerplate\n\nThis is an attempt at facilitating the starting of a new project with the\nfollowing features:\n\n* Basic Technologies\n  * TypeScript\n  * ReactJS\n  * Redux\n  * React-Router with Redux Integration\n    * Options between hash and browser routing\n* Styling\n  * LessCSS support\n  * Stylus support\n  * Image importing\n* Examples\n  * Example Startup\n  * Redux/Thunk Example\n* Performance\n  * Image Optimization\n  * JS Minification\n  * CSS Minification\n* Linting\n  * TSLint\n* Testing\n  * Jest Unit Testing\n\n## Getting Started\n\nMake a copy of this repository to your new project's code folder and install\nits dependencies.\n\n```shell\ngit clone git@github.com:gvanderest/react-typescript-boilerplate.git \u003cproject\u003e\ncd \u003cproject\u003e\nyarn  # or npm install\n```\n\nThen just start editing the `src/application.tsx` files and `src/styles/styles.styl` as you wish!\n\nIf you want to include images within your TypeScript code, simply:\n\n```typescript\n// load the image from the filesystem\nconst exodusLogo: string = require(\"./images/exodus-logo.png\");\n\n// then make use of it somewhere\nreturn (\n    \u003cimg src={ exodusLogo } alt=\"Exodus Media Inc.\" /\u003e\n);\n```\n\n## Folder Structure\n\n```text\nreact-typescript-boilerplate/\n    src/\n        components/\n            Example.tsx\n        ducks/\n            ducks.ts\n            __tests__\n                ducks.tests.ts\n        images/\n            exodus-logo.png\n        static/\n            index.html\n        styles/\n            reset.css\n            styles.styl\n        application.tsx\n        redux.ts\n        settings.ts\n```\n\nUnder the `src` folder you will find the `application.tsx` file which is the main driver of the entire project.  The `static` folder inside contains all of the static assets that will be copied directly to the root folder of the webserver when building or running the local webserver.\n\nTo get started, it will depend on which areas you want to get going with:\n\n## Areas of Development\n\n* Static files: Add to the `src/static` folder which will be hosted at the root directory `/` on the webserver\n* Shell and Routing: `src/application.tsx`\n* Components: `src/components/*.tsx`\n* Redux Actions and Reducers: `src/ducks/*.ts` and `settings.ts` to integrate\n* Tests: In the `__tests__` folders you should be able to find some examples:\n  * TODO: Component Tests: In `src/components/__tests__` there will be some example component tests\n  * Redux Tests: In `src/ducks/__tests__` there are some reducer/action tests\n\n## Local Development\n\nRun the local dev server, which uses webpack-dev-server.\n\n```shell\nyarn local  # for local webserver development\n# or ..\nyarn localprod  # for local testing of production release\n```\n\nThen browse to the following address: http://localhost:8080/\n\nIf you need hot reloading: http://localhost:8080/webpack-dev-server/\n\nNote: If you are running the production version, it will be minifying code, which can take a lot more processing and be slow to hot reload.\n\nIf you want to analyze the bundle being generated (only available in development mode): http://localhost:8081/\n\n## Build a Release\n\nRun the scripts to generate all the files needed for a release.\n\n```shell\nyarn release\n```\n\nAll of the files will be available in the `/release/` folder, which can then\nbe copied elsewhere, or a simple webserver can be used to serve this folder.\n\n## Planned Future Expansions\n\nAdd support for a few extra features:\n\n* Service Worker support?\n* Integration with Bulma or Bootstrap frameworks\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgvanderest%2Freact-typescript-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgvanderest%2Freact-typescript-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgvanderest%2Freact-typescript-boilerplate/lists"}