https://github.com/iamspark1e/decap-cms-widget-starter
A starter template for custom Decap CMS widget development, with Vite
https://github.com/iamspark1e/decap-cms-widget-starter
decap-cms decap-cms-widget netlify-cms netlify-cms-widgets starter-kit starter-template
Last synced: 5 months ago
JSON representation
A starter template for custom Decap CMS widget development, with Vite
- Host: GitHub
- URL: https://github.com/iamspark1e/decap-cms-widget-starter
- Owner: iamspark1e
- Created: 2023-08-19T20:30:09.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-24T03:33:42.000Z (over 1 year ago)
- Last Synced: 2024-11-13T14:53:32.325Z (6 months ago)
- Topics: decap-cms, decap-cms-widget, netlify-cms, netlify-cms-widgets, starter-kit, starter-template
- Language: JavaScript
- Homepage:
- Size: 350 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-decap-cms - decap-cms-widget-starter - A starter template for custom Decap CMS widget development, with Vite. (Custom Widget)
README
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](https://github.com/iamspark1e/decap-cms-widget-starter)
Then get into your project folder, no additional configuration, just run,
```bash
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](https://decapcms.org/docs/custom-widgets/#writing-custom-widgets-as-a-separate-package).
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:
```html
// the "CMS" is exposed by "decap-cms-app"
CMS.registerWidget('test', window.StarterControl, window.StarterPreview);
```
> 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
```bash
npm run build
npm version release
npm run publish
```
### Questions
If you have any questions, please leave me an issue, thanks~