Tutorial: Overview: flitter-crud

Overview: flitter-crud

flitter-crud is a package that provides a CRUD API generator for Flitter. It creates a model, validator, controller, and route-definitions file with pre-exposed endpoints for GET /read, POST /create, POST /update, and POST /delete for CRUD-based access of the model. flitter-crud also exposes the generated files in such a way that they are still customizable and extendable so they can be customized to fit your application.

Installation

flitter-crud does not ship with Flitter by default, so it needs to be installed manually. This can be done like so:

Install flitter-crud via Yarn:

$ yarn install flitter-crud

Add the flitter-crud unit to Units.flitter.js in the Custom Units section:

/* Custom Flitter Units  
 * -------------------------------------------------------------
 * blah blah blah
 */
 'Crud'         : new (require('flitter-crud/CrudUnit'))(),

How To Use

To create a new CRUD-accessible model, use ./flitter:

$ ./flitter new crud Article

This will create the following files:

  • app/models/crud/Article.model.js
  • app/validators/crud/Article.validator.js
  • app/routing/routers/crud/Article.routes.js
  • app/controllers/crud/Article.controller.js

Customize the database model:

Now, we will define the fields our CRUD model will have. For example:

// app/models/crud/Article.model.js
const Article = {
    title: String,
    author: String,
    body: String,
}
module.exports = exports = Article

Customize the validator definition:

flitter-crud uses flitter-forms to validate data from POST /create & POST /update requests. So, we need to customize the validator definition schema to describe our model's fields:

// app/validators/crud/Article.validator.js
const Article = {
    title    : ['required', 'isLength:{"max":40}'],
    author    : ['required', 'isEmail:{"require_display_name":true}'],
    body    : ['required'],
}
module.exports = exports = Article

Use!

That's it! Now, we can interact with the model using the routes /crud/Article/{create/read/update/delete}. You can add custom routes, adjust the prefix, and add middleware to the definitions file at app/crud/Article.routes.js and you can add custom methods to the controller at app/controllers/crud/Article.controller.js. Here are some example request/response pairs:

Create

Request:

POST /crud/Article/create
content-type: multipart/formdata
body: 
    title: "How to use flitter-crud!"
    author: "Garrett Mills <garrett@glmdev.tech>"
    body: "This is some sample body text. It means nothing. This is some sample body text. It means nothing. This is some sample body text. It means nothing. This is some sample body text. It means nothing. This is some sample body text. It means nothing."

Response data:

{
  "status": 200,
  "message": "OK",
  "data": {
    "_id": "5cbe5e19a427622d9f1384d3",
    "title": "How to use flitter-crud!",
    "author": "Garrett Mills <garrett@glmdev.tech>",
    "body": "This is some sample body text. It means nothing. This is some sample body text. It means nothing. This is some sample body text. It means nothing. This is some sample body text. It means nothing. This is some sample body text. It means nothing. ",
    "__v": 0
  }
}
Read

Request:

GET /crud/Article/read/5cbe5e19a427622d9f1384d3

Response:

{
  "status": 200,
  "message": "OK",
  "data": {
    "_id": "5cbe5e19a427622d9f1384d3",
    "title": "How to use flitter-crud!",
    "author": "Garrett Mills <garrett@glmdev.tech>",
    "body": "This is some sample body text. It means nothing. This is some sample body text. It means nothing. This is some sample body text. It means nothing. This is some sample body text. It means nothing. This is some sample body text. It means nothing. ",
    "__v": 0
  }
}
Update Error

Request:

POST /crud/Article/update/5cbe5e19a427622d9f1384d3
content-type: multipart/formdata
body: 
    title: "How to use flitter-crud: It's really pretty great. It makes object-based AJAX rather simple."

Response:

{
  "status": 400,
  "message": "Bad Request",
  "data": {
    "title": [
      "title must be length  less than 40."
    ],
    "author": [],
    "body": []
  }
}
Update Success

Request:

POST /crud/Article/update/5cbe5e19a427622d9f1384d3
content-type: multipart/formdata
body: 
    author: "Flitter Admin <flitter@glmdev.tech>"

Response:

{
  "status": 200,
  "message": "OK",
  "data": {}
}
Delete

Request:

POST /crud/Article/delete/5cbe5e19a427622d9f1384d3

Response:

{
  "status": 200,
  "message": "OK",
  "data": {}
}