Seravo Example Project to Support Developers

Seravo has long provided WordPress developers with a ready-to-use project template that serves as a foundation for creating and developing new websites. The project template is pre-installed on the server when you order a WordPress hosting plan from Seravo.

The project includes tools such as Git, Composer, Nginx, and Docker. However, the project template has lacked an example demonstrating how to manage the entire project build process from the project root.

To address this, we have released an example project for WordPress developers aimed at presenting a more practical project template. The new project template makes use of WordPress community tools as much as possible:

• @wordpress/scripts for the build process.
• NPM workspaces for defining different parts of the project, such as custom plugins and themes.

Key Features of the Example Project

The structure of the new example project is exactly the same as Seravo project template, but it includes a few additional elements:

• An example block plugin created using the @wordpress/create-block tool.
• An example theme, which includes JavaScript and CSS files along with a webpack.config.js file to manage them.
  • The theme is a simplified version of the Twenty Twenty-Five default theme.
• NPM workspaces define the above as separate workspaces using the package.json file in the project root.

The project root contains a dedicated readme file with more detailed information.

How NPM Workspaces Work

The package.json file in the project root defines all workspaces within the project, for example:

"workspaces": [
    "htdocs/wp-content/plugins/example-blocks",
    "htdocs/wp-content/themes/example-theme"
]

Similarly, both the example block and example theme have their own package.json files, which define the necessary NPM packages and scripts for each.

The idea is that all parts of the project (plugin and theme) can function as independent units while still being managed collectively from the project root.

It is essential to define the name field value in the package.json files of the plugin and theme and use this value in the package.json file in the project root.

Running NPM Commands from the Project Root

By executing a command with the -w flag, it is possible to run a given command in the context of a specific workspace. For example, when running the following command in the project root:

npm run build -w=example-blocks

• This executes the build script defined in ./htdocs/wp-content/plugins/example-blocks/package.json.
• Note that “example-blocks” must match the value in the name field of the package.json file.

Similarly, using the --workspaces flag allows executing a command across all workspaces. For example, the following command runs lint:css in all workspaces:

npm run lint:css --workspaces

Usage of @wordpress/scripts

In the example project, the build process for all workspaces is managed using the @wordpress/scripts NPM package.

When the example block plugin is created with @wordpress/create-block, all build-related processes for the plugin are handled automatically.

In contrast, the theme requires its own webpack.config.js file, which defines the JavaScript and CSS files included in the theme.

We override some of the @wordpress/scripts package settings with our own configurations:

• Define the entry points for theme CSS and JS files.
• Add the webpack-remove-empty-scripts plugin to prevent unnecessary .js files related to CSS files from being left behind.

More details on this process can be found in the WordPress developer documentation under the build process article.

Summary

The detailed documentation for the project template can be found on GitHub, in the readme file.

This example project is just one way to organize a WordPress project, but we hope it will be useful to our customers. If you have any questions, we are happy to help!