Skip to content

A starter template for custom Decap CMS widget development, with Vite

Notifications You must be signed in to change notification settings

iamspark1e/decap-cms-widget-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

decap-cms-widget-starter


A starter template for custom Decap CMS widget development, powered with Vite.

Info

A zero config, out-of-box template for developing your own custom Decap CMS Widget, with latest version of Vite.

Quick Start

First, run npx degit iamspark1e/decap-cms-widget-starter my-widget or click the "Use this template" button on Github Repo

Then get into your project folder, no additional configuration, just run,

npm install
npm run dev

If you need to change running port, you can pass it via environment variable, for example, PORT=18080 npm run dev

After the dev server started, you can modify the Control.jsx and Preivew.jsx as you wish, dev server will be refreshed automatically with HMR, powered by Vite.

Developing Widget

More details about writing codes in widgets, you can read this official doc.

The whole project is focused on the src/main.js, the only entry which will mount your customized "Control" and "Preview" components on the window, so after main.js is bundled, you can call CMS.registerWidget to register your widget like this:

<script src="./main.js"></script>
<script>
    // the "CMS" is exposed by "decap-cms-app"
    CMS.registerWidget('test', window.StarterControl, window.StarterPreview);
</script>

Remember to rename "StarterControl" and "StarterPreview" to your own widget name !

When project started, the public/config.yml will be read to setup CMS environment, so you can add a more complicate collection for your usage.

Testing Widget

Before testing in "Preview mode", please build files first.

If you want to test your built widget file, you can start a "Preview" mode via npm run preview, that will serve files in the dist folder.

Production & Publishing Widget

npm run build
npm version release
npm run publish

Questions

If you have any questions, please leave me an issue, thanks~

Releases

No releases published

Packages

No packages published