Create a DatoCMS Plugin using Angular

Example: DatoCMS Multiselect Plugin

EcoLogicAG/datocms-plugin-multiselect

The Beginning

ng new datocms-plugin-<purpose>
npm install --save datocms-plugins-sdk

You won’t need a router for the plugin.

Add the DatoCMS CSS to index.html

<head>
   ...
   <link href="https://unpkg.com/datocms-plugins-sdk/dist/sdk.css" media="all" rel="stylesheet"/>
   ...
</head>

https://github.com/EcoLogicAG/datocms-plugin-multiselect/blob/master/src/index.html

Import the SDK in app.component.ts

import DatoCmsPlugin from 'datocms-plugins-sdk';
...
export class AppComponent implements OnInit {
   ...
   ngOnInit(): void {
      DatoCmsPlugin.init((plugin) => {
         
         ...
      });
   }
}

https://github.com/EcoLogicAG/datocms-plugin-multiselect/blob/master/src/app/app.component.ts

Get magbeat’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Do your stuff with the template and the component.

https://www.datocms.com/docs/plugins/sdk-reference/

For development and testing you can serve the app on http://localhost:4200 as usual. Then create a new private plugin over at DatoCMS and use http://localhost:4200 as the “Entry point URL”. (You have to allow unsafe content in the browser for testing)

Publish

https://www.datocms.com/docs/plugins/publishing/

What Went Wrong

The plugins are served on unpkg.com from a subdirectory, eg. https://unpkg.com/@ecologic/datocms-plugin-multiselect@0.0.7/dist/index.html

For this to work with Angular we need to adapt the <base href=”/”> path in index.html. The easiest way to do this is using the package.json file:

{
...
   "version": "0.0.7",
   ...
   "scripts": {
      "build": "ng build --prod --configuration production --base-href https://unpkg.com/@ecologic/datocms-plugin-multiselect@$npm_package_version/dist/ --output-path dist"
   }
}

EcoLogicAG/datocms-plugin-multiselect

Then build and publish your plugin an you should be fine.