This tutorial is out of date and no longer maintained.
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:
In this tutorial, you’ll build a small, real-time messaging application to demonstrate the features and help understand the basics of FeatherJS.
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.
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.
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.
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.
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.
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.