Getting Started with Grandjs
Tags: node, javascript, backend, webdev
Published: 2019-12-20 13:41:01

---
title: Getting Started with Grandjs
published: true
description: Grandjs Updates and new features
tags: nodejs, javascript, backend, web development
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xcn9zht6bcccv3hsglzu.png
---


Hi,
I came back again :D

I have introduced grandjs three weeks ago, you can find the introduction to grandjs [here](https://dev.to/tareksalem/grandjs-a-promising-nodejs-framework-5o0)

Today is the getting started tutorial to jump in Grandjs and start working with this amazing node js framework.
## What do you need before starting with grandjs ?
You need to know the following:
- Javascript basics
- Nodejs fundamentals
- Javascript OOP and ES6 classes

## Grandjs Getting Started
### Install Grandjs
to install grandjs you don't need anything just you need to be installed nodejs on your machine so you can install grandjs from NPM by writing the following command:
```curl
npm i --save grandjs
```

Yes, you now got grandjs installed.
Now it's time to understand how does grandjs works

###What are the packages installed with grandjs ?

Grandjs installed with some packages to facilitate the process.
one of these packages is handlebars template engine for server-side rendering HTML and data binding.
the second package that Grand js uses is a multiparty library for file uploading and request body parsing.

### Setup Grandjs configuration

After installing Grandjs, you need to set up its configuration to start the app, the configuration of it is pretty simple and easy, you just need to call ``setConfig`` function as the following:

```javascript
const Grandjs = require("grandjs");
Grandjs.setConfig({})
```

this function takes one parameter as an object, this parameter has som  props, one of them is mandatory which is the port of the app that will run on, and also the ``ENCRYPTION_KEY`` to use in hashing and encrypting methods
```javascript
Grandjs.setConfig({
    //define the port
    port: process.env.PORT || 3000,
    // http is optional you can specify http or https, if you don't specify Grandjs automatically require HTTP module
    // http: http,
    // if you specified https so you should ssl files in this object
    // httpsMode: {
    //     key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'),
    //     cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem')
    // },
    // define the static files container folder
    staticFolder: "public",
    //enable the session
    session: true,
    //set the encryption key, Grandjs uses encription key to cypher info
    ENCRYPTION_KEY: "ncryptiontestforencryptionproces",
    // set the max age of cookies when you set the session of logged in users
    setCookie: {
        expires: {
            days: 20,
            minutes: 30
        }
    },

    //set it true to see the console info while development process
    logger: true,

    //set error page for global error pages
    errorPage(req, res) {
        res.end("error page");
    }
});
```
Now we sat the grand js configuration, so what we need is just calling another function to start the server, this function called ``initServer``
as the following:
```javascript
Grandjs.initServer();
```
Now Grand js started the server and also consumes the configuration we sat, but we still don't have any routes!

### Routing System in Grand js
Grand js has a built-in router class that is used to build your routes based on Javascript ES6 classes, so Grandjs helps you to organize your routes and put every group of routes together with global and private middlewares 

### Write Router class in Grand js
Grand js has built-in router class you can extend it to build your own router, to do that you need to create a folder called routes or any name you want and create a file called `router.js` as the following:
```javascript
const Grand = require("grandjs");


// define router class
class MainRoutes extends Grand.Router{
    constructor(options) {
        super(options);
    }
}

```
if you can see, I am extending the router class and call the super function into the constructor to inherit from the router class, and pass options as a parameter of the constructor, this options is an object has a property called `base` this property indicates the url of this class
```javascript
const mainRoutes = new MainRoutes({base: "/"});
``` 

each router class has 4 main arrays you can define to start add routes to this class, these arrays imply the following:
- getRouters (to put routes with Get method in it)
- postRouters (to put routes with POST method in it)
- patchRouters (to put routes with PATCH method in it)
- putRouters (to add routes with PUT method in it)
- deleteRouters (to add routes with DELETE method in it)

```javascript
class MainRoutes extends Grand.Router{
    constructor(options) {
        super(options);
        this.getRouters = [];
        this.postRouters = [];
        this.putRouters = [];
        this.patchRouters = [];
        this.deleteRouters = [];
    }
}

```

We here extended the router but we still not specifying any route, so we will add a method to the class as a router, like the following:

```javascript
class MainRoutes extends Grand.Router{
    constructor(options) {
        super(options);
        this.getRouters = [this.getHome()];
        this.postRouters = [];
        this.putRouters = [];
        this.patchRouters = [];
        this.deleteRouters = [];
    }
    getHome() {
        return {
            url: "/",
            method: "GET",
            handler: (req, res) => {
                res.render({
                    container: "views",
                    layout: "/layouts/layout.hbs",
                    body: "/pages/home.hbs"
                })
            }
        }
    }
}
```
This router class can have many methods, some of these methods can be routes so to the method as a route you need to return an object from this method has the following methods:
```javascript
{
      url: "/", //the url 
      method: "GET", // the method of the request
      handler: (req, res) => { // the handler function of this request
          res.render({
             container: "views",
             layout: "/layouts/layout.hbs",
             body: "/pages/home.hbs"
          })
      }
}
```
and then add this method inside the proper routers array of the router class, so if this method implies a request with GET method so you should add this method in `getRouters` array as the following:

```javascript
this.getRouters = [this.getHome()];
```

each router class you extend you can customize it as you want, you also can set an error router to it to be called once the required url is not registered, in the next tutorial we will learn how to add middlewares to the routes in Grand js.
Don't hesitate to ask any question, also please give me your opinion in the comments about this framework, see you next time,
thank you.