DEV Community 👩‍💻👨‍💻

Cover image for Introducing BTGen, your new best friend
Otoniel Reyes
Otoniel Reyes

Posted on

Introducing BTGen, your new best friend

Stage 1: The problem

I'm sure you are spending a lot of time setting up your projects, right?

Just, think about it...
You just go to your projects folder, create a new one (the project root folder) within, open the project folder, create the .html, .css, .js, and this is just in the simplest cases.

And the next thing to do is open each file and add all the code you'll need.

Now, in a little project, this takes just a few minutes (2~5), but, what about those projects with dependencies, libraries, a framework, and that kind of stuff?

Stage 2: A simple idea

What if we take the express-generator concept and get it higher, just one tool, for all (ok, maybe just some) web development environments and projects?

Stage 3: A simple solution: BTGen

BTGen is a "BoilerplaTe Generator", (I know, it's an incredibly creative name) for web development.

Imagine this:
You're going to start a new AngularJS project, and need an structure like this:

myApp/
  css/
    vendor/
      bootstrap.min.css
    master.css
  js/
    vendor/
      angular.min.js
      bootstrap.min.js
      jquery-3.5.1.slim.min.js
      popper.min.js
    app.js
    MainController.js
  index.html
Enter fullscreen mode Exit fullscreen mode

So, you have three options:

  1. Manual
    • Download bootstrap, popper, jquery, and angular (2~3 mins)
    • Create each file/folder manually (1~3 mins)
    • Start coding
  2. CDN
    • Create folders/files manually (1~3 mins)
    • Search and copy/paste each CDN link (1~2 mins)
    • Start coding
  3. BTGen
    • $ btgen angular myApp --bt (0~1 min)
    • Start coding

Stage 4: The difference

You already know all about starting the project manually... Let's talk about BTGen.

BTGen will create/download all files you'll need to start coding, even package.json if it is needed, in some cases with sample code, scripts and recommendations, all in just a few seconds!

All boilerplates are customizable (at least a little bit) and, right now, you have just 8 boilerplates to choose from, but, with your help, we can have many more templates available soon.

Stage 5: The clousure

It deserve a try, is very light-weight and have not dependencies, and all you need to do in order to get starter is type this in your terminal:

$ npm i -g btgen
Enter fullscreen mode Exit fullscreen mode

And here is the official documentation.

Please, let me know what do you think about my tool and how can I improve it.

Thank you!

Top comments (2)

Collapse
 
yellow1912 profile image
yellow1912

I don't know. I think I spend most of my time figuring how to do things correctly, the real development (writing code) is not even that high. For me setting up boiler plate code etc doesn't take that much time. Anyhow, nice to know we can do this and thank you for sharing.

Collapse
 
kenliten profile image
Otoniel Reyes Author

I agree 100%.
That's the real challenge, so, I thought, stop spending time setting up and take more time to put your soul and energy (too poetic) in your code.

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await