π Battle-Tested on 50+ Projects
Vactory is a production-ready Drupal headless + Next.js starter developed by VOID, powering enterprise websites for banks, stock exchanges, and healthcare organizations across Morocco and Africa.
Stop reinventing the wheel. Vactory gives you 10+ ready-to-use modules and a proven architecture to start building modern, performant websites 10x faster.
What is Vactory?
Vactory is an opinionated, production-ready starter kit that combines:
- Drupal 10/11 as a headless CMS with extended JSON:API
- Next.js 14+ for the frontend with App Router and React Server Components
- Pre-built modules for common features (News, Events, Forms, etc.)
- DevOps ready with Docker, CI/CD pipelines, and deployment configs
- Enterprise-grade architecture proven on real-world projects
Included Modules
Vactory comes with 10+ pre-built, production-ready modules:
π° News & Blog
Article management with categories, tags, featured content, and related articles
π Events
Event calendar with date filters, RSVP, location mapping, and iCal export
π¬ Media Library
Video, audio, image galleries with responsive optimization and lazy loading
π Store Locator
Google Maps integration with search, filters, directions, and opening hours
π Search & Facets
Elasticsearch/Algolia integration with faceted search and autocomplete
π Webforms
Contact forms, surveys, registrations with validation and email notifications
π Multilingual (i18n)
Multi-language support with URL routing, content translation, and language switcher
π Authentication
OAuth 2.0, JWT, session management, user profiles, and protected routes
π Analytics Ready
Google Analytics, GTM, Matomo integration with GDPR-compliant tracking
βΏ Accessibility
WCAG 2.1 AA compliant components with keyboard navigation and screen reader support
Architecture
Backend: Drupal 10/11
- JSON:API: Extended with custom endpoints and filters
- Dynamic Field: Flexible content modeling with component-based fields
- Media Management: Responsive images, video transcoding, CDN integration
- Workflow & Permissions: Content moderation, editorial workflows, role-based access
- Caching & Performance: Redis, Varnish, BigPipe optimizations
Frontend: Next.js 14+
- App Router: React Server Components, streaming, Suspense
- TypeScript: Full type safety with auto-generated types from Drupal schema
- Tailwind CSS: Utility-first styling with design system
- Image Optimization: Next.js Image with Drupal responsive images
- ISR & SSG: Incremental Static Regeneration for optimal performance
DevOps & Deployment
- Docker: Local dev with DDEV, production with optimized containers
- CI/CD: Drone CI, GitHub Actions, GitLab CI templates
- Vercel/Netlify: One-click frontend deployment
- Platform.sh: Recommended for Drupal hosting
- Monitoring: Sentry error tracking, Lighthouse CI for performance
Real-World Use Cases
1. Attijariwafa Bank: Pan-African Digital Hub
Challenge: Unified digital platform for 25 countries with multi-brand support
Solution:
- Multi-site Drupal with Vactory architecture
- Country-specific front-ends with shared components
- Store locator for 5000+ branches across Africa
- Multi-language support (French, Arabic, English)
Results: 60% faster time-to-market for new country sites, unified brand experience
2. Casablanca Stock Exchange: Real-Time Data
Challenge: Display real-time stock quotes with news and events
Solution:
- Vactory News module for financial news
- Custom WebSocket integration for real-time quotes
- Advanced search with Elasticsearch facets
- Bilingual content (French/Arabic)
Results: 95+ Lighthouse score, sub-second data updates, 40% increase in user engagement
3. FM6SS: Healthcare Multi-Site Ecosystem
Challenge: Healthcare network with multiple hospital sites, appointment booking, and patient portal
Solution:
- Vactory Store Locator for hospital/clinic finder
- Events module for health campaigns and workshops
- Media library for health education videos
- Webforms for appointment requests and patient feedback
Results: 50% reduction in call center load, improved patient satisfaction
Why Choose Vactory?
vs Building from Scratch
| Aspect | From Scratch | With Vactory |
|---|---|---|
| Time to First Feature | 4-6 weeks | 2-3 days |
| News/Blog System | 3-4 weeks | Included |
| Authentication | 2-3 weeks | Included |
| Search & Filters | 3-4 weeks | Included |
| DevOps Setup | 1-2 weeks | Included |
| Total | 13-19 weeks | 2-3 days |
vs Other Starters
| Feature | Vactory | Next Drupal | Contenta CMS |
|---|---|---|---|
| Pre-built Modules | 10+ modules | Basic skeleton | Backend only |
| Production Ready | β 50+ projects | β οΈ Needs work | β οΈ Backend only |
| DevOps Included | β Docker, CI/CD | β DIY | β DIY |
| TypeScript | β Full coverage | β οΈ Partial | N/A |
| Enterprise Support | β VOID team | Community | Community |
Getting Started with Vactory
Prerequisites
- Docker Desktop installed
- Node.js 18+ and npm/yarn
- Basic knowledge of Drupal and React
- Git for version control
Installation Steps
1. Clone Vactory Repository
git clone https://github.com/voidagency/vactory.git my-project cd my-project
2. Start Drupal Backend
cd backend ddev start ddev composer install ddev drush si vactory -y ddev launch
3. Configure Frontend
cd ../frontend cp .env.example .env.local # Edit .env.local with your Drupal URL npm install npm run dev
4. Access Your Site
- Frontend:
http://localhost:3000 - Drupal Admin:
http://localhost:8080/admin - Default credentials displayed after installation
Key Features Deep Dive
Dynamic Field: Component-Based Content
Vactory's killer feature is Dynamic Field, allowing editors to build pages with pre-defined React components:
- Drag-and-drop page builder in Drupal
- React components mapped to Drupal fields
- Live preview of how components will render
- Version control for page layouts
- No code required for content editors
Performance Optimizations
- Image optimization: Automatic WebP conversion, responsive images, lazy loading
- Code splitting: Route-based and component-level splitting
- ISR: Pages regenerate on-demand, always fresh
- CDN integration: Cloudflare, Fastly, or Vercel Edge
- Caching strategy: Redis backend, Varnish reverse proxy
Pricing & Licensing
Vactory is Open Source (GPL v3) and free to use for any project.
Optional Commercial Support:
- Setup and training: Custom quote
- Feature development: Hourly or project-based
- Maintenance & support: Monthly retainer
- SLA-backed hosting: Starting at β¬500/month
Ready to Build with Vactory?
Our VOID team created Vactory and uses it daily on client projects. We can help you:
- Kickstart your project with Vactory architecture
- Custom module development for specific needs
- Training and knowledge transfer for your team
- Performance optimization and scaling strategies
- Long-term support and feature evolution
Additional Resources
- Vactory on GitHub
- Official Vactory Documentation
- Drupal Expertise: our Drupal services
- React Expertise: our React/Next.js services
- All our publications: tech guides and news
Article published on 2025-12-06. Complete guide to Vactory, the production-ready Drupal + Next.js starter by VOID.