Oil Based Boilerplate

screenshot of Oil Based Boilerplate
scss

A boilerplate for developing React-powered Wordpress themes, plugins, and guten-block that using shared components and Javascript dependencies.

Overview

The Oil-Based Boilerplate is an innovative and efficient solution for developers looking to create React-powered WordPress themes, plugins, and guten-blocks. By employing a modular architecture that allows for shared components, this boilerplate streamlines the development process, making it not only simpler but also faster. Whether you are integrating with the Gutenberg editor or working on a standalone plugin, this setup offers flexibility and efficiency.

The clear structure and included tools, such as Docker support, enhance the usability of this boilerplate. Aimed at both novice and experienced developers, it promotes good practices and helps avoid common pitfalls of WordPress development with React.

Features

  • Gutenberg Integration: Utilizes Gutenberg's React wrappers to ensure seamless compatibility and a smoother development experience within the WordPress ecosystem.

  • Shared Components: Enables the sharing of React components across different parts of the application, promoting code reuse and reducing redundancy.

  • Docker Support: Comes with a Docker compose file for easy testing and development, simplifying the setup process for local environments.

  • Sass Support: Supports Sass for styling, allowing developers to use advanced styles and variables for a more robust styling approach.

  • Easy Installation: The boilerplate includes straightforward commands that make setting up and running your project quick and hassle-free.

  • Flexible Folder Structure: The shared directory structure minimizes code duplication, ensuring that components are efficiently managed and imported.

  • Customizable Configuration: Offers a webpack build configuration (inspired by Create-Guten-Block) that's designed to be easily adaptable according to project needs.

  • Symlink Support: Facilitates the linking of required project directories into your WordPress installation, providing flexibility for local and Docker environments.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

graphql
Graphql

A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.