{"id":21462722,"url":"https://github.com/mandrasch/ddev-laravel-vite","last_synced_at":"2025-07-15T03:31:06.256Z","repository":{"id":214547066,"uuid":"627891956","full_name":"mandrasch/ddev-laravel-vite","owner":"mandrasch","description":"Just a plain Laravel v11 installation with DDEV, including support for Vite.","archived":false,"fork":false,"pushed_at":"2024-05-20T10:27:31.000Z","size":194,"stargazers_count":19,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-21T09:24:05.561Z","etag":null,"topics":["ddev","docker","laravel","php","vite"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mandrasch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-14T12:34:06.000Z","updated_at":"2024-05-20T10:27:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"355963ff-1b5b-4c14-bdc5-3416af8ac8a4","html_url":"https://github.com/mandrasch/ddev-laravel-vite","commit_stats":null,"previous_names":["mandrasch/ddev-laravel-vite"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mandrasch%2Fddev-laravel-vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mandrasch%2Fddev-laravel-vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mandrasch%2Fddev-laravel-vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mandrasch%2Fddev-laravel-vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mandrasch","download_url":"https://codeload.github.com/mandrasch/ddev-laravel-vite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226012189,"owners_count":17559651,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ddev","docker","laravel","php","vite"],"created_at":"2024-11-23T07:16:33.258Z","updated_at":"2025-07-15T03:31:06.250Z","avatar_url":"https://github.com/mandrasch.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ddev-laravel-vite\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/mandrasch/ddev-laravel-vite/)\n\nDemo repository for Laravel v11 with [DDEV](https://ddev.com/), including Vite support. \n\nBased on the tutorial [Install Laravel with Vite support in DDEV (Docker)](https://dev.to/mandrasch/install-laravel-with-vite-support-in-ddev-docker-4lmh). See https://ddev.com/blog/working-with-vite-in-ddev/ as well for all information.\n\nYou can run this \n\n1. on [your local laptop](#1-local-setup)\n1. via [Gitpod in your browser](#2-gitpod)\n1. via [Codespaces (experimental)](#3-codespaces-experimental)\n\n## 1. Local setup \n\nInstall [DDEV](https://ddev.com/get-started/) and run the following commands:\n\n```bash\ngit clone https://github.com/mandrasch/ddev-laravel-vite.git\n# or git clone git@github.com:mandrasch/ddev-laravel-vite.git\n\ncd ddev-laravel-vite/\n\n# automatically creates .env with correct db settings\nddev start\n\n# install dependencies\nddev composer install \u0026\u0026 ddev npm install\n\n# create key for .env\nddev artisan key:generate\n\n# create db tables\nddev artisan migrate\n\n# Open your website in browser, ...\nddev launch\n\n# start the local dev server (Vite), ...\nddev npm run dev\n\n# ... and hit reload in browser. Vite should work now 🥳\n```\n\nAfter this first time setup, only `ddev npm run dev` is needed (after `ddev start`). \n\nYour site is accessible via https://ddev-laravel-vite.ddev.site.\n\nYou could also import a database dump via `ddev import-db --file=dump.sql.gz` or use [`ddev pull`](https://ddev.readthedocs.io/en/stable/users/providers/) to setup a project. Use `ddev sequelace` to view your database.\n\n## 2. Gitpod\n\nJust hit the button, wait for the initial setup and start developing:\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/mandrasch/ddev-laravel-vite/)\n\n## 3. Codespaces (experimental)\n\n⚠️ Disclaimer - May 2024: Codespaces is currently a bit buggy on startups, see https://github.com/devcontainers/features/issues/977.\n\n[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/mandrasch/ddev-laravel-vite)\n\n1. Click the button\n1. Wait for `postCreateCommand.sh` to be finished\n1. Switch Vite port to public in ports tab (can't be automated currently)\n1. Run `ddev npm run dev`\n1. Open site (web http) via ports tab (or use `ddev launch` in future (currently small bug to be fixed)).\n\nThe port switch can take a minute. Just wait if it doesn't work instantly.\n\nAccess control panel via `/admin` (or use in future `ddev launch /admin`, when small bug is fixed in ddev).\n\nLogin via user `admin` and password `newPassword` .\n\n### Troubleshooting\n\nSee creation log via 'CMD + P \u003e View creation log' if errors occur. Unfortunately there is no general error notification when this fails. But if there is only one port in the ports tab installation did not succeed. Sometimes only a full rebuild solve the problems, use:\n\n- `SHIFT + CMD + P \u003e Codespaces: Full rebuild` \n\nContainers and db will be deleted.\n\n## How was this created?\n\nTutorial: [Install Laravel with Vite support in DDEV (Docker)](https://dev.to/mandrasch/install-laravel-with-vite-support-in-ddev-docker-4lmh). \n\n1. Installed Laravel in DDEV via [quickstart documentation](https://ddev.readthedocs.io/en/latest/users/quickstart/#laravel).\n\n```bash\nddev config --project-type=laravel --docroot=public --php-version=\"8.2\" --database=\"mysql:8.0\" --nodejs-version=\"20\"\nddev start\nddev composer create \"laravel/laravel:^11\"\nddev artisan key:generate\n\n# open in browser\nddev launch\n```\n\n2. After that we need to expose the vite port of the DDEV (docker) container so that it can be reached from outside (= from our computer) while developing. The http_port does not really matter. \n\nAdd this to your `.ddev/config.yaml`:\n\n```yaml \n# .ddev/config.yaml\nweb_extra_exposed_ports:\n  - name: vite\n    container_port: 5173\n    http_port: 5172\n    https_port: 5173\n```\n\n⚠️  A `ddev restart` is needed after that.\n\n_See [Exposing Extra Ports via ddev-router](https://ddev.readthedocs.io/en/latest/users/extend/customization-extendibility/#exposing-extra-ports-via-ddev-router) for more information. You'll need at least DDEV [v1.20.0](https://github.com/ddev/ddev/releases/tag/v1.20.0) for this, before it was done via docker-compose files ([example](https://github.com/torenware/ddev-viteserve/blob/master/docker-compose.viteserve.yaml))._\n\n3. The [`vite.config.js`](https://github.com/mandrasch/ddev-laravel-vite/blob/main/vite.config.js) needs some modifications as well. These `.server` options were added:\n\n```js\nimport laravel from 'laravel-vite-plugin';\n\nconst port = 5173;\nconst origin = `${process.env.DDEV_PRIMARY_URL}:${port}`;\n\nexport default defineConfig({\n    plugins: [\n        laravel({\n            input: ['resources/css/app.css', 'resources/js/app.js'],\n            refresh: true,\n        }),\n    ],\n    server: {\n        // respond to all network requests\n        host: '0.0.0.0',\n        port: port,\n        strictPort: true,\n        // Defines the origin of the generated asset URLs during development,\n        // this will also be used for the public/hot file (devserver URL)\n        origin: origin\n    }\n});\n\n```\n\n4. Then we need to follow the [Asset Bundling (Vite)](https://laravel.com/docs/10.x/vite#loading-your-scripts-and-styles) documentation and add the output to the `welcome.blade.php` template.\n\n```blade\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"{{ str_replace('_', '-', app()-\u003egetLocale()) }}\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n    \u003c!-- Include JS and CSS via vite, see https://laravel.com/docs/10.x/vite --\u003e\n    @vite('resources/js/app.js')\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003ch1\u003eHello, vite!\u003c/h1\u003e\n    \u003cp\u003eLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\u003c/p\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n5. Add the CSS to to the `resources/js/app.js` file:\n\n```js\n// import css:\nimport '../css/app.css'\n\nimport './bootstrap';\n```\n\n6. If you now run `ddev npm run dev` vite should handle the reloading. Test with the following in `app.css\n\n```css\np{\n    color:red !important;\n}\n```\n\n## Deployment / production\n\nYou can simulate the production environment like this:\n\n1. Run `ddev npm run build`\n2. Set `APP_ENV=local` to `APP_ENV=production` in `.env`\n\nYour styles will be imported like this:\n\n```html\n\u003clink rel=\"preload\" as=\"style\" href=\"https://ddev-laravel-vite.ddev.site/build/assets/app-3845d7e3.css\" /\u003e\n```\n\n## Reset the demo\n\n```bash\n# delete without snapshot\nddev delete -O\n# reset files, beware: deletes all untracked files!\ngit clean -fdx\n# reset files, but not .ddev\ngit clean -fdx -e .ddev/\n```\n\n## Acknowledgements\n\nThanks to the DDEV maintainers and DDEV open source community, especially [Ofer Shaal](https://github.com/shaal) for providing DrupalPod, [Randy Fay](https://github.com/rfay) and [tyler36](https://github.com/tyler36) for suggestions and feedback! 💚\n\n## Further resources\n\n- Other Laravel demos: https://github.com/mandrasch?tab=repositories\u0026q=ddev-laravel\u0026type=\u0026language=\u0026sort=\n- https://github.com/tyler36/lara10-base-demo\n\nMore experiments and notes about DDEV + vite: https://my-ddev-lab.mandrasch.eu/\n\nConnect with the DDEV community on [Discord](https://discord.gg/hCZFfAMc5k)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmandrasch%2Fddev-laravel-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmandrasch%2Fddev-laravel-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmandrasch%2Fddev-laravel-vite/lists"}