DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for An MVC Generator for Your Next Express JS Project
Kenas Zogara
Kenas Zogara

Posted on

An MVC Generator for Your Next Express JS Project

I'm tired of writing boilerplate codes for an MVC design pattern in my Express project. So I decided to create a generator for it. πŸš€πŸš€

The package for this tool, I named it VYNL, it is published in npm and you can start using it in your project.

$ npm install vynl
Enter fullscreen mode Exit fullscreen mode

Create an empty express project, then type in

$ npx vynl init
Enter fullscreen mode Exit fullscreen mode

What it does for you, is simple, it makes out your project directory like so:

.
|--auth
|    └──auth.js
|--config
|    └──config.json
|--docs
|    |--paths
|    |    |--index.js
|    |    └──users.js
|    └──schemas
|         |--index.js
|         └──users.js
|--migrations
|--models
|--routes
|--app.js
└──swagger.js
Enter fullscreen mode Exit fullscreen mode

It also creates these things out of the box for you:

  1. A Users MVC (with Sequelize Model)
  2. Basic authentication using jsonwebtoken
  3. Swagger Documentation for the API routes.

Next, Adjust your project database configuration in config/config.json

Since the generator will only write codes for you, You are still required to install the packages needed to run the project yourself.

$ npm install sequelize jsonwebtoken swagger-ui-express mysql2 
Enter fullscreen mode Exit fullscreen mode

if you are using other database than mysql, check here

Then to generate a new MVC simply use:

$ npx vynl generate:api -m <model_name> -f <model_fields>
Enter fullscreen mode Exit fullscreen mode

model_fields syntax: : and comma separated for the next field. Ex. name:string,birth_date:string,email:string,password:string

It also allows you to only generate a part of the MVC (ex. only the Model).

  • Generate Model
$ npx vynl generate:model -m <model_name> -f <model_fields>
Enter fullscreen mode Exit fullscreen mode
  • Generate Controller
$ npx vynl generate:controller -m <model_name>
Enter fullscreen mode Exit fullscreen mode
  • Generate Route
$ npx vynl generate:route -r <route_name>
Enter fullscreen mode Exit fullscreen mode
  • Generate Swagger Doc
$ npx vynl generate:swagger -m <model_name> -f <model_fields>
Enter fullscreen mode Exit fullscreen mode

And that's it. I hope this tool can help you in your next Express project.

Cheers 🍷

Top comments (2)

Collapse
 
manjit2003 profile image
Manjit Pardeshi

Checkout tsed.io/

Collapse
 
kenaszogara profile image
Kenas Zogara Author

This is lit πŸ”₯πŸ”₯. Thank you for sharing 😁

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!