DEV Community

Brayden W ⚑️
Brayden W ⚑️

Posted on

9 5

I made a simple CLI that generates a vanilla HTML project. What do you think?

Hey Dev community! πŸ‘‹

Today I've been working hard on publishing a new NPM package.

Check it out! πŸ‘‰ https://github.com/BraydenTW/create-html-boilerplate


Create HTML Boilerplate generates a vanilla HTML/CSS boilerplate for you in a flash! ⚑

Baby GIF

To start a project, simply type in the following command into your terminal:

npx create-html-boilerplate myapp
Enter fullscreen mode Exit fullscreen mode

Tada! ✨

Now you can code away!


But, why?

You might be asking, why would I want a boilerplate generator for a plain, vanilla project?

Well, as I started web development as a beginner a few years ago, making the folder structure and file imports were always time consuming for me. I already knew how to do it, why waste my time setting it up?

My brother has had this same issue and that's when the idea popped into my head. πŸŽ‰


I'm open to any feedback you have for my project. I'm planning on adding more config options, imports, and templates too. πŸ˜‰

If you find this tool useful, I would appreciate a ⭐ on this repo.

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (17)

Collapse
 
tomavelev profile image
Toma β€’

Include pwa setup code/features ( dev.to/tomavelev/convert-any-site-... ), options for image/icon , replace the static page title with the provided cl parameter...

Collapse
 
braydentw profile image
Brayden W ⚑️ β€’

Lots of great ideas! Love it!

Thanks for your feedback. I'll work on implementing the changes I get in the coming weeks.

Also, was the process for creating a simple boilerplate efficient? Would there be anything you would change?

Collapse
 
adithyarafk profile image
AdithyaR-afk β€’

Or maybe use something like svelte-sapper or react-next.js? Everything is set up from the get go!!!

Collapse
 
braydentw profile image
Brayden W ⚑️ β€’

True, but I am trying to make it vanilla. No frameworks included to keep it as simple as possible.

But I could definitely try much more customized ones soon. Thanks for the ideas!

Collapse
 
adithyarafk profile image
AdithyaR-afk β€’

With svelte eventually it does become pure JavascriptπŸ˜‰

Thread Thread
 
braydentw profile image
Brayden W ⚑️ β€’

gotcha gif

Haha true...

Collapse
 
braydentw profile image
Brayden W ⚑️ β€’

Hey Mike! πŸ‘‹

Thanks :D

Collapse
 
abel4545 profile image
Abel4545 β€’

hi

Collapse
 
braydentw profile image
Brayden W ⚑️ β€’

Hey @abel4545 , what do you think of Create HTML Boilerplate?

Collapse
 
maxprogramming profile image
Max Programming β€’ β€’ Edited

I am just thinking to use it of. Is there something to generate a vanilla HTML project but with TypeScript?

It's very powerful and simple! Liked it!

Collapse
 
braydentw profile image
Brayden W ⚑️ β€’

Yes, I think that would be possible. That's why I'm working on adding more features and config options.

Thanks for your feedback!

Collapse
 
tomassirio profile image
Tomas Sirio β€’

I'd definitely suggest the use of a .gitignore file on that repository. Other than that, I love the idea. Great Job!

Collapse
 
braydentw profile image
Brayden W ⚑️ β€’

Thanks! If find this useful in the future, sharing it with a friend or giving the repo a star is much appreciated.

Collapse
 
brendinv profile image
Brendin Venter β€’

This is great thank you buddy.

Collapse
 
goody85 profile image
Steven Goodram β€’

Hey, what about an import of an images folder that would resize all images to selective sizes for ready use

Collapse
 
braydentw profile image
Brayden W ⚑️ β€’ β€’ Edited

Nice idea! How would this be implemented into the CLI?

Would one of the parameters be a path to the image folder they want converted into different sizes?

Collapse
 
goody85 profile image
Steven Goodram β€’

Yeah, pass parameter of image folder, and use eg imagemagick cli convert command (google.com/url?sa=t&source=web&rct...)

I think would take a good load off , if say you had lots of high res images that needed to be reized and compressed , or even multiple sets in folders so that you could generate srcset attribs later.

This command could be seperate from the main build app, as i think could be useful during design stage also.πŸ‘

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay