Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ghost EAK -> Ember-cli migration notes

1. The great migration. Move all client files to ember-cli funtimes.

cd core/client
git mv -k * app/
git mv ../server/views/default.hbs app/index.html
cd app
git mv -k assets/sass styles
git mv styles/screen.scss styles/app.scss
git mv -k assets/img ../public/assets/img
git mv -k assets/fonts ../public/assets/fonts
git commit -m "The great migration"

2. Ember-cli-ify

Ember goes up your directory tree looking for a package.json. If it finds one, it thinks that that's its package.json and so it thinks that ghost/ is its root dir rather than ghost/core/client/. Thus, some hackery is required

# /ghost/core/client $
# hackery.
rm ../../package.json
ember init -n ghost

I then answer "yes" (y) to app.js and index.html.

Now we're going to diff all of our overwrites and double check that we didn't lose data we need for each of those files

git diff <file>
# see what ember-cli added
git checkout <file>
# play around with it in the editor, incorporating ember-cli's changes but keeping our original structure.
git add <file>

The trickiest here is index.html, which needs to have some new link and script tags added.

Now for cleanup.

# undo our hackery above
git checkout ../../package.json
# hide things we don't want to see in git status
git add .gitignore
# remove unneeded gitkeeps
rm app/components/.gitkeep app/controllers/.gitkeep app/helpers/.gitkeep app/models/.gitkeep app/routes/.gitkeep app/styles/.gitkeep app/templates/components/.gitkeep app/views/.gitkeep
rm -rf vendor # Not used?
rm .editorconfig #Ghost doesn't want this
rm .travis.yml # We've already got one!
rm README.md # just go to ember-cli.com
rm public/crossdomain.xml
rm public/robots.txt

And that's it. Here's commit number two.

git add .
git commit -m "Ember intialized"

3. ES6 and module resolution

I wrote a script that went through all js files in /app and looked for the string Ember.. If it was found, the script inserted import Ember from 'ember';\n at the top of the file I did the same for DS. (import DS from 'ember-data';\n)

ember build helps me find files that imported DS or Ember when they didn't need to.

git diff --shortstat
#=> 150 files changed, 160 insertions(+)
git add .
git commit -m "Ember and DS ES6 modulization"

4. Dependencies

To start with, I'm not going to use any ember-cli addons (like the ones for SimpleAuth, which we use). I don't want to have to worry about ungobalifying things, nor different configurations.

This mainly involved copy and pasting values from ghost's previous bower.json to the one in core/client. Now I needed to tell broccoli about these new files for transpilation - for that I copied the large list of files we were transpiling in Grunt before, and wrapped the paths in app.import(..).

git commit -m "Bower deps."

5. Asset Compilation & Server Delivery

Ember's our new build tool - it needs to build its files to ghost, though. This'll happen via an ember-cli in-repo-addon that moves the necessary files after they're built.

I'm going to be lazy and use fs-extra to do the copying.

# Tools for asset compilation
npm install ember-cli-sass --save-dev
npm install ember-cli-autoprefixer --save-dev
npm install ember-cli-htmlbars --save-dev
# The addon for moving our index.html -> server/views
npm install fs-extra --save-dev
ember generate in-repo-addon asset-delivery
// lib/asset-delivery/index.js
module.exports = {
    name: 'asset-delivery',
    postBuild: function (results) {
      var fs = this.project.require('fs-extra');

      fs.copySync(results.directory + '/index.html', '../server/views/default.hbs');
    }
};

Now I just have to make some changes to where the ghost server serves files from.

First, set core/client/dist as our new static assets location (for express['static'] and a few other jobs)

Remove the ghost_script_tags server handlebars helper as we're now serving the same files in production and development.

With the new paths set up, running these two commands serves ghost:

core/client$ ember build
core/client$ cd ../../
$ node index

And, horay, it is.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.