🔗 Table of Contents

• ⚙️ Installation
• 🛠️ Options
• 🤖 Prompts
• 📂 Templates
• 💡 Examples
• 🛠️ Development
• 🧪 Testing
• 📜 License
• 🤝 Contributing
• 🧱 About the Templates

⚙️ Installation

Use Directly with npx

You can quickly scaffold a project by running the following command:

npx create-vanilla-kit my-vanilla-kit

Global Installation

Install this tool globally to use it anywhere on your system:

npm install -g create-vanilla-kit

🛠️ Options

• -t, --template <template>: Choose the template you want to use. Available templates are vanillaKit-Static (default) and vanillaKit-Express.
• -h, --help: Display help for the CLI.

🤖 Prompts

When creating a project, the CLI will ask you a few simple questions:

• Template: Choose between vanillaKit-Static or vanillaKit-Express.
• Initialize Git: Would you like to set up a Git repository? (Yes/No)
• Install Dependencies: Do you want to install npm packages right away? (Yes/No)

📂 Templates

vanillaKit-Static

A versatile static project template designed for rapid development of fast, efficient websites. It comes with a Webpack boilerplate to bundle your HTML, SCSS, and JavaScript assets seamlessly. Ideal for creating static websites with modern front-end technologies.

vanillaKit-Express

A robust Node.js project template featuring Express.js and WebKit support. This template is tailored for swift development of server-side applications, including built-in support for SCSS for styling and PUG for templating, making it perfect for building dynamic web applications quickly.

💡 Examples

Create a VanillaKit Static Project

npx create-vanilla-kit my-static-site

Create a VanillaKit Express Project

npx create-vanilla-kit my-express-app --template Express

🛠️ Development

File Structure

└── create-vanilla-kit/
    ├── images/                # Directory for images
    ├── src/                   # Source code
    │   ├── index.js           # Main entry point for the CLI
    │   ├── utils/             # Utility functions
    ├── templates/             # Project templates
    ├── tests/                 # Test cases
    ├── .editorconfig          # Editor configuration
    ├── .eslintrc              # ESLint configuration
    ├── .gitignore             # Git ignore file
    ├── package.json           # Project dependencies and scripts
    ├── README.md              # Project documentation

Clone the Repository

To get started, clone the repository to your local machine:

git clone https://github.com/hanzala-h/create-vanilla-kit.git

Install Dependencies

Navigate to the project directory and install the necessary dependencies:

cd create-vanilla-kit
npm install

Run Locally

To test or develop the CLI locally, use the following command:

node src/index.js <project-name>

Replace <project-name> with the name of the project you wish to create. This command will run the CLI tool and create a new project with the specified name.

Additional Development Tips

• Editor Configuration: Ensure that your editor is configured with the .editorconfig and .eslintrc files for consistent code style and linting.
• Testing: Write and run tests located in the tests/ directory to ensure your code works as expected.
• Documentation: Update the README.md file with relevant information about your changes and development practices.

🧪 Testing

You can write unit tests using Jest or Mocha. Be sure to add tests for critical functions such as file operations, Git initialization, and dependency installation.

📜 License

This project is licensed under the MIT License. See the LICENSE file for details.

🤝 Contributing

Contributions are always welcome! Whether you have new template ideas, want to fix bugs, or improve features, feel free to:

1. Fork the repository
2. Make your changes
3. Submit a pull request

If you spot any issues or have suggestions, please open an issue, and I'll get to it as soon as I can. Even small ideas are valuable!

🧱 About the Templates

Both vanillaKit-Static and vanillaKit-Express are WebKit-based templates that I have personally crafted to help you start new projects faster. These templates are flexible and can be tailored to suit your needs, but they’re built with simplicity in mind.

Check them out on GitHub:

• VanillaKit Static Template
• VanillaKit Express Template