A happy Announcement: I have recently finished the 1st version of a fullstack boilerplate for creating webapp based on koa, mongodb, node, vue, and webpack.

4 Reasons of reinventing the wheels:

As many of you may know, there are a lot of generators can be used to help programmers quickly scaffold a web app today. For example, in order to stay productive and only consider about the logic of a web project, I sometimes use generators from Yeoman. However, as the application grows, I start noticing the drawbacks of using other people’s stack:

  • You are locked to use the technology that are chosen from other people. And if they don’t update the version of related tech, your project’s ecosystem will be totally obsolete.
  • The configuration file is like a black box. And usually there are tons of configuration files out there. If you don’t catch the magic inside the configuration files, it will absolutely limit your skill to develop!
  • The node_modules folder can be huge, and you have no idea what other dependencies are inside the folder. It’s too scary to delete any package in your package.json file because you might break the whole environment.
  • You may have no idea how to add security or error handling, how to deal with HTTP interceptor and etc. in your project.

Those 4 drawbacks are the reasons why I start implementing my own fullstack boilerplate.

Tech

This project uses the latest (by the time of writing this blog) web technologies.

  • Server: Koa family (koa, koa-router, bodyparser), Mongoose, NPM as task runner, Nodemon.
  • Client: Vue family (vue, vue-router, vuex), Axios (HTTP Client library), iView, webpack, webpackdevserver, babel

The separation of server and client principle has been adopted in this boilerplate. Client side dev uses hot module reloading, dynamic importing, and those buzz tech. Also, a basic user authentication system is provided.

Minimalism

I am a minimalist in programming. I tend to make things smaller if I can. This project I am working on is quiet lightweight.

  • 10 dependencies on server side, and around 20 dependencies(include devdependencies) on client side.
  • Server node_modules folder size: 24MB, Client node_modules folder size: 90MB

Benefits

  • As this boilerplate is small but structured, it’s relatively clear for a programmer/beginner to understand how to build a website from scratch.
  • The configuration file is concise and all the client side configurations are in one webpack.config.file, so it’s effortless to understand/add more configurations.
  • All the tech is flexible and replaceable. For example, you can use other front-end framework, and simply replace the <template> in vue file.
  • Easy to add your own contents/api/database collections!