form-block 🚀

Form Block add-on for Plone CMS.

Quick Start 🏁

Prerequisites ✅

• An operating system that runs all the requirements mentioned.
• uv
• nvm
• Node.js and pnpm 24
• Make
• Git
• Docker (optional)

Installation 🔧

1. Clone this repository, then change your working directory.

   git clone git@github.com:plone/form-block.git
   cd kitconcept-gmbh-website

2. Install this code base.

   make install

Fire Up the Servers 🔥

1. Create a new Plone site on your first run.

   make backend-create-site

2. Start the backend at http://localhost:8080/.

   make backend-start

3. In a new shell session, start the frontend at http://localhost:3000/.

   make frontend-start

Voila! Your Plone site should be live and kicking! 🎉

Local Stack Deployment 📦

Deploy a local Docker Compose environment that includes the following.

• Docker images for Backend and Frontend 🖼️
• A stack with a Traefik router and a PostgreSQL database 🗃️
• Accessible at http://kitconcept-gmbh-website.localhost 🌐

Run the following commands in a shell session.

make stack-create-site
make stack-start

And... you're all set! Your Plone site is up and running locally! 🚀

Project structure 🏗️

This monorepo consists of the following distinct sections:

• backend: Houses the API and Plone installation, utilizing pip instead of buildout, and includes a policy package named kitconcept_gmbh.website.
• frontend: Contains the React (Volto) package.
• devops: Encompasses Docker stack, Ansible playbooks, and cache settings.
• docs: Scaffold for writing documentation for your project.

Why this structure? 🤔

• All necessary codebases to run the site are contained within the repository (excluding existing add-ons for Plone and React).
• Specific GitHub Workflows are triggered based on changes in each codebase (refer to .github/workflows).
• Simplifies the creation of Docker images for each codebase.
• Demonstrates Plone installation/setup without buildout.

Code quality assurance 🧐

To check your code against quality standards, run the following shell command.

make check

Format the codebase

To format and rewrite the code base, ensuring it adheres to quality standards, run the following shell command.

make format

Section	Tool	Description	Configuration
backend	Ruff	Python code formatting, imports sorting	backend/pyproject.toml
backend	zpretty	XML and ZCML formatting	--
frontend	ESLint	Fixes most common frontend issues	frontend/.eslintrc.js
frontend	prettier	Format JS and Typescript code	frontend/.prettierrc
frontend	Stylelint	Format Styles (css, less, sass)	frontend/.stylelintrc

Formatters can also be run within the backend or frontend folders.

Linting the codebase

or lint:

make lint

Section	Tool	Description	Configuration
backend	Ruff	Checks code formatting, imports sorting	backend/pyproject.toml
backend	Pyroma	Checks Python package metadata	--
backend	check-python-versions	Checks Python version information	--
backend	zpretty	Checks XML and ZCML formatting	--
frontend	ESLint	Checks JS / Typescript lint	frontend/.eslintrc.js
frontend	prettier	Check JS / Typescript formatting	frontend/.prettierrc
frontend	Stylelint	Check Styles (css, less, sass) formatting	frontend/.stylelintrc

Linters can be run individually within the backend or frontend folders.

Internationalization 🌐

Generate translation files for Plone and Volto with ease:

make i18n

Credits and acknowledgements 🙏

Generated using Cookieplone (0.9.10) and cookieplone-templates (8063e74) on 2025-11-05 17:52:22.460918. A special thanks to all contributors and supporters!