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.
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
Next we’re going to install the ember-data-lexascms addon.
Install the addon by running the following command.
ember install ember-data-lexascms
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'
}
// ...
};
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 {
}
Next you’ll need to define some models which correspond with the content types that are defined within LexasCMS.
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;
}
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:
findAll
methodIn 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.
© 2022 Status200 Ltd.