Introduction
Feathers is a minimalistic real-time framework for web applications built over Express. With Feathers, in addition to using middleware, you can get real-time, RESTful services and ORM support out of the box.
FeathersJS offers a variety of other features that make it useful to front-end developers:
- Feathers easily integrates with any client-side framework.
- Feathers is universal by design. It works on the browser (JavaScript), on mobile (React Native, Ionic), and on the server with Node.js.
- Feathers is a modern framework built with promises and ES6, so you get the most recent coding conventions by default.
- Feathers is structured to build service-oriented apps, enabling you to split your application into microservices and scale.
- Feathers is data agnostic. It has adapters for over 15 data sources including MongoDB, PostgreSQL, and others.
- Feathers ships with an external plug-in that allows you to implement authentications, SMS, and email messaging.
In this tutorial, you’ll build a small, real-time messaging application to demonstrate the features and help understand the basics of FeatherJS.
Prerequisites
To execute this tutorial, you’ll need a working computer system with NodeJS and any preferred generator installed. However, to build specific projects, you may occasionally need to install more packages as your project requires.
Step 1 — Installing FeathersJS and Creating the Workspace
The best way to quickly get started with Feathers is through the command-line interface tool.
From a terminal window, run the following to install Feathers globally:
- npm install -g @feathersjs/cli
Next, install the Yeoman generator for Feathers:
- npm install -g yo generate-feathers
Once installed, create a project directory called feathers-demo:
- mkdir feathers-demo
Change into the newly created directory:
- cd feathers-demo
Create a new application called feathers-app:
- yo feathers
Start the development server:
- npm start
This will prompt for the project configuration details like project name, description, API type, and database. After that, your project will be generated and live on localhost:3030. If you navigate to that port on your browser, you will see your app live.
Step 2 — Adding a Service
You have a brand new FeathersJS application. You’re now ready to add a service. Since you are building a demo real-time app, let’s create a message service. Go back to the terminal and run the command below:
- yo feathers:service
This will prompt you for some answers about the service you’d like to create. Answer the prompts to proceed.
At this point, if you restart the development server and navigate to the new path on the browser, localhost:3030/message, you will see the database displayed.
You’ll see that the database is empty, so let’s add some data. Back in your terminal, run this curl command:
- curl 'http://localhost:3030/message/' -H 'Content-Type: application/json' --data-binary '{"text": "Hello world"}'
This will send a POST request to the /message endpoint. Once posted, you will see the changes reflected in the database after reloading the page.
Feathers automatically made an API so that you didn’t have to create any of the /get() or /post() methods. You may have also noticed that you have an automatically generated unique ID for each message.
Step 3 — Allowing Users to Post Messages
Now you’re ready to configure the ability to allow users to post data to this database and render it on the client in real-time. To do this, open the public/index.html file and update the code with the one below:
<html>
<head>
<title>Welcome to Feathers</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css"
integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA"
crossorigin="anonymous"
/>
</head>
<body>
<main class="container">
<img
class="logo"
src="svg"
alt="Feathers Logo"
/>
</main>
<div class="card mt-5">
<div class="card-header">
Messages
</div>
<div class="card-body">
<h5 class="card-title">Send Message</h5>
<input class="form-control" type="text" placeholder="message" id="message"/>
<button onclick="sendMessage()" type="button" class="btn btn-primary mt-2">
Send Message
</button>
</div>
</div>
<script src="//cdn.rawgit.com/feathersjs/feathers-client/v1.0.0/dist/feathers.js"></script>
<script src="socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io()
var app = feathers()
app.configure(feathers.socketio(socket))
var messages = app.service('message')
messages.on('created', function(message){
console.log('Message created on client', message)
} )
function sendMessage(){
var messageText = document.getElementById('message').value;
messages.create({text: messageText})
}
</script>
</body>
</html>
Now when you check back at our Feathers app on localhost:3030 you will get an updated user interface where users can update the database.
Here, users can type the message in the input field on the left and click the Send Message button. If you follow those steps and reload the page, you will see the message added to your database.
Step 4 — Configuring the App to Update in Real-time
As a final step, let’s update the app to render the messages on the UI in real-time. Update the index.html file again with the code below:
<html>
<head>
...
</head>
<body>
....
+ <div class="card">
+ <div class="card-body">
+ <p id="messageList" class="card-text"></p>
+ </div>
+ </div>
....
<script src="//cdn.rawgit.com/feathersjs/feathers-client/v1.0.0/dist/feathers.js"></script>
<script src="socket.io/socket.io.js"></script>
<script type="text/javascript">
....
messages.on('created', function(message){
+ var newMessage = document.getElementById("messageList");
+ newMessage.innerHTML += "<h4>" + message + "</h4>"
console.log('Message created on client', message)
} )
function sendMessage(){
...
}
</script>
</body>
</html>
With that change, your app will render messages on both the database and UI in real-time across all clients.
Conclusion
In this tutorial, you built a lightweight REST application that is updated in real-time with FeathersJS. You can learn more about FeathersJS at the official documentation page.