create-divi-extension

by elegantthemes

elegantthemes / create-divi-extension
137 Stars 41 Forks Last release: Not found MIT License 1.6K Commits 368 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Create Divi Extension <!--CircleCI-->

Create Divi Extensions with no build configuration.

Create Divi Extension works on macOS, Windows, and Linux. If something doesn’t work, please file an issue.

Quick Overview

cd .../wp-content/plugins
npx create-divi-extension my-extension
cd my-extension
yarn start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Then open your WordPress site to see your extension. When you’re ready to deploy to production, create a minified bundle with

yarn build
.

npx create-divi-extension my-extension

Get Started Immediately

You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code.

Just create a project, and you’re good to go.

Creating an Extension

You’ll need to have Node >= 6 on your local development machine.

To create a new extension, run a single command from inside your WordPress plugins directory:

npx create-divi-extension my-extension

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

It will create a directory called

my-extension
. Inside that directory, it will generate the initial project structure and install the transitive dependencies:
my-extension
├── includes
│   ├── modules
│   │   └── HelloWorld
│   │       ├── HelloWorld.jsx
│   │       ├── HelloWorld.php
│   │       └── style.css
│   ├── loader.js
│   ├── loader.php
│   └── MyExtension.php
├── languages
├── node_modules
├── scripts
│   └── frontend.js
├── styles
├── my-extension.php
├── package.json
└── README.md

No configuration or complicated folder structures, just the files you need to build your extension. Once the installation is done, you can open your project folder:

cd my-extension

Inside the newly created project, you can run some built-in commands:

npm start
or
yarn start

Runs the extension in development mode. Open your WordPress website to view it.

The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.

Build errors

npm run build
or
yarn build

Builds the extension for production. It correctly optimizes the build for the best performance.

The build is minified. Your extension is ready to be deployed.

npm run zip
or
yarn zip

Runs

build
and then creates a production release zip file.

User Guide

The User Guide includes information on different topics, such as:

A copy of the user guide will be created as

README.md
in your project folder.

Philosophy

  • One Dependency: There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.

  • No Configuration Required: You don't need to configure anything. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.

  • No Lock-In: You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.

What’s Included?

Your environment will have everything you need to build a Divi extension:

  • React, JSX, ES6, and optional Flow syntax support.
  • Language extras beyond ES6 like the object spread operator.
  • Auto prefixed CSS, so you don’t need
    -webkit-
    or other prefixes.
  • A fast interactive unit test runner with built-in support for coverage reporting.
  • A live development server that warns about common mistakes.
  • A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
  • Hassle-free updates for the above tools via a single dependency.

Check out this guide for an overview of how these tools fit together.

The tradeoff is that these tools are preconfigured to work in a specific way. If your project needs more customization, you can "eject" and customize it, but then you will need to maintain the configuration.

Contributing

We'd love to have your helping hand on

create-divi-extension
! See CONTRIBUTING.md for more information on what we're looking for and how to get started.

Acknowledgements

We are grateful to the authors of

create-react-app
for creating the awesome tool on which

create-divi-extension
is based.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.