INSTALL.md

Installation Process

This process could definitely be streamlined further (and should be updated to use esbuild over webpack). PRs welcome.

Add imagine_cms to your list of dependencies in mix.exs:

def deps do
  [
    {:imagine_cms, "~> 6.3"}
  ]
end

Add imagine_cms to your list of dependencies in package.json:

  "dependencies": {
    "imagine_cms": "file:../deps/imagine_cms",
    // other deps (phoenix, etc.)
  }

Choose and configure your editor (default is Redactor, but you must BYOL), then import imagine_cms:

window.ImagineConfig = {
  // editor: 'article',
  editor: 'redactor',
  redactor: {
    plugins: ['alignment', 'clips', 'properties', 'table', 'video', 'widget'],
    clips: [
      ['Lorem ipsum...', 'Lorem...'],
      ['Red label', '<span class="label-red">Label</span>']
    ],
  }
}

import "imagine_cms";

Import the CMS editor styles, either via webpack:

import "../../deps/imagine_cms/priv/static/css/imagine_cms.css";

Or a CSS tool that supports importing via the package.json "style" attrbute:

@import "imagine_cms"

Also make sure to include the js/css for your selected editor in your own webpack bundle. Here is a Redactor example, including the recommended plugins:

import "./vendor/redactor/redactor.css";
import "./vendor/redactor/redactor.js";
import "./vendor/redactor/_plugins/alignment/alignment.js";
import "./vendor/redactor/_plugins/clips/clips.css";
import "./vendor/redactor/_plugins/clips/clips.js";
import "./vendor/redactor/_plugins/properties/properties.js";
import "./vendor/redactor/_plugins/table/table.js";
import "./vendor/redactor/_plugins/variable/variable.css";
import "./vendor/redactor/_plugins/variable/variable.js";
import "./vendor/redactor/_plugins/video/video.js";
import "./vendor/redactor/_plugins/widget/widget.js";

Configure the database (dev.exs and prod_secret.exs in a standard Phoenix app).

Migrations, etc. are simpler if you point it at the same database as your main repo, but you can also use a separate database if needed.

config :imagine_cms, Imagine.Repo
  ...

Copy in the migrations and seeds and run them to set up your CMS tables.

Copy in the routes, but change the two LayoutView module names to the one from your app.

Finally, add a new Plug.Static call to your endpoint, right after the existing one:

  plug Plug.Static,
    at: "/",
    from: "./public",
    only: ~w(assets)