Ember.js Integration Guide

Ember.js integration guide cover

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

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.

Note
While LexasCMS does natively support JSON:API and can be used directly with Ember Data without this addon, the addon defines some helpful defaults and provides predefined models in order to improve developer experience.

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.

Note

The below example assumes that there is a blogPost content type defined in your space.

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 create a new account.

© 2020 Status200 Ltd.