DEV Community

loading...

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

braydentw profile image Brayden W ⚡️ ・1 min read

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.

Discussion (17)

pic
Editor guide
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 ⚡️ Author

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 ⚡️ Author

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
Collapse
michaelandreuzza profile image
michael-andreuzza

Go Bry, Go bry!

Good work man.

Collapse
braydentw profile image
Brayden W ⚡️ Author

Hey Mike! 👋

Thanks :D

Collapse
abel4545 profile image
Collapse
braydentw profile image
Brayden W ⚡️ Author

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 ⚡️ Author

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
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 ⚡️ Author • 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.👍

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 ⚡️ Author

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