A Feathers REST Client

We already have a Feathers REST API server from the previous example. Let's write a JavaScript frontend for it.

Working example

Writing a server for Feathers client REST calls

rest/2.js , our server for Feathers REST clients, is exactly the same as rest/1.js. , our previous server for HTTP REST API calls. No new server code is required to handle Feathers REST clients.

Compare the two: Unified | Split.

Writing the frontend HTML

We'll soon see most of the frontend doesn't care if we're communicating with the server using REST or WebSockets. To keep things DRY, we are isolating code unique to REST in common/public/rest.html.

<html>
<head>
  <title>Feathers REST client</title>
  <style>
    body {
      font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
      font-weight: 400;
      font-size: 16px;
      color: #333;
    }
  </style>
</head>
<body>
<h1>Feathers guide</h1>
<h2>Feathers REST client</h2>
<br />
Open console to see results of <strong>feathers-rest</strong> calls.
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js"></script>
<script src="//unpkg.com/feathers-client@^1.8.0/dist/feathers.js"></script>
<script src="/serverUrl.js"></script>
<script>
  const feathersClient = feathers()
      .configure(feathers.rest(serverUrl).fetch(fetch))
</script>
<script src="/feathers-app.js"></script>
</body>
</html>
  • //cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js loads a polyfill for fetch if required.
  • src="//unpkg.com/feathers-client@^2.0.0/dist/feathers.js" loads the Feathers client code.
  • src="/serverUrl.js" loads the URL of the server. The default is var serverUrl = 'http:localhost:3030';. Change the value if you need to.
  • const feathersClient = feathers() instantiates a Feathers client.
  • .configure(feathers.rest(serverUrl).fetch(fetch)) configures the client to use REST when communicating with the server. It points to the server, and passes the fetch instruction as the interface for fetching resources.
  • src="/feathers-app.js" loads the main application.

Writing the Feathers frontend

Writing the HTML was actually the hard part. The frontend common/public/feathers-app.js is essentially the same as the server code we used in Writing a Database Connector!


const users = feathersClient.service('/users');

Promise.all([
  users.create({ email: 'jane.doe@gmail.com', password: '11111', role: 'admin' }),
  users.create({ email: 'john.doe@gmail.com', password: '22222', role: 'user' }),
  users.create({ email: 'judy.doe@gmail.com', password: '33333', role: 'user' })
])
  .then(results => {
    console.log('created Jane Doe item\n', results[0]);
    console.log('created John Doe item\n', results[1]);
    console.log('created Judy Doe item\n', results[2]);

    return users.find()
      .then(results => console.log('find all items\n', results));
  })
  .catch(err => console.log('Error occurred:', err));

Feathers "a-ha!" moment. We can run exactly the same code on the frontend as on the server. We can code the frontend as if the database was sitting on it. That's part of the magic of Feathers, and it makes frontend development significantly simpler.

Results

The results in the console window of the browser are the same as they were running Writing a Database Connector.

created Jane Doe item
 Object {email: "jane.doe@gmail.com", password: "11111", role: "admin", _id: "8zQ7mXay3XqiqP35"}
created John Doe item
 Object {email: "john.doe@gmail.com", password: "22222", role: "user", _id: "l9dOTxh0xk1h94gh"}
created Judy Doe item
 Object {email: "judy.doe@gmail.com", password: "33333", role: "user", _id: "3BeFPGkduhM6mlwM"}
find all items
 [Object, Object, Object]
   0: Object
     _id: "3BeFPGkduhM6mlwM"
     email: "judy.doe@gmail.com"
     password: "33333"
     role: "user"
   1: Object
     _id: "8zQ7mXay3XqiqP35"
     email: "jane.doe@gmail.com"
     password: "11111"
     role: "admin"
   2: Object
     _id: "l9dOTxh0xk1h94gh"
     email: "john.doe@gmail.com"
     password: "22222"
     role: "user"
  length: 3

Is anything wrong, unclear, missing?

Leave a comment.

results matching ""

    No results matching ""