docker-octane-vue

Simple skeleton project in order to quickly start a new project with the following technologies with docker-compose and gitpod:

• laravel with octane (swoole)
• vue (with typescript)
• postgres

Technologies:

• laravel
• laravel octane
• vue
• typescript
• postgres
• gitpod
• supabase

Develoment

• Ready to use docker-compose.yml

  or

• CDE using Gitpod

Structure

Each technology is containerized for easy development

* Backend: laravel-octane with swoole
* Worker: laravel queue
* Frontend: vue client
* Database: postgres

Auto refresh

While the containers are running, the backend and frontend will auto refresh when making changes to the application code. No need to rebuild the containers.

Getting Started

Using docker-compose locally

Build the containers

make build

Start developing

make dev

While the containers are running, migrate the database

make migrate

Using gitpod

Workspace

Simply start the workspace with this project, eveyrthing is configured in .gitpod.yml

Deploy options

The options below are free, great for getting things started, and very easy to scale up with their paid plans.

Backend

• Render https://render.com/docs/web-services

Database

• Supabase https://supabase.com

Frontend

• Firebase https://firebase.google.com/docs/hosting
• Render https://render.com/docs/static-sites

Examples

Deploying to render

while using render.yaml https://render.com/docs/blueprint-spec

# A web service
  - type: web
    name: api
    env: docker
    dockerfilePath: ./deploy/php.api.dockerfile # optional
    dockerContext: ./api # optional
    
# A background worker that consumes a queue
  - type: worker
    name: queue
    env: docker
    dockerfilePath: ./deploy/php.queue.dockerfile # optional
    dockerContext: ./api # optional
    
# A static site for the vue app
  - type: web
    name: docker-octane-vue-client
    env: static
    branch: master
    buildCommand: cd client && yarn && yarn build
    staticPublishPath: ./client/dist
    routes:
      - type: rewrite
        source: /*
        destination: /index.html

PhpUnit on VsCode

Update settings.json

update the key in better-phpunit.docker.paths to the local path of this project on your machine.

"better-phpunit.docker.paths": {
     "<project_path_on_your_computer>/api": "/usr/src/api"
},

Debugging with xdebug

• inside xbude.ini, VS code in codespaces, we need to change xdebug.client_host
• run hostname -I | cut -d ' ' -f1 in order to get the ip address of the codespace within the codespace main terminal.
• set it like: xdebug.client_host=172.16.5.4
• you only set it xdebug.client_host=host.docker.internal when you are running VS code in the app, locally.

Github codespaces useful links (if you want to use codespaces instead)

• devcontainer.json specs
• docker-compose example
• intro to codespaces