Ember.js Integration Guide

This tutorial will guide you through the steps required to pull content from LexasCMS into your Ember.js application.

Throughout the tutorial, we’ve assumed that you have a basic understanding of Ember and its concepts. If you’re new to Ember, we highly recommend checking out the official Ember tutorial before proceeding.

Create your application

After ensuring that you already have EmberCLI installed, run the following command to create a new Ember application.

ember new ember-lexascms-tutorial

Navigate into your application directory

After you have created your application, navigate into it’s directory.

cd ember-lexascms-tutorial

Install the LexasCMS addon

Next we’re going to install the ember-data-lexascms addon.

Install the addon by running the following command.

ember install ember-data-lexascms

Configure the LexasCMS addon

Once the LexasCMS addon has been installed, add the following config to your applications config/environment.js file:

let ENV = {
  // ...

  lexascms: {
    // Outside of this tutorial, you would replace this with your own
    // space ID
    spaceId: 'bc4c2f6d-7297-4857-8bb2-dd55e80bf5e6'
  }

  // ...
};

Configure Adapters and Serializers

Before you can retrieve content using Ember Data, you’ll need to configure your applications adapaters and serializers.

Fortunately the LexasCMS addon provides a preconfigured adapter and serializer out of the box to make this as easy as possible.

Create a new file located at app/adapters/application.js with the following contents:

import LexasCMSAdapter from 'ember-data-lexascms/adapters/lexascms';

export default class ApplicationAdapter extends LexasCMSAdapter {
}

Now create another file, this time located at app/serializers/application.js and with the following contents:

import LexasCMSSerializer from 'ember-data-lexascms/serializers/lexascms';

export default class ApplicationSerializer extends LexasCMSSerializer {
}

Define your model(s)

Next you’ll need to define some models which correspond with the content types that are defined within LexasCMS.

Create a new file located at app/models/blog-post.js with the following contents:

import Model, { attr } from '@ember-data/model';

export default class BlogPostModel extends Model {

  @attr slug;
  @attr title;
  @attr publishedAt;
  @attr excerpt;
  @attr mainContent;

}

Fetch and render your content

Now that you have installed and configured the LexasCMS addon, you should be able to retrieve your content by using Ember Data’s regular data fetching methods (findRecord, findAll, etc).

Create a new file located at app/routes/application.js, and paste in the following code:

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ApplicationRoute extends Route {

  @service store;

  model() {
    return this.store.findAll('blog-post');
  }

}

Next, open the app/templates/application.hbs file and replace its contents with the following:

<h1>My Ember.js Blog</h1>
<p>Welcome to my Ember.js blog.</p>
<ul>
  {{#each @model as |blogPost|}}
    <li>{{blogPost.title}}</li>
  {{/each}}
</ul>

In this step, you have:

• Retrieved your blog posts from LexasCMS using Ember Data’s findAll method
• Rendered a list of your blog post titles into your main application template

Summary

In this tutorial, you’ve learned how simple it is to manage content on your website using a combination of LexasCMS and Ember.js.

If you would like to try it out yourself, please click here to request a free trial.