Intro­duction

Feathers.js is a REST and realtime API layer for modern appli­ca­tions. It allows you to create in record time an API. In this presen­tation I will show you with practical example how fast you can develop a simple functional boiler­plate for a modern appli­cation. There is not deep explanation about Feathers. For that you can visit the documen­tation . This presen­tation will just allow you to build a functional appli­cation in just 15 minutes. For this tutorial you will need have installed globally two node modules:

Feathers.js CLI 
$ npm install ‑g @feathersjs/cli

Vue.js CLI
$ npm install ‑g @vue-cli

And also mongo-server (I am using Ubuntu 17):
$ sudo apt-get install mongodb-server

Basic Feathers template

After instal­lation we can start building our backend with the following command in the terminal:
$ feathers generate app

Then it will ask for some project confi­gu­ration values. Just select them by default. Then you should see an output like the following:
WTL Lund & Learn Feathers.js

As you observe, it created a lot of files that already prepare our backend to be useful for real appli­ca­tions. But it’s still just a boiler­plate. You don’t have any “service” to provide to any appli­cation and that is why Feathers offers the possi­bility to create that services. Let’s show what the services are in Feathers.js:

Services

“Services are the heart of every Feathers appli­cation and JavaScript objects or instances of a class that implement certain methods. Services provide a uniform, protocol independent interface for how to interact with any kind of data like:

  • Reading and/or writing from a database
  • Inter­acting with the file system
  • Call another API
  • Call other services like
    • Sending an email
    • Processing a payment
    • Returning the current weather for a location, etc.Protocol independent means that to a Feathers service it does not matter if it has been called internally, through a REST API or webso­ckets (both of which we will look at later) or any other way.”

For a more deep under­standing about Feather’s services you can visit: Services.

So let’s create a simple service to manage “ messages ” as if we were developing a chat app.

While we are in the root folder of the feathers appli­cation (where is the package.json, node_modules and this stuff) we execute:
$ feathers generate service

Again just answer some questions about the service. The important thing is the type of service. I selected Mongoose but you can select another or even create a new:
WTL Lunch & Learn Feathers.js Services

As you can see, it automa­ti­cally configure the project to connect the service with the mongo server. We can also change the confi­gu­ration easily in the config/default.js file. Let’s take a look into the src/models/messages.model.js file:
WTL Lunch & Learn Feathers.js Services Mongoose

The is the main file that you will have to change to adapt the service to your custom needs. By default the messages have a text attribute to save just a string. But you can add all other values as you need like (sender, group, file, image, etc..) that would be usual in a chat appli­cation. Visit mongoose docs to take a look into all possible types of data and metadata you can use (when the service is a mongoose type).

Hooks

If you take a look into the src/services/messages/messages.hooks.js you will see that in this file you can create hooks for you appli­cation. This is just a short intro­duction to Feathers so I will even not talk about hooks. Only I can say that the hooks allows you to have control on any request that it’s made for every service in two different stages of time (before and after the request). Also when errors occurs. Only with services we should be able to create a complete appli­cation but usually we need custom behaviours.

For more infor­mation: Feathers.js Hooks

Running backend

Let’s continue building our app. Before we run the backend we have to start a mongo server. I like to have the database in the projects folder so I will just create a db folder and inside just execute:
$ mongod –dbpath . –logpath mongod.log –fork 

The –fork option will allow you to run the database as daemon.

Now we can execute the backend without problems. We have to be at the root of the project and execute:
$ npm start

Then you should see output messages from feathers:

WTL Lunch & Learn Feathers.js run backend

And now our backend is running!. Let’s create the frontend to show Feather’s strength.

Building frontend

Basic Vue template

Now it’s the time to have some frontend to show how to connect it with the feathers framework.

We will use the Vue command line to install a template using Vuetify.js so our appli­cation will looks cool from the first minute.

So go to another directory and create a folder that will contain our frontend.
Then execute:
$vue init vuetifyjs/webpack feathers-frontend

WTL Lunch & Learn Feathers.js

Now we can execute:
$ npm run dev

And open the browser with http://localhost:8080

WTL Lunch & Learn Feathers.js Browser

You should see a clean appli­cation with simple navigation drawer, a toolbar and just a logo with text as content.

Connect with Backend

But we want to commu­nicate with the backend using feathers so we will add a simple text input and a button to send messages to the server and a list showing all the messages.

But first let’s add a file called feathers.js inside the src/ folder. And just put the following block in:

import feathers from 'feathers';
import socketio from 'feathers-socketio'; 
import io from 'socket.io-client';

const socket = io( 'http://localhost:3030' , { transports: [ 'websocket' ] });
const app = feathers().configure(socketio(socket));

export default app;

This file just takes care about creating a socket connection with the server (running at localhost:3030) and using that socket to create the feathers client for the appli­cation usage.

We also have to install the needed packages with:
$ npm install –save feathers feathers-socketio socket.io-client

And finally just load this file in the src/ main.js

Now we have confi­gured the connection with the server. Next step is to build the view to see some action:

Building simple view

So open the file src/App.vue and lets add some lines of code. Replace the content (wrapped with the <v‑content> tags at line 48) with the following block:

<v‑card container class = „pl‑3 pr‑3 pt‑3 mt‑3 ml‑3 mr‑3“ > <v‑text-field v‑model= „text“ ></v‑text-field>
<v‑btn class = „primary“ @click.stop= „saveText“ >S ave </v‑btn> <v- list >

<v- list ‑tile v- for = „msg in messages.data“ > <v- list ‑tile-content>

<v- list ‑tile-title :key= „msg.id“ >{{msg.text}}</v- list ‑tile-title>

<v- list ‑tile-sub-title> Created at: {{new Date (msg.createdAt). toString ()}} </v- list ‑tile-sub-title>

</v- list ‑tile-content> </v- list ‑tile>

</v- list > </v‑card>

So it should look like the following:

And replace the <script> below the view with the following block of code:

< script >
import feathers from ‚./feathers’ ;
const messa­ge­Service = feathers.service( ‚messages’ );

export default { name: ‚App’ , data() {

return{ clipped: false, drawer: true, fixed: false, items: [{

icon: ‚bubble_chart’ , title: ‚Inspire’ ,

}],
miniVa­riant: false , right: true , right­Drawer: false , title: ‚Vuetify.js’ , text: “ ‚
messages: [],

}; },

async­created() {
this .messages = await messageService.find(); messageService.on( ‚created’ , message =>

this .messages.data.push(message)); },

  methods: {
    saveText() {

messageService.create({ text: this .text }).then((res) => { console .log( ‚Message created correctly’ );

}).catch((err) => { console .error(err.message);

}); },

}, };

</ script >

Result

And that’s it. If you now run the frontend with:
$ npm run dev

Open a browser at http://localhost:8080 and you will see a simple functional input field with a button and a list. And for even more fun, you can open another browser with the same address to see what happens in the first browser when you submit a text in the second one:
WTL Lunch & Learn Feathers.js Result

You will see that in real time all clients are updated when someone creates a new message.