Web Dev Snippets

A fast, lightweight CLI tool by Abdul Irfan that instantly generates essential boilerplate code and useful snippets to streamline your web development workflow.

Table of Contents

• Web Dev Snippets
  • Table of Contents
  • Features
  • Installation
    • Global Installation
    • Local Installation
  • Usage
    • Commands
    • Using npx
  • Uninstallation
    • Global Uninstall
    • Local Uninstall
  • Contributing
  • License
  • Author
  • Additional Resources

Features

• Instant Boilerplate Code: Quickly generate code snippets for HTML, React, React Native, and more.
• Simple CLI Interface: Use one-line commands to access your favorite code templates.
• Extendable & Customizable: Easily contribute additional snippets or modify existing ones.
• Boosts Productivity: Save time by getting code snippets on demand during your development process.

Installation

🌟Install the latest updated verison only

Global Installation

To install the package globally so you can run the CLI command anywhere:

npm install -g web-dev-snippets

Local Installation

To install within a single project:

npm install web-dev-snippets

After local installation run this below command :

npx <command>

For Example :

npx boiler html

In this case, you can either:

1. Run it with npx: npx web-dev-snippets html
2. Or reference it from your project scripts in package.json.

Usage

Once installed (globally or locally), you can use the CLI command boiler to generate snippets.

Commands

| Command | Description | |---------------------------|-------------------------------------------------------------| | boiler html | Outputs a basic HTML boilerplate. | | boiler react | Outputs a simple React component snippet. | | boiler reactnative | Outputs a basic React Native component snippet. | | boiler react-class-comp | A basic class-based component for React. | | boiler express | A minimal Express server to get started with Node.js. | | boiler css | A snippet to remove default browser styling. | | boiler tailwindcss | A starter HTML file that includes Tailwind CSS via CDN. | | boiler vue | A basic Vue SFC with template, script, and scoped style. | | boiler angular | A minimal Angular component. | | boiler svelte | A simple Svelte component example. | | boiler nextjs | A basic Next.js functional page component. | | boiler graphql | A simple GraphQL server using Express and express-graphql. | | boiler mongodb | A snippet for connecting to MongoDB using Mongoose. | | boiler javascript | A simple JavaScript function template. | | boiler typescript | A basic example of a class written in TypeScript. | | boiler bootstrap | A starter template using Bootstrap 4 via CDN. | | boiler jquery | A simple HTML page demonstrating basic jQuery usage. |

Example:

boiler html

This prints a boilerplate HTML file to your console.

Using npx

If you don’t want to install the package globally, you can run it directly from npm:

npx web-dev-snippets html

This command fetches the package from the npm registry and runs it instantly.

Uninstallation

Global Uninstall

npm uninstall -g web-dev-snippets

Removes the globally installed package and the boiler command from your system.

Local Uninstall

npm uninstall web-dev-snippets

Removes the package from your project’s node_modules folder.

Contributing

Contributions are welcome! If you’d like to add more snippets or improve the tool, please follow these steps:

1. Fork the Repository: Click on the "Fork" button on GitHub to create your own copy.
2. Create a New Branch:

   git checkout -b feature/YourFeature

3. Commit Your Changes:

   git commit -m "Add some feature"

4. Push to the Branch:

   git push origin feature/YourFeature

5. Open a Pull Request: Go to your fork on GitHub and open a pull request to merge your changes.

License

This project is licensed under the ISC License.

Author

Abdul Irfan
GitHub Profile

Additional Resources

• npm Package Page
• Project Repository