Fibre-framework NPM

Fibre Framework

Welcome to Fibre Framework (v1.2.5), a super fast web framework written in JavaScript with NodeJS.

Install and Setup

Step 1 - Get NodeJS and NPM

You will need NodeJS and NPM installed to use Fibre Framework.

NodeJS version 8+ Visit NodeJS
NPM Visit NPM's website

Step 2 - Create a directory and install Fibre Framework

Navigate to a directory of your choice and run the following NPM command to install Fibre Framework, if you are on Linux/Ubuntu the /etc/fibre/ is a good place to install.

When you have created the directory, run the following NPM command.

npm i fibre-framework

* sudo may be required if you are on unix.

Step 3 - Create a project

Navigate to the directory where you have installed Fibre Framework, inside that folder should be 2 more folders callled "node_modules" and then "fibre-framework", navigate to "node_modules/fibre-framework" and run the following command.

sudo node fibre.js create-project=/var/web/myproject/

The above command will create a folder and the base controllers, views and assets inside.

Step 4 - Create a site configuration file

Navigate to the fibre-framework folder, same as step 3, the run the following command.

sudo node fibre.js create-server-config

This command will create a file "fibre-config.json" in the "fibre-framework" directory to hold your website settings, and can also define a multiple website setup.

Start the Server

Open a command line console and cd into the directory where you installed Fibre Framework.
Run the following command to start the server and start serving clients.

sudo node server.js start

Windows Users You do not need the sudo command before "node" or "nodejs".

Setting the server port

You can set the server port within the "fibre-config.json" file.

Overview

The Fibre Framework uses the MVC model, each request that comes into the server is processed and matched against a route, if the route is present then the corresponding controller is called via the Render method of the controllers class.

Routing

Routing is simple as a JSON file in Fibre, every application must have a "routes.json" file in order to serve clients content.

[
    {
        "name": "home",
        "path": "/",
        "controller": "HomeController"
    },
    {
        "name": "category",
        "path": "/blog/:category/",
        "controller": "CategoryController"
    }
]

The first route is a simple route, each route has a name property, path and controller properties. The "name" can be whatever you wish, the "path" is the URL you want the controller to be executed on, and the "controller" is the "Controller" that is used for the route to provide the data to the view.

Routing Redirects

You can add redirects by placing them inside the "routes.json" file, see an example below where the page "/about-us" is redirected to "/".

[
    {
        "name": "home",
        "path": "/",
        "controller": "HomeController"
    },
    {
        "name": "about us redirect",
        "path": "/about-us",
        "redirect_to": "/",
        "redirect_code": 301
    }
]

Placeholders (Dynamic Routing)

The second route is more advanced, you will notice it has a ":category" string within the route path, the colon is used to declare a dynamic placeholder for a route and will be accessible via the controller when requested.

For example, the following route "/blog/:category/" will be executed when a user vists the url "/blog/hello-world/", you will be able to use the variable "category" within your controller and view, in this example the variable "category" will contain the value of "hello-world".

Controllers

A controller is a JavaScript class that contains your methods, there are 2 methods in the example classes, init and Render, without the Render method no view will be returned. See the HomeController class example below.

"use strict";
const BaseController = require('./BaseController');
module.exports = class HomeController extends BaseController {

    /**
     * Your controller starts with the init method.
     */
    init(){

        // Your code lives here...

    }

    /**
     * Render
     * Renders a view to the client.
     */
    Render(){
        return new this.View('index', {
            version: '1.0'
        });
    }
}

The init method is where your server side code lives and where the processing happens for the route attached to this controller, once the init method is called and executed the Render method is called, you can learn more about Views further on. All controllers go inside the controllers folder.

In this example the Render method returns the view index with a JavaScript object that can be used within the view.

Note: You must extend your Controller class from the BaseController, if you do not then the View, Response and data_layer will not be available.

Views

A view is where your HTML code lives, all views go inside the views folder, when you install Fibre Framework you will notice there are some views already, you will have an "index.html" view and a "error_pages" directory, we have created a "404" and "500" error pages for reference.

A view is called via the filename excluding the file extension ".html", if a view lives inside a sub-directory the path seperator is a "." dot character, if we wanted to return the "404" view we would call "error_pages.404" or for the "index.html" we would call "index".

Responses

If you need to send a raw response or anything that is not a "View" then you can by using "Responses", similiar to a view, you can pass data to the constructor and optionally followed by a http response code and/or response headers.

Take a look at this example that returns JSON data by using the "Response" class.

Route

This is our route, when a user vists the URL "/static/json" they will be presented with the data returned from our controller.

{
    "name": "json",
    "path": "/static/json",
    "controller": "StaticController"
}

Controller

First of all we include the Response class and create our class shell. Inside the class "init" method we simply create a data layer and a json object.

Our "Render" function would usually return a "View" but instead we are going to be returning a "Response", the "Response" class takes 3 parameters, the last 2 are optional:

Data ( string )
HTTP Response Code ( integer )
Headers ( Object )

"use strict";
const BaseController = require('./BaseController');

module.exports = class StaticController extends BaseController {

    /**
     * Your controller starts with the init method.
     */
    init(){

        // Your code lives here...
        this.data_layer.json = [
            {
                first_name: "Ben"
            }
        ];

    }

    /**
     * Render
     * Renders a view to the client.
     */
    Render(){

        // Return a JSON string
        return new this.Response(JSON.stringify(this.data_layer.json), 200,
            {
                "Content-Type": "application/json"
            }
        );
    }
}

Assets

All of your public accessible files such as CSS and Javascript should go in the assets folder, please note that only the following file types are supported:

.js
.css
.json
.xml
.jpg
.png
.gif

More file types will be added in the patch versions.

Fibre Templates

Fibre templates are HTML files that support a syntax so you can use variables from your controller inside the view, the templates have much more to come yet and only support basic variables.