Klaro Custom Setup

This repository provides a customized setup of the Klaro! cookie consent manager, optimized for integration with Laravel or any web project.
It uses Vite for bundling, Docker for containerized development, and includes a Git submodule for a Klaro fork.

---

📁 Project Structure

klaro-custom/
├── klaro/              # Klaro fork (Git submodule)
├── config/             # Custom Klaro configuration (klaro-config.js)
├── src/                # Application entry point (index.js)
├── styles/             # Custom CSS (optional overrides)
├── public/             # Vite build output (auto-generated)
├── index.html          # Local test file
├── Dockerfile          # Docker image definition
├── docker-compose.yml  # Docker Compose setup
├── Makefile            # Command shortcuts for build/dev
└── README.md

---

🚀 Getting Started

Prerequisites

• Node.js (Recommended: v18 or v20 LTS)
• Docker & Docker Compose
• Git

---

🧱 1. Clone the Repository

git clone --recurse-submodules https://github.com/your-user/klaro-custom.git
cd klaro-custom

If you forgot --recurse-submodules, run:

git submodule init
git submodule update

---

🛠️ 2. Local Development (without Docker)

For quick testing or development:

npm install
cd klaro
npm install && npm run build
cd ..
npm run dev

Open your browser at http://localhost:5173

---

🐳 3. Development with Docker

To use the full Docker setup:

docker compose up --build

Access at http://localhost:5173

---

📦 Available Makefile Commands

Command	Description
make build	Run a production build with Vite
make dev	Start the Vite dev server (hot reload)
make install	Install Node.js dependencies
make shell	Open an interactive Docker shell
make clean	Remove the /public build folder
make rebuild	Rebuild the Docker image

---

⚙️ Klaro Configuration

Customize your consent settings in:

config/klaro-config.js

Example configuration:

export default {
  elementID: 'klaro',
  cookieName: 'klaro',
  lang: 'en',
  translations: {
    en: {
      consentModal: {
        title: 'Privacy settings',
        description: 'Manage your cookie preferences here.',
      },
    },
  },
  services: [],
};

---

🧩 Integration with Laravel

After running the production build (npm run build or make build), you can:

• Copy the generated files from /public to your Laravel public/klaro/ directory
• Or mount the /public folder via Docker volume

Blade template integration:

<script src="{{ asset('klaro/klaro.js') }}" defer></script>
<link rel="stylesheet" href="{{ asset('klaro/klaro.css') }}">

---

📜 License

This project incorporates Klaro! by KIProtect GmbH, licensed under the MIT license.

---

🙋 Need Help?

Open a GitHub issue or contact the project maintainers.