{"id":13604319,"url":"https://github.com/Barata-Ribeiro/vite-vanilla-js-template","last_synced_at":"2025-04-11T23:32:15.909Z","repository":{"id":176345506,"uuid":"655320280","full_name":"Barata-Ribeiro/vite-vanilla-js-template","owner":"Barata-Ribeiro","description":"ViteJS starter template for vanilla JavaScript with some basic dependencies.","archived":false,"fork":false,"pushed_at":"2025-04-10T19:26:28.000Z","size":1333,"stargazers_count":59,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T20:41:26.075Z","etag":null,"topics":["autoprefixer","boilerplate","boilerplate-template","css-nano","css-reset","eslint","javascript","open-source","postcss","prettier","scaffold-template","template","vanilla-javascript","vite","vite-template","vitejs","vitejs-template"],"latest_commit_sha":null,"homepage":"","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/Barata-Ribeiro.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,"zenodo":null}},"created_at":"2023-06-18T14:46:54.000Z","updated_at":"2025-04-10T19:26:26.000Z","dependencies_parsed_at":"2023-09-22T07:23:00.173Z","dependency_job_id":"fc5b1646-0358-4798-9320-10446dacbc5a","html_url":"https://github.com/Barata-Ribeiro/vite-vanilla-js-template","commit_stats":null,"previous_names":["barata-ribeiro/vite-vanilla-js-template"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Barata-Ribeiro%2Fvite-vanilla-js-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Barata-Ribeiro%2Fvite-vanilla-js-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Barata-Ribeiro%2Fvite-vanilla-js-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Barata-Ribeiro%2Fvite-vanilla-js-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Barata-Ribeiro","download_url":"https://codeload.github.com/Barata-Ribeiro/vite-vanilla-js-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248495118,"owners_count":21113574,"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":["autoprefixer","boilerplate","boilerplate-template","css-nano","css-reset","eslint","javascript","open-source","postcss","prettier","scaffold-template","template","vanilla-javascript","vite","vite-template","vitejs","vitejs-template"],"created_at":"2024-08-01T19:00:43.472Z","updated_at":"2025-04-11T23:32:10.896Z","avatar_url":"https://github.com/Barata-Ribeiro.png","language":"JavaScript","funding_links":[],"categories":["Get Started"],"sub_categories":["Templates"],"readme":"# Vite Vanilla JS Template\n\n![screenshot](/public/screenshot.png)\n\nInitially built for personal use, I created this template for starting a new project with Vite.js and Vanilla Javascript. It is already set up with standard development tools like ESLint and Prettier for easy code formatting and linting, with Vite for a robust, modern build process.\n\n## Dependencies\n\nThis template uses the following dependencies:\n\n- **[Vite](https://vitejs.dev/):** A next-generation frontend build tool that offers a fast dev server and optimized builds.\n- **[ESLint](https://eslint.org/):** An open-source JavaScript linting utility that helps maintain a consistent code style.\n- **[Prettier](https://prettier.io/):** An opinionated code formatter that enforces a consistent style across your project.\n- **[eslint-config-airbnb-base](https://www.npmjs.com/package/eslint-config-airbnb-base) and [eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier):** ESLint configurations adhering to Airbnb's base JS style guide and disabling stylistic rules that might conflict with Prettier.\n- **[eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import) and [eslint-plugin-prettier](https://www.npmjs.com/package/eslint-plugin-prettier):** ESLint plugins that enforce ES2015+ import/export syntax and integrate Prettier with ESLint.\n- **[autoprefixer](https://www.npmjs.com/package/autoprefixer) and [postcss](https://postcss.org/):** Autoprefixer automatically adds vendor prefixes to CSS, while PostCSS provides a way to transform CSS with JavaScript.\n- **[cssnano](https://cssnano.github.io/cssnano/):** A tool that helps to compress and optimize CSS files.\n- **[postcss-nesting](https://www.npmjs.com/package/postcss-nesting):** A PostCSS plugin that allows you to use modern CSS Nesting in your stylesheets.\n- **[vite-plugin-eslint](https://www.npmjs.com/package/vite-plugin-eslint):** Integrates ESLint into the Vite build process for on-the-fly linting.\n- **[the-new-css-reset](https://elad2412.github.io/the-new-css-reset/):** A modern, CSS reset for your styles.\n\n## Cloning\n\n1. To start using this template, clone the repository with this command:\n\n```bash\ngit clone https://github.com/Barata-Ribeiro/vite-vanilla-js-template.git\n```\n\n2. Then proceed to the folder and install dependencies:\n\n```bash\ncd vite-vanilla-js-template\nnpm install\n```\n\n**or**\n\n```bash\nnpm install -g degit # if you don't have degit installed...\n\n#degit documentation at: https://github.com/Rich-Harris/degit\n```\n\n1. Use 'degit' to create a folder project using this template:\n\n```bash\ndegit Barata-Ribeiro/vite-vanilla-js-template your-project-name\n```\n\n2. Then proceed to the folder and install dependencies:\n\n```bash\ncd your-project-name\nnpm install\n```\n\n\n## Post-Cloning Steps\n\nAfter cloning the template, make sure to clean up and update the following:\n\n1. Remove the .git directory and run `git init` to clean the commit history.\n2. Clean up the README.md file.\n3. Adapt the LICENSE file to your project.\n4. Delete `public/vite.svg`, `public/screenshot`, `src/assets/images/javascript.svg`, and `src/assets/images/vite.svg`.\n5. Delete the content from `src/styles/style.css`.\n6. In the `src/js/main.js` file, leave only these import statements: `import \"../../styles/style.css\";` and `import \"the-new-css-reset/css/reset.css\";`.\n7. Adapt the `package.json` file with your project's own information.\n8. Delete the .github folder.\n\n## Scripts\n\nUse the following scripts for your development workflow:\n\n```bash\n# Start the development server\nnpm run dev\n\n# Checks your code for any linting errors\nnpm run lint\n\n# Tries to automatically fix any linting errors present in your code\nnpm run lint:fix\n\n# Formats your code in a consistent, predefined style using Prettier\nnpm run format\n\n# Build for production\nnpm run build\n\n# Preview the build\nnpm run preview\n\n# Build and preview the project\nnpm run buildpreview\n```\n\n## Folder Structure\n\nThis is the structure of the project:\n\n```plaintext\n/\n├── .github                 # Github actions and workflows\n├── node_modules            # Node.js dependencies for the project.\n├── public                  # Public assets and resources\n├── src                     # Source code\n│   ├── assets              # General assets for your project\n│   │   ├── images          # Store your images here\n│   ├── js                  # Javascript files of your project\n│   ├── styles              # CSS styles for your project\n├── .editorconfig           # Configuration for the EditorConfig plugin\n├── .eslintignore           # Files to be ignored by ESLint\n├── .eslintrc.json          # Configuration for ESLint\n├── .gitignore              # Files and folders to be ignored by Git\n├── .prettierignore         # Files to be ignored by Prettier\n├── .prettierrc             # Configuration for Prettier\n├── index.html              # The HTML file for your project\n├── LICENSE                 # The license for your project\n├── package-lock.json       # Lockfile for your project's dependencies\n├── package.json            # Defines your project and its dependencies\n├── postcss.config.cjs      # Configuration for PostCSS\n├── README.md               # This file\n├── vite.config.js          # Configuration for Vite\n```\n\n## License\n\nThis template was created under the [MIT License](LICENSE.md).\n\n**Happy coding!** 👨‍💻\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBarata-Ribeiro%2Fvite-vanilla-js-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBarata-Ribeiro%2Fvite-vanilla-js-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBarata-Ribeiro%2Fvite-vanilla-js-template/lists"}