{"id":25047492,"url":"https://github.com/norman-albusberger/vitealpinebootstrapstarter","last_synced_at":"2026-01-24T14:05:39.355Z","repository":{"id":204543097,"uuid":"710964838","full_name":"norman-albusberger/ViteAlpineBootstrapStarter","owner":"norman-albusberger","description":"ViteAlpineBootstrapStarter is a template to kickstart development for SPA development using the reactive power of alpinejs and the easy workflow of vite.","archived":false,"fork":false,"pushed_at":"2024-10-04T13:16:26.000Z","size":757,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-06T19:53:04.810Z","etag":null,"topics":["alpine","alpinejs","bootstrap","bootstrap5","spa","starter-project","starter-template","vite"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/norman-albusberger.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-10-27T20:47:59.000Z","updated_at":"2024-10-04T13:16:30.000Z","dependencies_parsed_at":"2025-05-06T19:54:36.732Z","dependency_job_id":null,"html_url":"https://github.com/norman-albusberger/ViteAlpineBootstrapStarter","commit_stats":null,"previous_names":["norman-albusberger/vite-alpine-bootstrap-boilerplate","norman-albusberger/vitealpinebootstrapstarter"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/norman-albusberger/ViteAlpineBootstrapStarter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/norman-albusberger%2FViteAlpineBootstrapStarter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/norman-albusberger%2FViteAlpineBootstrapStarter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/norman-albusberger%2FViteAlpineBootstrapStarter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/norman-albusberger%2FViteAlpineBootstrapStarter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/norman-albusberger","download_url":"https://codeload.github.com/norman-albusberger/ViteAlpineBootstrapStarter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/norman-albusberger%2FViteAlpineBootstrapStarter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28729411,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-24T10:24:43.181Z","status":"ssl_error","status_checked_at":"2026-01-24T10:24:36.112Z","response_time":89,"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":["alpine","alpinejs","bootstrap","bootstrap5","spa","starter-project","starter-template","vite"],"created_at":"2025-02-06T07:16:44.213Z","updated_at":"2026-01-24T14:05:39.336Z","avatar_url":"https://github.com/norman-albusberger.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n![Header Image](https://github.com/norman-albusberger/ViteAlpineBootstrapStarter/blob/main/src/public/img/header.jpg?raw=true)\n\n# ViteAlpineBootstrapStarter for SPA\n\n![GitHub License](https://img.shields.io/github/license/norman-albusberger/ViteAlpineBootstrapStarter)\n![Last Commit](https://img.shields.io/github/last-commit/norman-albusberger/ViteAlpineBootstrapStarter)\n![Vite Version](https://img.shields.io/badge/vite-4.4.5-brightgreen)\n![Alpine.js Version](https://img.shields.io/badge/alpine.js-3.13.0-blue)\n![Bootstrap Version](https://img.shields.io/badge/bootstrap-5.3.1-purple)\n\n**ViteAlpineBootstrapStarter** is an optimized template designed for developers building Single Page Applications (SPAs) with **Vite**, **Alpine.js**, and **Bootstrap**. Get started faster with a modern frontend stack that prioritizes speed, simplicity, and flexibility.\n\n---\n\n## 🔥 Why Choose ViteAlpineBootstrapStarter?\n\nIn today’s fast-paced web development landscape, speed and efficiency are everything. This starter template streamlines your project setup and allows you to jump straight into development with zero hassle. Built with modern tools, it gives you everything you need to create a fast, responsive, and scalable SPA with minimal configuration.\n\n### Key Benefits:\n- **Zero Setup Overhead**: Pre-configured with essential tools and settings to get you coding immediately.\n- **Fast Development Cycles**: Instant updates with Vite's Hot Module Replacement (HMR).\n- **Powerful Yet Simple**: Leverage the declarative and reactive capabilities of Alpine.js without the overhead of larger frameworks.\n\n---\n\n## 🚀 Featured Technologies\n\nThis template is built on powerful and modern tools:\n\n| ![Vite](https://vitejs.dev/logo-with-shadow.png) | ![AlpineJS](https://alpinejs.dev/alpine_long.svg) | ![Bootstrap](https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png) | ![Pinecone Router](https://avatars.githubusercontent.com/u/83432496?s=200\u0026v=4) | ![Bootstrap Icons](https://icons.getbootstrap.com/assets/img/icons-hero@2x.png) |\n|:---:|:---:|:---:|:---:|:---:|\n| [Vite](https://vitejs.dev/) | [AlpineJS](https://alpinejs.dev/) | [Bootstrap](https://getbootstrap.com/) | [Pinecone Router](https://github.com/pinecone-router/router) | [Bootstrap Icons](https://icons.getbootstrap.com/) |\n\n---\n\n## 🛠️ Project Features\n\n- **Component Autoloading**: Automatically detects and loads your Alpine.js components, reducing manual imports and simplifying your code.\n- **SCSS Support**: Fully modular SCSS structure with Bootstrap integration, ensuring clean, maintainable styles.\n- **Environment Variables**: Manage environment variables easily with `.env` files, supporting different configurations for development and production.\n- **Optimized for Production**: Ready-to-go build scripts for production environments, minimizing assets and optimizing for performance.\n\n---\n\n## ⚙️ Getting Started\n\n### Prerequisites:\n- Node.js \u003e= 12.x\n\n### Installation:\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/norman-albusberger/ViteAlpineBootstrapStarter.git\n   ```\n2. Navigate to the project directory:\n   ```bash\n   cd ViteAlpineBootstrapStarter\n   ```\n3. Install the dependencies:\n   ```bash\n   npm install\n   ```\n4. Start the development server:\n   ```bash\n   npm run dev\n   ```\n\n### Development and Build Scripts:\n- **Start Development**: Instant feedback with HMR.\n  ```bash\n  npm run dev\n  ```\n- **Build for Production**: Optimizes assets and prepares them for deployment.\n  ```bash\n  npm run build\n  ```\n- **Preview Production Build**: Serve locally to preview the final output.\n  ```bash\n  npm run preview\n  ```\n\n---\n\n## 🧑‍💻 Best Practices\n\n### IDE Setup with PhpStorm/WebStorm:\n\n1. Use the **NPM Scripts Tool Window** for managing build scripts.\n2. Enable **Hot Module Replacement (HMR)** for instant feedback on code changes.\n3. Take advantage of **live debugging** and **code inspections** to catch issues early.\n\n---\n\n## 📦 Project Structure\n\n```\n├── src\n│   ├── assets\n│   │   └── img\n│   └── components\n├── dist\n├── .env\n├── .gitignore\n└── package.json\n```\n\n- **src**: Contains all source files (components, styles, assets).\n- **dist**: Contains the production build files.\n- **.env**: Stores environment variables for configuration.\n\n---\n\n## ⚡️ Component Autoloader\n\nOne of the standout features of **ViteAlpineBootstrapStarter** is its **Component Autoloader**. This mechanism automatically detects and registers Alpine.js components without the need for manual imports, making the development process much smoother and less error-prone.\n\n### How It Works:\n\nThe Component Autoloader follows a **convention-over-configuration** principle:\n- Each Alpine.js component is placed in the `src/components` directory.\n- The Autoloader dynamically imports the component files based on their file name and automatically initializes them across the application.\n\nFor example, if you create a new file `ExampleComponent.js` in the `components` folder, you can structure your component as follows:\n\n```javascript\n// File: src/components/ExampleComponent.js\nexport default function ExampleComponent() {\n    return {\n        // Alpine.js data and methods\n    };\n}\n```\n\nWith no further configuration needed, this component will now be available throughout the application, automatically recognized and registered.\n\n### Benefits:\n\n- **Reduced Boilerplate**: No need to manually import or register components, keeping your code cleaner.\n- **Easier Scalability**: As your project grows, components can be added, modified, or removed without ever needing to touch a central registry or configuration file.\n- **Improved Developer Experience**: Just focus on writing the logic for each component, and the autoloader handles the rest.\n\n### Example:\n\nHere’s how to create a new component:\n\n1. Create a file in `src/components`, e.g., `HelloWorldComponent.js`.\n2. Define your component with Alpine.js:\n\n    ```javascript\n    export default function HelloWorldComponent() {\n        return {\n            message: \"Hello, World!\",\n            greet() {\n                alert(this.message);\n            }\n        };\n    }\n    ```\n\n3. The component is automatically registered and ready to use in your HTML:\n\n    ```html\n    \u003cdiv x-data=\"HelloWorldComponent()\"\u003e\n        \u003cbutton @click=\"greet\"\u003eClick Me!\u003c/button\u003e\n    \u003c/div\u003e\n    ```\n\nNo manual imports, no additional configuration—just add the file and start using your components in your HTML templates.\n\nThis **Component Autoloader** significantly boosts productivity, reduces configuration overhead, and ensures that your codebase remains clean and maintainable as your project scales.\n\n---\n\n## 📊 SEO and Performance\n\nThis project follows best practices to ensure both **SEO optimization** and **performance**:\n\n- **Lazy loading components** for faster load times.\n- **Minification and tree-shaking** during the build process to optimize resources.\n- **Responsive Design** out of the box with Bootstrap, ensuring your app looks great on all devices.\n\n---\n\n## 📚 Documentation and Resources\n\nFor more details, refer to the official documentation of the tools integrated into this starter:\n\n- [Vite Documentation](https://vitejs.dev/guide/)\n- [AlpineJS Documentation](https://alpinejs.dev/start-here)\n- [Bootstrap Documentation](https://getbootstrap.com/docs/5.3/getting-started/introduction/)\n- [Pinecone Router Documentation](https://github.com/pinecone-router)\n\n---\n\n## 🙌 Contributing\n\nWe welcome contributions from the community! Whether it’s reporting bugs, suggesting new features, or submitting pull requests, we appreciate your involvement. Check out our [Contributing Guidelines](https://github.com/norman-albusberger/ViteAlpineBootstrapStarter/blob/main/CONTRIBUTING.md).\n\n1. Fork the repository.\n2. Create a new feature branch (`git checkout -b feature/NewFeature`).\n3. Commit your changes (`git commit -m \"Add new feature\"`).\n4. Push to the branch (`git push origin feature/NewFeature`).\n5. Open a pull request.\n\n---\n\n## 📄 License\n\nDistributed under the MIT License. See [LICENSE](https://github.com/norman-albusberger/ViteAlpineBootstrapStarter/blob/main/LICENSE) for more information.\n\n---\n\n## 👤 Contact\n\nNorman Albusberger - [Portfolio](https://norman-albusberger.github.io)\n\n---\n\n### ⭐️ **If you find this project helpful, please consider giving it a star on GitHub!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnorman-albusberger%2Fvitealpinebootstrapstarter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnorman-albusberger%2Fvitealpinebootstrapstarter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnorman-albusberger%2Fvitealpinebootstrapstarter/lists"}