@grafe/grafe-cli v1.0.2

Table of Contents

• Installation
• Getting started - start a new project - generate your first route - generate your first middleware
• Commands
  - grafe start - Syntax - Details - Examples - grafe generate - Syntax - Details - Examples - grafe generate route - Syntax - Details - Examples - grafe generate middleware - Syntax - Details - Examples - grafe generate static - Syntax - Details - Examples - grafe serve - Syntax - Details - Examples
• Packages
• License

Installation

Either through cloning with git or by using npm (recommended way):

npm install -g @grafe/grafe-cli

Getting started

This is a simple tutorial of how to use grafe. It will teach you how to start a new Project, how you can add new components and many other things.

Start your Project

Welcome to grafe!

If you have already installed the package @grafe/grafe-cli, we will start by creating a new Grafe project. For this we use the grafe start command with the integrated options, which you can have a look at in the documentation under syntax.

grafe start HelloWorld -t express --yes

As template we use express and as project name we take 'HelloWorld'. To check if everything worked correctly, we run the project with the grafe serve command. By the way, this command detects if you have made a change, then re-compiles the project and restarts it.

grafe serve

If you have not changed the port, your back-end is now running on port 3000 with a default route GET localhost:300/index/ which does nothing.

Generate your first route

Let us now create our first route, which should greet us with a Hello World. For this we use the grafe generate route command with its integrated options, which you can read again in the documentation under syntax.

grafe generate route -r /helloworld/greet -m get -w --yes

Now we have a new file under src/routes/helloworld/. The contents of this file look like this:

import { Request, Response } from  'express';

export  =  async (req:  Request, res:  Response) => {

};

To see a result we now write a response into the function:

res.send({ message: 'hello world'});

We can test it with our browser, since it is a GET method, or with Postman. If you want to test the route with your browser, go to the url http://localhost:3000/helloworld/greet/.

Generate your first middleware

The next step is to take a closer look at middleware. This allows another function to be called before the route function is called. We create one with the grafe generate middleware command with its integrated options, which can be found in the documentation under syntax.

grafe generate middleware -n grafe-greets -s grf -d "This middleware will greet grafe" --yes

This creates a new file for us under src/middlewares/grf/grafe-greets.ts with the following content:

import { NextFunction, Request, Response } from  'express';

export  = (req:  Request, res:  Response, next:  NextFunction) => {

	next();
}

To see that this middleware is called we first write a simple console.log which should output a message to the console:

console.log('Grafe greets!');

We write this above the next() method. Now we generate a new route with our new middleware preceding:

grafe generate route -r /helloworld/grafe -m get -w grf --yes

In this route we write the same response as in generate your first route. If we now call this route via our browser (http://localhost:3000/helloword/grafe/), we see our 'hello world' in the browser and a 'Grafe greets!' in our console.

Commands

grafe start

Creates a new grafe project.

Syntax

grafe start [projectName]

Details

grafe start will start the prompts to create a new grafe project. | Option| Alias| Description| | :--- | :--- | :--- | | --help | - / - | Shows a list of all available options | | --template | -t | Sets the template of the project | | --testing | - / - | Enables testing for the grafe project| | projectName | - / - | Sets the project name | | --yes | - / - | confirms the creation of the new project

Examples

grafe start project_1
grafe start project_2 -t express
grafe start project_3 --testing

grafe generate

Creates a new grafe component.

Syntax

grafe generate

Details

grafe generate will start the prompts of which component should be generated. | Option| Alias| Description| | :--- | :--- | :--- | | --help | - / - | Shows a list of all available options | | route | - / - | Will generate a new route | | middleware | - / - | Will generate a new middleware | | static | - / - | Will generate a new static-directory |

Examples

grafe generate
grafe generate --help
grafe generate route

grafe generate route

Automatically creates a new grafe-route-component,

Syntaxt

grafe generate route

Details

grafe generate route will start the prompts of the route properties and automatically generate a new route component. | Option| Alias| Description| | :--- | :--- | :--- | | --help | - / - | Shows a list of all available options | | --routePath | -r | Sets the path of the new route | | --method | -m | Sets the method of the new route. get | post | put | delete | | --middlewares |-w | Sets the preceding middlewares of the route | | --yes | - / - | confirms the generation of the new component

Examples

grafe generate route 
grafe generate route --help
grafe generate route -r /auth/login -m post 
grafe generate route -r /auth/is-authenticated -m get -w pt --yes

grafe generate middleware

Automatically creates a new grafe-middleware-component

Syntaxt

grafe generate middleware

Details

grafe generate middleware will start the prompts of the middleware properties and automatically generate a new middleware component. | Option| Alias| Description| | :--- | :--- | :--- | | --help | - / - | Shows a list of all available options | | --name | -n | Sets the name of the middleware | | --short | -s | Sets the shortcut of the middleware | | --description |-d | Sets the description of the middleware | | --yes | - / - | confirms the generation of the new component

Examples

grafe generate middleware
grafe generate middleware --help
grafe generate middleware -n protected -s pt 
grafe generate middleware -n admin-only -s adm -d "Only for Admins" --yes

grafe generate static

Creates a new folder which can be used for static files.

Syntaxt

grafe generate static

Details

grafe generate static will start the prompts of the static properties and automatically create a new static directory. | Option| Alias| Description| | :--- | :--- | :--- | | --help | - / - | Shows a list of all available options | | --name | -n | Sets the name of new folder | | --prefix | -p | Sets the prefix with which you access the folder | | --yes | - / - | confirms the generation of the new component

Examples

grafe generate static
grafe generate static --help
grafe generate static -n images 
grafe generate static -n pictures -p public/pictures --yes

grafe serve

Starts the project and watches for file changes.

Syntax

grafe serve

Details

grafe serve will start the project, watches for file changes, re-compiles and restarts it. | Option| Alias| Description| | :--- | :--- | :--- | | --help | - / - | Shows a list of all available options |

Examples

grafe serve

Packages

Project	Package	Version
Garfe CLI	@garfe/grafe-cli
Grade Core	@garfe/grafe-core

License

MIT