DEV Community

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 ๐Ÿท

Latest comments (2)

Collapse
 
manjit2003 profile image
Manjit Pardeshi

Checkout tsed.io/

Collapse
 
kenaszogara profile image
Kenas Zogara

This is lit ๐Ÿ”ฅ๐Ÿ”ฅ. Thank you for sharing ๐Ÿ˜