Let’s start with a little bit of Ember.

$ npm install -g ember-cli $ mkdir restle-example-frontend && cd restle-example-frontend

$ ember init

Create a user :

$ ember generate model user // user

export default DS.Model.extend({

name: DS.attr('string'),

});

Lets have the index display the users and also have a form that can create new users. Now before we continue, we need to create a quick backend. Create another project folder outside of your Ember one.

$ mkdir restle-example-backend && cd restle-example-backend

$ npm init

$ npm install restle --save

$ touch index.js

Go on Mongolabs and create a free account and choose the sandbox tier. Copy and paste the database URL then add the following to index.js:

var Restle = require(‘restle’);

var port = 3000; var restle = new Restle({

port: port,

namespace: ‘/api’,

database: <paste-your-database-url-here>

}); var userSchema = {

name: { attr: ‘string’ }

}; restle.register(‘user’, userSchema); restle.on(‘ready’, function() {

console.log(‘Restle is ready!’);

});

Now we have a very basic app ready to go. We need to go back to Ember now and make some small adjustments to the adapter.

$ ember generate adapter application

Make sure your adapter extends the JSONAPIAdapter and has the proper host and namespace.

Ember is pretty cool and supports CSP (Content Security Policy). We need to remember to configure our app to be able to send requests to our backend. Edit config/environment.js and add the following object under APP:

contentSecurityPolicy: {

‘connect-src’: “’self’ localhost:3000”

}

Now we can send requests to our backend.

Disclaimer: This is possible because Restle enables CORS by default. That’s not a very secure thing to do, so remember that Restle is very new and still a work in progress. Don’t use it for production apps.

We need to do a few more Ember things:

$ ember generate controller index

$ ember generate route index

We need to retrieve all the users from Restle and display them in our index. Add the following to templates/index.hbs:

<h3>Restle Users</h3> <ul>

{{#if model.length}}

{{#each model as |user|}}

<li>{{user.name}}</li>

{{/each}}

{{else}}

<li>No users found! Create one now!</li>

{{/if}}

</ul> <h4>Create a new user!</h4>

<form>

{{input type=”text” value=name placeholder=”Name”}}

<button type=”submit” {{action “createUser”}}>

Create new user!

</button>

</form>

Quickly set up routes/index.js:

export default Ember.Route.extend({ model() {

return this.store.findAll(‘user’);

}, });

Users should be showing up now! Add a “createUser” action to controllers/index.js:

export default Ember.Controller.extend({ actions: {

createUser() {

const name = this.get(‘name’);

const user = this.store.createRecord(‘user’, {

name: name,

}); user.save().then(() => {

console.log(‘Yay!’);

}, () => {

console.log(‘Error!’);

});

},

}, });

That’s it. Restle is a great way to prototype your Ember app! Restle is still very new, but I think it will be a very promising library in the near future.