Create a DatoCMS Plugin using Angular

magbeat
magbeat
Nov 7, 2018 · 2 min read

Example: DatoCMS Multiselect Plugin

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>

Import the SDK in app.component.ts

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

...
});
}
}

Do your stuff with the template and the component.

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

Publish

What Went Wrong

The plugins are served on unpkg.com from a subdirectory, eg.

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"
}
}

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

EcoLogic

Short and longer posts on coding with Angular and asp .net core — https://www.ecologic.ch

magbeat

Written by

magbeat

Software Engineer (.NET Core, Angular, Typescript)

EcoLogic

EcoLogic

Short and longer posts on coding with Angular and asp .net core — https://www.ecologic.ch

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade