https://github.com/munaibh/gerbera
An opinionated CLI to scaffold Gutenberg blocks that are easy to customize.
https://github.com/munaibh/gerbera
boilerplate gutenberg nodejs scaffolding webpack wordpress
Last synced: 3 months ago
JSON representation
An opinionated CLI to scaffold Gutenberg blocks that are easy to customize.
- Host: GitHub
- URL: https://github.com/munaibh/gerbera
- Owner: munaibh
- License: apache-2.0
- Created: 2019-06-07T21:13:46.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T06:13:26.000Z (over 3 years ago)
- Last Synced: 2025-03-17T23:19:37.912Z (over 1 year ago)
- Topics: boilerplate, gutenberg, nodejs, scaffolding, webpack, wordpress
- Language: JavaScript
- Homepage:
- Size: 1.44 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Gerbera
An opinionated CLI to scaffold Gutenberg blocks that are easy to customize.
Why? Because a good project structure is the hardest thing in life!
(Examples shown use Carbon)
Gerbera is a highly opinionated take on Gutenberg project structure and automates a lot of the menial tasks like scaffolding, so you don't have to. This package is useful for:
* **Easy to use** - Only a few commands to get started!
* **Lightweight** - One dependency, we handle building and generating new projects all in one place.
* **Hot Reloading** - Leverage [webpack-dev-servers](https://github.com/webpack/webpack-dev-server) handy hot reloading capabilities to remove the need to refresh after every change.
* **Docker** - Setting up wordpress can be a pain, so we optonally allow you use a docker image to speed up your workflow.
* **Friendly Errors** - We use `react-dev-utils` to provide friendly errors messages.
If you like what we do, please consider starring or tweeting about this project to show your support. Thanks!
## ❯ Getting started
Get started with Gerbera, with a few simple terminal commands (windows support coming very soon!)
* [Install](#-install)
* [Usage](#-usage)
- [Block Creation](#-creation)
- [Development](#-development)
- [Building](#-building)
* [Structure](#-structure)
* [About](#-about)
## ❯ Install
Install globally with [npm](https://www.npmjs.com/):
```sh
$ npm install @gerbera/cli --save
```
Use with [npx](https://yarnpkg.com/en/):
```sh
$ npx @gerbera/cli
```
_(Requires Node.js 8.6 or higher. Please let us know if you need support for an earlier version by creating an [issue](../../issues/new).)_
## ❯ Usage
### Block Creation
The easiest way to get started with gerbera is to run the `create` command.
```sh
$ npx @gerbera/cli create example-block
cd example-block
```
⚠️This example uses `npx`, but if you installed globally you can just use `npm`.
### Development
Once everything is created, you can go into your folder and run the development script.
```sh
$ npm run serve
```
**Params**
* `docker` **{String}**: (optional) Creates a docker instance with the wordpress imge.
### Production
To produce production code run `npm run build`, which minifies and uglified code by default.
```sh
$ npm run build
```
ℹ️You will see the build messages, errors, and lint warnings in the console.
## ❯ Structure
We generate a default project structure that we feel fits our needs (and maybe yours too). A well nested project strcuture which handles css, js and of course react components.
```
├── client
| ├── common
| | └── common.scss
| ├── example
| | ├── components
| | ├── scripts
| | ├── styles
| | ├── block.js
| | ├── edit.js
| | ├── inspector.js
| | └── save.js
| └── blocks.js
├── server
| └── blocks.php
├── package-lock.json
├── package.json
└── plugin.php
```
### Configuration File
We create a config file called `gerbera.config.js` which contains various information we use to automate the webpack builds (e.g. creating js files to enqueue scripts). An example is below:
```js
{
name: String | Project Name
namespace: String | Desired Namespace
}
```
## ❯ About
This project was an excuse for me to learn about: creating a node cli, publising to npm, writing to files and piping and in general learn from other useful packages. Inspired by [CreateGutenBlock](https://github.com/ahmadawais/create-guten-block) and [GutenBlock](https://github.com/zackify/gutenblock).