{"id":23870009,"url":"https://github.com/ahmadkdev/vite-vanilla-starter","last_synced_at":"2026-04-07T18:31:49.995Z","repository":{"id":270644644,"uuid":"911017149","full_name":"ahmadkdev/vite-vanilla-starter","owner":"ahmadkdev","description":"A minimal, fast, and customizable starter template for vanilla JavaScript projects, using Vite.","archived":false,"fork":false,"pushed_at":"2025-10-24T01:12:49.000Z","size":282,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-03T14:29:22.804Z","etag":null,"topics":["boilerplate","bundler","css","eslint","front-end","frontend","html","javascript","js","postcss","prettier","starter","template","vanilla","vanilla-javascript","vite","web"],"latest_commit_sha":null,"homepage":"https://github.com/ahmadkdev/vite-vanilla-starter","language":"JavaScript","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/ahmadkdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-01-02T03:56:53.000Z","updated_at":"2025-05-06T08:53:15.000Z","dependencies_parsed_at":"2025-03-04T02:30:17.132Z","dependency_job_id":"2d087dd5-8b54-4351-a533-82d0e12dce18","html_url":"https://github.com/ahmadkdev/vite-vanilla-starter","commit_stats":null,"previous_names":["ahmadkdev/vite-vanilla-starter"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ahmadkdev/vite-vanilla-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadkdev%2Fvite-vanilla-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadkdev%2Fvite-vanilla-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadkdev%2Fvite-vanilla-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadkdev%2Fvite-vanilla-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahmadkdev","download_url":"https://codeload.github.com/ahmadkdev/vite-vanilla-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahmadkdev%2Fvite-vanilla-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31524524,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["boilerplate","bundler","css","eslint","front-end","frontend","html","javascript","js","postcss","prettier","starter","template","vanilla","vanilla-javascript","vite","web"],"created_at":"2025-01-03T13:33:53.051Z","updated_at":"2026-04-07T18:31:49.966Z","avatar_url":"https://github.com/ahmadkdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Vite Vanilla Starter](./public/banner.svg)\n\n# Vite Vanilla Starter\n\n![Version](https://img.shields.io/github/package-json/v/ahmadkdev/vite-vanilla-starter)\n![License](https://img.shields.io/github/license/ahmadkdev/vite-vanilla-starter)\n![Vite Version](https://img.shields.io/github/package-json/dependency-version/ahmadkdev/vite-vanilla-starter/dev/vite)\n![Eslint Version](https://img.shields.io/github/package-json/dependency-version/ahmadkdev/vite-vanilla-starter/dev/eslint)\n![Prettier Version](https://img.shields.io/github/package-json/dependency-version/ahmadkdev/vite-vanilla-starter/dev/prettier)\n\nInspired by [@Barata-Ribeiro](https://github.com/Barata-Ribeiro)'s [vite-vanilla-js-template](https://github.com/Barata-Ribeiro/vite-vanilla-js-template).\n\nA lightweight, modern Vite starter template with PostCSS, ESLint, and Prettier for vanilla JavaScript projects.\n\n## Features\n\n- ⚡️ [Vite](https://vitejs.dev/) - Modern development server with lightning-fast HMR.\n- 🎨 [PostCSS](https://postcss.org/) - Transform CSS with JS plugins.\n- 🪄 [PostCSS Preset Env Plugin](https://preset-env.cssdb.org/) - Enables modern CSS features like nesting, custom media queries, and custom selectors.\n- 🔍 [ESLint](https://eslint.org/) - Enforces code consistency and catches errors.\n- ✨ [Prettier](https://prettier.io/) - Automatic code formatting to keep everything neat.\n\n## Roadmap\n\n- [ ] Add [rollap-plugin-critical](https://github.com/nystudio107/rollup-plugin-critical) for generating critical CSS.\n- [ ] Add TypeScript support.\n- [ ] Add testing integration (e.g., Jest, Vitest).\n- [ ] Create a CLI tool for project setup.\n- [ ] Add Tailwind CSS integration.\n\n## Cloning\n\nThis project uses [pnpm](https://pnpm.io/) for faster and more efficient dependency management.\nIf you don’t have it installed, run:\n\n```bash\nnpm install -g pnpm\n```\n\nFollow these steps to set up the project:\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/ahmadkdev/vite-vanilla-starter.git\n   cd vite-vanilla-starter\n   ```\n2. **Install dependencies**\n\n   ```bash\n   pnpm install\n   ```\n\n   - Optional: For ESLint integration with Vite\n     ```bash\n     pnpm add -D vite-plugin-eslint2\n     ```\n\n## Post-Cloning Steps\n\nAfter cloning the template, follow these steps to set it up for your own project:\n\n1. **Clean Commit History**\n   ```bash\n   rm -rf .git\n   git init\n   git add .\n   git commit -m \"Initial commit\"\n   ```\n2. **Update Project Details**\n\n   - Edit `package.json` to include your project's name, version, and description.\n   - Replace the contents of the `README.md` file with details about your project.\n   - Adapt the LICENSE file to your project.\n\n3. **Delete unnecessary files**\n\n   - ```bash\n     rm public/vite.svg src/assets/icons/javascript.svg src/assets/fonts/ src/styles/*.css src/js/*.js\n     ```\n\n   - Remove the placeholder code in index.html and src/main.js. (Leave the css file import `import \"./main.css\";`)\n\n4. **Add Your Content**\n\n   - Add or/and import your styles to src/main.css.\n   - Add or/and import your JavaScript logic to src/main.js.\n\n## Project Structure\n\n```\nvite-vanilla-starter/\n├── .github             # Github actions and workflows\n├── public/             # Public assets (served as-is, e.g., favicon, robots.txt)\n├── src/\n│   ├── assets/         # Static assets\n│   │   ├── fonts/      # Font files\n│   │   ├── icons/      # Icon files (e.g., SVGs)\n│   │   └── images/     # Images and graphics\n│   ├── js/             # JavaScript modules\n│   ├── styles/         # CSS stylesheets\n│   ├── main.js         # Main JavaScript entry point\n│   └── main.css        # Main CSS stylesheet\n├── .browserslistrc     # Supported browsers\n├── .gitignore          # Git ignores\n├── .prettierignore     # Prettier ignores\n├── .prettierrc         # Prettier formatting rules\n├── index.html          # HTML entry point\n├── LICENSE             # The project's license\n├── eslint.config.js    # ESLint rules and settings\n├── package.json        # Project dependencies and scripts\n├── pnpm-lock.yaml      # Lockfile for project's dependencies\n├── postcss.config.js   # PostCSS configuration\n├── README.md           # This file\n└── vite.config.js      # Vite configuration\n```\n\n## Available Scripts\n\n- `pnpm dev`: Start the development server with hot-reloading.\n- `pnpm build`: Create a production build.\n- `pnpm preview`: Preview the production build locally.\n- `pnpm lint`: Run ESLint to check for code issues.\n- `pnpm lint:fix`: Automatically fix ESLint errors.\n- `pnpm format`: Format your code using Prettier.\n\n## VS Code Setup\n\n1. Install required extensions:\n\n   - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n   - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n\n2. Add the following to your `.vscode/settings.json`:\n\n```json\n{\n  \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n  \"editor.formatOnSave\": true,\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll.eslint\": true\n  },\n  \"prettier.requireConfig\": true\n}\n```\n\n## Configuration Files\n\n### PostCSS\n\n`postcss.config.js`:\n\n```javascript\nimport postcssPresetEnv from 'postcss-preset-env';\n\nexport default {\n  plugins: [\n    postcssPresetEnv({\n      stage: 2,\n      features: {\n        'nesting-rules': true,\n        'custom-media-queries': true,\n        'custom-selectors': true,\n      },\n    }),\n  ],\n};\n```\n\n### ESLint\n\n`eslint.config.js`:\n\n```javascript\nimport eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';\n\nexport default [\n  {\n    ignores: ['dist/', 'node_modules/'],\n  },\n  eslintPluginPrettierRecommended,\n];\n```\n\n### Prettier\n\n`.prettierrc`:\n\n```json\n{\n  \"printWidth\": 80,\n  \"tabWidth\": 2,\n  \"singleQuote\": true,\n  \"trailingComma\": \"all\",\n  \"arrowParens\": \"always\",\n  \"bracketSpacing\": true,\n  \"useTabs\": false,\n  \"endOfLine\": \"lf\",\n  \"semi\": true\n}\n```\n\n### Vite\n\nBasic `vite.config.js`:\n\n```javascript\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n  // Your config here\n});\n```\n\nWith optional ESLint plugin:\n\n```javascript\nimport { defineConfig } from 'vite';\nimport eslint from 'vite-plugin-eslint2';\n\nexport default defineConfig({\n  plugins: [\n    eslint({\n      include: ['src/**/*.js'],\n      cache: false,\n    }),\n  ],\n});\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the MIT License. You are free to use, modify, and distribute this project as per the terms of the license.\nSee the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmadkdev%2Fvite-vanilla-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahmadkdev%2Fvite-vanilla-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmadkdev%2Fvite-vanilla-starter/lists"}