Outdated

Please see https://github.com/mandrasch/ddev-laravel-vite for latest infos on DDEV + Laravel + Vite. 🚀

ddev-breeze-inertia-vue-starter

Simple demo installation to play around with InertiaJS and Laravel Breeze. It was created with help of the open source tool DDEV for standardized PHP environments. It can be launched in your browser (via Gitpod and Gitpod DDEV launcher) or on your local machine (via DDEV-local).

🎥  Watch screencast

A. Launch it in your browser via Gitpod

Just click the "Open in Gitpod" below to play with this starter in your browser! 🚀

After launching the project, run these steps in the Gitpod terminal to create the initial config:

cd ddev-breeze-inertia-vue-starter/ && \
    ddev start && \
    ddev composer install && \
    ddev exec "cat .env.example | sed  -E 's/DB_(HOST|DATABASE|USERNAME|PASSWORD)=(.*)/DB_\1=db/g' > .env" && \
    ddev artisan key:generate && \
    ddev artisan migrate && \
    ddev exec npm install && \
    ddev exec npm run dev && \
    gp preview $(gp url 8080)

Nice, your project should be ready now! 🥳

Start exploring by modifying the file ddev-breeze-inertia-vue-starter/resources/js/Pages/Welcome.vue. If you change something, you need to run ddev exec npm run dev again and reload the browser window inside Gitpod.

You can run ddev exec npm run watch as well to watch automatically for changes.

Troubleshooting

You don't see the Simple Browser?

Your project runs on port 8080. To view it in the Gitpod Simple Browser you can run gp preview $(gp url 8080) in terminal. You can click on the "Ports" menu in the gitpod taskbar as well to figure out the url:

B. Use it on your local workspace:

• Pull this repository
• Install DDEV if you haven't, e.g. brew install drud/ddev/ddev, see docs
• Run these initial steps (only needed for first time):

ddev start
ddev composer install
ddev exec "cat .env.example | sed  -E 's/DB_(HOST|DATABASE|USERNAME|PASSWORD)=(.*)/DB_\1=db/g' > .env"
ddev artisan key:generate
ddev artisan migrate
ddev exec npm install
ddev exec npm run dev

Run ddev launch to open your new site.

You can run ddev exec npm run watch to watch automatically for changes. Start exploring by modifying the file ddev-breeze-inertia-vue-starter/resources/js/Pages/Welcome.vue for example.

---

How was this created?

This repository was simply created by following the DDEV Laravel Composer Quickstart and adapting the Laravel Breeze Inertia Vue install commands for DDEV usage. The gitpod integration was made possible via Gitpod DDEV launcher by rfay.

DDEV Laravel Composer Quickstart

mkdir my-laravel-app
cd my-laravel-app
ddev config --project-type=laravel --docroot=public --create-docroot
ddev start
ddev composer create --prefer-dist laravel/laravel
ddev exec "cat .env.example | sed  -E 's/DB_(HOST|DATABASE|USERNAME|PASSWORD)=(.*)/DB_\1=db/g' > .env"
ddev exec "php artisan key:generate"

See: https://ddev.readthedocs.io/en/stable/users/cli-usage/#laravel-composer-setup-example

Breeze & Inertia (& vue ssr), modified for DDEV:

ddev composer require laravel/breeze --dev
ddev artisan breeze:install vue --ssr
ddev npm install
ddev npm run dev
ddev artisan migrate
ddev launch

See: https://laravel.com/docs/9.x/starter-kits#breeze-and-inertia

GitPod Button

Created via ddev-gitpod-launcher by rfay.

Connect with the DDEV community?

Join DDEV community discord!

TODOs

• Figure out if we can use browsersync in Gitpod to reload the browser automagically.

License

Nothing special added here what would be relevant for copyright, fork and change as you like without attribution to my person. Just added Laravels license (MIT License) to the whole repo to avoid confusion.

The Laravel framework and InertiaJS are open-sourced software licensed under the MIT license.