Skip to content

Laravel + Vue Fullstack

Full-stack todo application with a PHP/Laravel API and Vue 3/Vite frontend.

Overview
Tech Stack PHP 8.3 / Laravel 11 (backend) + Vue 3 / Vite (frontend)
Services 2 (backend + frontend)
Database PostgreSQL
Pattern Multi-container, PHP full-stack

The appmecca.yaml

containers:
- name: backend
  dockerfile: backend/Dockerfile
  context: backend/
deploy:
- name: backend
  container: backend
  port: 8080
  path: /api
  health_check:
    path: /api/health
- name: frontend
  primary: true
  type: static
  static_site:
    build_command: cd frontend && npm install --no-audit --no-fund && npm run build
    output_dir: frontend/dist
    spa_fallback: true
    index_document: index.html
    error_document: index.html
  environment:
    VITE_API_URL: ${service:backend}
database:
  enabled: true

Key Concepts

PHP Multi-Stage Build

The backend Dockerfile uses a multi-stage build: Composer installs dependencies first, then the application code is copied to a PHP/Apache image. This avoids shipping Composer in the production image.

Laravel Entrypoint

The entrypoint.sh script waits for PostgreSQL to be ready, runs artisan migrate --force, then starts Apache. This ensures the database schema is always up to date before the app starts.

Step-by-Step Deployment

1. Register the app

mecca register git@gitlab.com:appmecca-sample-apps/laravel-vue-fullstack.git \
  -e dev

2. Build the containers

mecca build trigger \
  -e dev \
  -g git@gitlab.com:appmecca-sample-apps/laravel-vue-fullstack.git

3. Deploy

mecca app deploy -e dev laravel-vue-fullstack

4. Verify

# Watch the queue for this app (queue status takes an action id,
# so filter the list by app name instead)
mecca queue list -a laravel-vue-fullstack -e dev

# Once the deploy is complete
mecca app show laravel-vue-fullstack -e dev

curl https://laravel-vue-fullstack-backend.dev.yourdomain.io/api/health
open https://laravel-vue-fullstack-frontend.dev.yourdomain.io

What's Next