DEV Community

Brayden W ⚡️
Brayden W ⚡️

Posted on

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.

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.👍