{"id":22322996,"url":"https://github.com/frontendfixer/vite_react_boilerplate","last_synced_at":"2026-01-05T17:41:05.095Z","repository":{"id":155289520,"uuid":"630959697","full_name":"frontendfixer/vite_react_boilerplate","owner":"frontendfixer","description":"React Boilerplate using Vite","archived":false,"fork":false,"pushed_at":"2023-07-06T03:15:38.000Z","size":449,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-11T12:18:23.192Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","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/frontendfixer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2023-04-21T15:01:26.000Z","updated_at":"2023-04-23T14:47:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"afbc10b3-f89e-4c99-80a7-f769ca42650a","html_url":"https://github.com/frontendfixer/vite_react_boilerplate","commit_stats":null,"previous_names":[],"tags_count":1,"template":true,"template_full_name":null,"purl":"pkg:github/frontendfixer/vite_react_boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontendfixer%2Fvite_react_boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontendfixer%2Fvite_react_boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontendfixer%2Fvite_react_boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontendfixer%2Fvite_react_boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frontendfixer","download_url":"https://codeload.github.com/frontendfixer/vite_react_boilerplate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontendfixer%2Fvite_react_boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28217798,"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","status":"online","status_checked_at":"2026-01-05T02:00:06.358Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-12-04T01:09:01.046Z","updated_at":"2026-01-05T17:41:05.066Z","avatar_url":"https://github.com/frontendfixer.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Template using Vite.Js\n\nReact Boilerplate using `Vite` , `Prettier`, `Eslint`, `Stylelint`, `SASS` and `SVGO`\n\n---\n\n## Table of Contents\n\n### Official Resources\n\n- [Vite Documentation](https://vitejs.dev/)\n- [React](https://react.dev/learn)\n- [Prettier](https://prettier.io/)\n- [Eslint](https://eslint.org/docs/latest/use/getting-started)\n- [Stylelint](https://stylelint.io/user-guide/get-started/)\n- [SASS](https://sass-lang.com/documentation/)\n\n## Get Started\n\n```bash\n# clone the official repository\ngit clone https://github.com/frontendfixer/vite_react_boilerplate.git\ncd vite_react_boilerplate\n\n# install all packages using your favorites node installer\npnpm install\n# if you wish to use yarn then delete 'pnpm-lock.yaml' and\nyarn install\n```\n\n## Features\n\n1. **SASS** as css preprocessor\n1. **Terser** to minify JS\n1. **SVGO** for svg minification\n1. **ESLint** for JS/JSX linting\n\n---\n\n## Scripts\n\n```json\n\"dev\": \"vite\",\n\"build\": \"vite build\",\n\"preview\": \"vite preview\",\n\"lint:eslint\": \"eslint . --ext .js,.jsx\",\n\"fix:eslint\": \"eslint --fix  . --ext .js,.jsx\",\n\"lint:stylelint\": \"stylelint ./src/**/*.{css,scss,jsx}\",\n\"fix:stylelint\": \"stylelint --fix  ./src/**/*.{css,scss,jsx}\"\n```\n\n- you can run those scripts by terminal command\n  - start dev server\n    ```bash\n    pnpm run dev\n    ```\n  - start preview build\n    ```bash\n    pnpm run preview\n    ```\n  - eslint\n    ```bash\n    # start eslint\n    pnpm run lint:eslint\n    # fix all fixable problems\n    pnpm run fix:eslint\n    ```\n  - stylelint\n    ```bash\n    # start stylelint\n    pnpm run lint:stylelint\n    # fix all fixable problems\n    pnpm run fix:stylelint\n    ```\n\n---\n\n## Settings\n\nIf you'd like to overwrite **_vite_** or **_prettier_** or **_eslint_** or **_stylelint_** settings, you can add the rules in [vite.config.js](#vite-config) , [.prettierrc.json](#prettier-config) , [.eslintrc.json](#eslint-config) , [.stylelintrc.json](#stylelint-config) respectively.\n\n### vite config\n\n- **plugins**\n\n  ```js\n  import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';\n  import svgr from 'vite-plugin-svgr';\n\n  // add those plugins\n  plugins: [ViteImageOptimizer(), svgr()];\n  ```\n\n  - [_vite-plugin-image-optimizer_](https://github.com/FatehAK/vite-plugin-image-optimizer) is useful for svg minification\n  - [_vite-plugin-svgr_](https://github.com/pd4d10/vite-plugin-svgr) is used to create ReactComponent for any images/logo\n\n  ```js\n  import { ReactComponent as Logo } from './logo.svg';\n  ```\n\n- **settings**\n  - By default server and preview port are **5555** and **8888** you can change it here\n    ```js\n    server: {\n      port: 5555,\n    }\n    preview: {\n      port: 8080,\n    },\n    ```\n  - sourcemap and code split is enable for css and js\n    ```js\n    build: {\n    cssCodeSplit: true,\n    sourcemap: true,\n    },\n    ```\n\n### prettier config\n\n```json\n{\n  \"trailingComma\": \"es5\",\n  \"arrowParens\": \"avoid\",\n  \"printWidth\": 80,\n  \"quoteProps\": \"as-needed\",\n  \"semi\": true,\n  \"singleQuote\": true,\n  \"tabWidth\": 2,\n  \"bracketSameLine\": false,\n  \"bracketSpacing\": true,\n  \"jsxSingleQuote\": false\n}\n```\n\n### eslint config\n\n- **plugins**\n  - [_Airbnb_](https://github.com/airbnb/javascript) JavaScript Style Guide\n  ```json\n  \"extends\": [,\n    \"airbnb\",\n    \"airbnb/hooks\",\n    \"prettier\",\n    \"plugin:prettier/recommended\"\n  ],\n  \"plugins\": [\n    \"jsx-a11y\",\n    \"prettier\",\n    \"unused-imports\"\n  ]\n  ```\n- **rules**\n  you can change any rule define here\n\n  ```json\n  \"rules\": {\n\n  },\n\n  // some default reules is overwritten you can take a look at here or completely remove it\n  \"overrides\": [\n    {\n      \"files\": [\"src/**/*.{js,jsx}\"],\n      \"rules\": {\n\n      }\n    }\n  ]\n  ```\n\n### stylelint config\n\n- **plugins**\n  ```json\n  \"plugins\": [\n    // change all color format to either hsl or rgb\n    \"stylelint-color-format\",\n    // convert all px value to rem(base 16)\n    \"stylelint-rem-over-px\"\n  ]\n  ```\n  more details here\n  - [_stylelint-color-format_](https://github.com/filipekiss/stylelint-color-format)\n  - [_stylelint-rem-over-px_](https://github.com/a-tokyo/stylelint-rem-over-px)\n    - I have disabled it for SCSS function `rem()` I had created. You can enable it here\n    ```json\n    \"rules\": {\n      \"rem-over-px/rem-over-px\": false,\n      // \"rem-over-px/rem-over-px\": [true, { \"ignore\": \"1px\", \"ignoreFunctions\": [\"url\"] , \"ignoreAtRules\": [\"media\"], fontSize: 16 }],\n    }\n    ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontendfixer%2Fvite_react_boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrontendfixer%2Fvite_react_boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontendfixer%2Fvite_react_boilerplate/lists"}