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
- Server code: examples/step/01/rest/2.js
- Client code: common/public/rest.html and feathers-app.js
- Start the server:
node ./examples/step/01/rest/2 - Point the browser at:
localhost:3030/rest.html - Compare with last page's server examples/step/01/rest/1.js: Unified | Split
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="http://cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.js"></script>
<script src="https://unpkg.com/feathers-client@^2.0.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>
https://cdnjs.cloudflare.com/ajax/libs/core-js/2.1.4/core.min.jsloads a polyfill for fetch if required.src="https://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 isvar 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 thefetchinstruction 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: '[email protected]', password: '111111111', role: 'admin' }),
users.create({ email: '[email protected]', password: '222222222', role: 'user' }),
users.create({ email: '[email protected]', password: '333333333', 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: "[email protected]", password: "11111", role: "admin", _id: "8zQ7mXay3XqiqP35"}
created John Doe item
Object {email: "[email protected]", password: "22222", role: "user", _id: "l9dOTxh0xk1h94gh"}
created Judy Doe item
Object {email: "[email protected]", password: "33333", role: "user", _id: "3BeFPGkduhM6mlwM"}
find all items
[Object, Object, Object]
0: Object
_id: "3BeFPGkduhM6mlwM"
email: "[email protected]"
password: "33333"
role: "user"
1: Object
_id: "8zQ7mXay3XqiqP35"
email: "[email protected]"
password: "11111"
role: "admin"
2: Object
_id: "l9dOTxh0xk1h94gh"
email: "[email protected]"
password: "22222"
role: "user"
length: 3