In the front-end world, bootstrapping a project has gone through a lot of iterations. From cloning boilerplates from github, via Yeoman, to create-react-app, vue create, till the beautiful
vue ui, we've always been improving. Lately I have been working on a lot of small projects, mostly Vue based but
Don't get me wrong, vue create and vue ui are amazing tools. But lately I've had to bootstrap a lot of small projects and I find myself :
- deleting the
HelloWorld.vuefile all the time,
- remove the
- then clearing it from the
router.jsfile, and then
- removing all the files related to
eslintbecause it can't stop arguing with prettier in the terminal and I haven't figured out how to make them both shut up.
- Then I usually add tailwind css via
vue uibecause I can't remember which one of the tailwind css plugins to installs as there are 3 or 4 of them. It's the one with 1.6k stars.
- Add a Header and Footer component
- Add some flexbox and container classes to make everything well centered on the screen.
- Phew, that's a lot and I haven't even started with writing anything that's relevant to the actual project.
The more I grow as a developer the more I value tools that aim for simplicity during usage.
npx degit <username>/<repo>
You don't even have to install the tool thanks to npx. Of course you must run the unescapable
npm install yourself, but since there are no manual configurations I can wait another 15 seconds by checking Twitter.
Create your own boilerplate
I set out to create a simple boilerplate for myself, and aptly named it vue-tailwind-boilerplate, and it literally takes me 20 seconds to get started as all the steps mentioned in "The Drill" are already done in the boilerplate!
Boilerplate : https://github.com/MrSunshyne/vue-tailwind-boilerplate
This is the result:
UPDATE(5 April 2020) : Private repos
I was fiddling around with a private repository so that I can use it as a degit template but the cli was asking for my Github username and pass. So after digging into the degit issues on it's repo, I found this answer by Rich himself.
--mode=git and use the git url and you're good to go.
npx degit [email protected]:MrSunshyne/vue-tailwind-boilerplate.git --mode=git
Let me know if you have use cases for this tool. If you enjoyed this article or learned something new, send it to someone who might be interested.