Skip to content

Manual installation

Igor edited this page Feb 18, 2015 · 1 revision

###Add dependencies

Run ember-cli-admin generator and install dependencies:

ember g ember-cli-admin

Then in your Brocfile.js add bootstrap fonts:

// Put the bootstrap fonts where the bootstrap css expects to find them.
var pickFiles = require('broccoli-static-compiler');
var bootstrapFonts = pickFiles('bower_components/bootstrap-sass-official/assets/fonts/bootstrap', {
    srcDir: '/',
    destDir: '/assets/bootstrap'
});
var mergeTrees = require('broccoli-merge-trees');

module.exports = mergeTrees([app.toTree(), bootstrapFonts]);

Also make sure that your styles in app/styles have proper extensions if an attempt to start the server results in:

app/styles/app.[scss/sass does not exist]

###In your app.js

Add AdminResolver:

...
//app/app.js
import AdminResolver from 'ember-cli-admin/admin-resolver';
App = Ember.Application.extend({
  Resolver: AdminResolver
});
...

export default App;

###In your router.js

//app/router.js
---
import MetaRoute from 'ember-cli-admin/dsl/meta-route';
var Router;

Router = Ember.Router.extend({
  ...
});

Router.map(function() {
  return this.route("dashboard", {path: "/"});
});

MetaRoute.map(Router, function() {
  // we'll add routes for our resources here in the next step
});

export default Router;

###Add admin/index template to your application template:

//application.hbs
{{partial 'admin/index'}}

###Add routes/main.js in our routes:

//routes/main.js
import Ember from 'ember';
import BaseAdminRouteMixin from 'ember-cli-admin/mixins/routes/base';

var mainRoute = Ember.Route.extend(BaseAdminRouteMixin);
export default mainRoute;

###Now let's set up resources

For example, if we have the following model:

//app/models/user.js
import DS from 'ember-data';

export default DS.Model.extend({
  email: DS.attr('string'),
  name: DS.attr('string'),
  updated_at: DS.attr('string'),
  created_at: DS.attr('string')
});

To add users resource to admin dashboard, just set up users controller like this:

//app/controllers/users.js
import Ember from 'ember';
import TableViewController from 'ember-cli-admin/mixins/controllers/table-view';

export default Ember.ObjectController.extend(TableViewController);

And add resources to your router:

//app/router.js
...
MetaRoute.map(Router, function() {
  this.resources("users");
});
...

You'll also need to add Navigation initializer to set up your navigation bar:

//app/initializers/navigation.js

import Navigation from 'ember-cli-admin/dsl/navigation';

export default {
  name: 'navigation',
  initialize: function(container, app) {
    return Navigation.map(function() {
        //Dashboard page
        //You can override this if you don't use dashboard
      this.navigate("Dashboard", { route: "dashboard" });
      this.navigate("Admin", function() {
        return this.navigate("Users");
      });
    });
  }
};
Clone this wiki locally