How to deploy ember at PHP-based CMS?

Questions
1

Hello! I recently started learning ember, and I have one question, excuse me my french. I am interested, - how to deploy the project at PHP-based CMS.

The problem is that after the project is completed, user need the ability to add new pages by the tools of CMS with friendly interface.

When I create a route using ember environment, there`s 3 actions:

  • creating a route file;

  • creating a template;

  • and add the route to the router;

But CMS (such as MODX Revo or Wordpress) creates one page/resource in one action, creating a new file or/and write something in DB. Also, CMS worked with it`s templates, functions, APIs and other.

Further worse — after building, ember-cli creates a single js-file, that contains all the routes, templates and other staff.

How this two technologies can work together?

Is it possible to customize the project so that there will be used instruments of CMS and ember, and after creating a new resource using MODX or Wordpress, the ember frontend will rebuild itself automatically, updating the single-page application?

If all of the above is possible, tell me please, in which direction to move and what to study.

Thanks to everyone for any help!

2

The term you’re looking for is “headless CMS”. You would use Wordpress (for example) as an API server just to store and retrieve all the content, and you render the content from your Ember app.

There are pros and cons. You gain a lot of control over the experience, but you tend to lose some of the end user customizability of stock Wordpress.

1 Like
3

We have used WordPress as a “headless CMS” in the past but we put projects and pages in hard ember routes. See https://www.kerstenconstructie.com/projecten/1354 and pages: Ons werk | Kersten

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
	this.resource('projects', {path: 'projecten'}, function() {
		this.route('project', {path: ':project_id'});
	});
	this.route('vacature', {path: 'vacature/:vacature_id'});
	this.route('page', {path: '*page_name'});
});

export default Router;

Not sure if we would do it again today but it is super stable :wink:

1 Like