Publish: Step-By-Step First Install

Publish is the content management component of the DADI web services stack, a set of flexible interfaces to easily manage content stored in API. This post gives an overview of setting it up and connecting to a DADI API instance.

We should note that many of the core web services in the DADI platform can be installed very simply using the DADI CLI tool. Publish is still in a public beta phase and doesn’t yet benefit from CLI’s simplified install process.

🔗Setup and build

1. We need to start by adding a directory for the Publish files. If you already have one, change into that directory first.

 $ mkdir ~/projects/publish-cms
 $ cd ~/projects/publish-cms

1. Add a package.json file to this directory, to list our dependencies. Add a new file to your directory with the following contents:

~/projects/publish-cms/package.json

 {
   "name": "publish-cms",
   "version": "1.0.0",
   "main": "index.js",
   "dependencies": {
     "@dadi/publish": "1.0.16-beta"
   }
 }

1. Add a file called server.js, which we’ll use for launching the application:

~/projects/publish-cms/server.js

 const app = require('@dadi/publish')
 app.run()

1. Install the Publish dependency. The package.json contains a reference to the @dadi/publish dependency, running npm install now will install everything you need:

 $ npm install

When installation completes, you’re ready to start the application.

1. You can now run npm start to launch the application. Publish runs on port 3001 by default - you should be able to navigate to http://localhost:3001 in your browser where you’ll see Publish running. The first thing you’ll notice is the warning “API failure” - we haven’t configured the connection with API yet, so this is expected.

🔗Connecting to API

Now that the application is installed, we’re going to configure it to connect to an instance of DADI API.

If you have your own instance of API running, use that in the below configuration of Publish. If you don’t have an API running yet, head to the API documentation for more information, or check out the Adam K Dean’s article on setting up a photo gallery website where he briefly explains API installation. In a future article, we’ll be covering “Installing API with CLI and setting up collections”.

1. Create a config directory in your Publish directory to contain the configuration files for the application:
2. Inside the new config directory create a configuration file for the development environment called config.development.json. Add the following:

~/projects/publish-cms/config/config.development.json

 {
   "app": {
     "name": "My CMS",
     "publisher": "My Publishing Company"
   },
   "server": {
     "host": "0.0.0.0",
     "port": 3001,
   },
   "apis": \\\[
     {
       "name": "Test API",
       "host": "http://localhost",
       "port": 3002,
       "database": "api",
       "version": "1.0"
     }
   \\\],
   "auth": {
     "enabled": false
   }
 }

1. You can now run npm start again. If your API already contains collections and content you should see a menu and document list similar to the below:

🔗Overriding Publish defaults

By default all collections and collection fields from your API are visible and editable within Publish. To hide collections and/or fields within collections, see below.

🔗Extending API fields

API collection schemas allow custom properties that can be read by Publish to modify the editing interface.

Add a publish configuration block to each field in your API collection schemas to control how they appear in Publish:

{
  "fields": {
    "title": {
      "type": "String",
      "required": true,
      "label": "Title",
      "publish": {
        "display": {
          "edit": true, // field will appear in the edit view
          "list": false // field will not appear in the index view
        }
      }
    }
  }
}

🔗Hiding an entire collection

Hide a collection by adding hidden to the collection settings block:

{
  "fields": {
    "field1": {

    },
    "field2": {

    },
  },
  "settings": {
    "publish": {
      "hidden": true
    }
  }
}

🔗Next steps

This post has only just scratched the surface of what is possible with DADI Publish. In a future article, we’ll go into more detail about setting up authentication for Publish so you can control access to your content management system.

If you want to know more about how Publish can elevate the potential of your editorial team, ask me here, on Discord or tweet @dadi.