Our first Feathers application

Now that we are set up we can create our first Feathers application. It will work in both, NodeJS and the browser. First, let’s create a new folder for all our examples to run in:

  1. mkdir feathers-basics
  2. cd feathers-basics

Since any Feathers application is a Node application, we can create a default package.json using npm:

  1. npm init --yes

Installing Feathers

Feathers can be installed like any other Node module by installing the @feathersjs/feathers"">@feathersjs/feathers package through npm. The same package can also be used with a module loader like Browserify or Webpack and React Native.

  1. npm install @feathersjs/feathers --save

Note: All Feathers core modules are in the @feathersjs npm namespace.

Your first app

The base of any Feathers application is the app object which can be created like this:

  1. const feathers = require('@feathersjs/feathers');
  2. const app = feathers();

This application object has several methods, most importantly it allows us to register services. We will learn more about services in the next chapter, for now let’s register and use a simple service that has only a get method by creating an app.js file (in the current folder) like this:

  1. const feathers = require('@feathersjs/feathers');
  2. const app = feathers();
  4. // Register a simple todo service that returns the name and some text
  5. app.use('todos', {
  6.   async get(name) {
  7.     // Return an object in the form of { name, text }
  8.     return {
  9.       name,
  10.       text: `You have to do ${name}`
  11.     };
  12.   }
  13. });
  15. // A function that gets and logs a todo from the service
  16. async function getTodo(name) {
  17.   // Get the service we registered above
  18.   const service = app.service('todos');
  19.   // Call the `get` method with a name
  20.   const todo = await service.get(name);
  22.   // Log the todo we got back
  23.   console.log(todo);
  24. }
  26. getTodo('dishes');

We can run it with

  1. node app.js

And should see

  1. { name: 'dishes', text: 'You have to do dishes' }

Pro tip: For more information about the Feathers application object see the Application API documentation.

In the browser

The Feathers application we created above can also run just the same in the browser. The easiest way to load Feathers here is through a <script> tag pointing to the CDN version of Feathers. Loading it will make a feathers global variable available.

Let’s put the browser files into a new folder

  1. mkdir public

We will also need to host the folder with a webserver. This can be done with any webserver like Apache or with the http-server module that we can install and host the public/ folder like this:

  1. npm install http-server -g
  2. http-server public/

Note: You have to keep this server running for all browser examples in the basics guide to work.

In the public/ folder we add two files, an index.html that will load Feathers:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Feathers Basics</title>
  6. </head>
  7. <body>
  8.   <h1>Welcome to Feathers</h1>
  9.   <p>Open up the console in your browser.</p>
  10.   <script type="text/javascript" src="//unpkg.com/@feathersjs/client@^3.0.0/dist/feathers.js"></script>
  11.   <script src="client.js"></script>
  12. </body>
  13. </html>

And an client.js looking like this:

  1. const app = feathers();
  3. // Register a simple todo service that return the name and a text
  4. app.use('todos', {
  5.   async get(name) {
  6.     // Return an object in the form of { name, text }
  7.     return {
  8.       name,
  9.       text: `You have to do ${name}`
  10.     };
  11.   }
  12. });
  14. // A function that gets and logs a todo from the service
  15. async function logTodo(name) {
  16.   // Get the service we registered above
  17.   const service = app.service('todos');
  18.   // Call the `get` method with a name
  19.   const todo = await service.get(name);
  21.   // Log the todo we got back
  22.   console.log(todo);
  23. }
  25. logTodo('dishes');

You may notice that it is pretty much the same as our app.js for Node except the missing feathers import (since it is already available as a global variable).

If you now go to localhost:8080 with the console open you will also see the result logged.

Note: You can also load Feathers with a module loader like Webpack or Browserify. For more information see the client API chapter.

What’s next?

In this chapter we created our first Feathers application with a simple service that works in Node and the browser. Next, let’s learn more about Services and Service events.