{"id":21462717,"url":"https://github.com/mandrasch/ddev-craftcms-vite","last_synced_at":"2025-07-15T03:31:05.549Z","repository":{"id":164544742,"uuid":"627982752","full_name":"mandrasch/ddev-craftcms-vite","owner":"mandrasch","description":"Demo repository for CraftCMS + DDEV + vite, including support for GitHub codespaces. ","archived":false,"fork":false,"pushed_at":"2024-06-12T15:38:16.000Z","size":1008,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-06-12T21:36:21.664Z","etag":null,"topics":["codespaces","craftcms","ddev","docker","vite"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","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-14T16:24:39.000Z","updated_at":"2024-06-12T15:38:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"df219963-318d-49d1-b91b-aedf66b22d39","html_url":"https://github.com/mandrasch/ddev-craftcms-vite","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mandrasch%2Fddev-craftcms-vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mandrasch%2Fddev-craftcms-vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mandrasch%2Fddev-craftcms-vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mandrasch%2Fddev-craftcms-vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mandrasch","download_url":"https://codeload.github.com/mandrasch/ddev-craftcms-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":["codespaces","craftcms","ddev","docker","vite"],"created_at":"2024-11-23T07:16:32.536Z","updated_at":"2025-07-15T03:31:05.543Z","avatar_url":"https://github.com/mandrasch.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ddev-craftcms-vite \n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/mandrasch/ddev-craftcms-vite/)\n\nSimple demo for [CraftCMS v5](https://craftcms.com/) + [DDEV](https://ddev.com/), including support for [nystudio107/craft-vite](https://github.com/nystudio107/craft-vite). Have fun with it!\n\nSee official tutorial: https://ddev.com/blog/working-with-vite-in-ddev/ - and open PR to craft-vite (https://github.com/nystudio107/craft-vite/pull/92)\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\nSee [How was this created?](#how-was-this-created) for more information.\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-craftcms-vite.git\n# or git clone git@github.com:mandrasch/ddev-craftcms-vite.git\n\ncd ddev-craftcms-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# install craft cms\n# You can remove password from this command if you want to enter it manually\nddev craft install/craft \\\n  --username=\"admin\" \\\n  --email=\"admin@example.com\" \\\n  --password=\"password123\" \\\n  --site-name=\"Testsite\" \\\n  --language=\"en\" \\\n  --site-url='$DDEV_PRIMARY_URL'\n\n# already installed in composer, but needs activation:\nddev craft plugin/install vite\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-craftcms-vite.ddev.site/ \n\n(Second hostname: https://ddev-craftcms-vite-second-page.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-craftcms-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-craftcms-vite)\n\n1. Click the button\n1. Wait for `postCreateCommand.sh` to be finished\n1. Switch Vite port to public in ports tab\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\nSee all steps in this video and blog post:\n\n- https://www.youtube.com/watch?v=ruw24tJHB5s\n- https://dev.to/mandrasch/open-craftcms-in-github-codespaces-via-ddev-21he\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## Simulate production environment\n\n1. `ddev npm run build`\n2. Switch `CRAFT_ENVIRONMENT=dev` to `CRAFT_ENVIRONMENT=production` in `.env`\n\n## How was this created?\n\n1. Followed the official [DDEV Quickstart for CraftCMS](https://ddev.readthedocs.io/en/latest/users/quickstart/#craft-cms)\n\n```bash\n# https://ddev.readthedocs.io/en/latest/users/quickstart/#craft-cms\n# Create a project directory and move into it:\nmkdir my-craft-project\ncd my-craft-project\n\n# Set up the DDEV environment:\nddev config --project-type=craftcms --docroot=web --create-docroot\n\n# Boot the project and install the starter project:\nddev start\nddev composer create -y --no-scripts craftcms/craft\n\n# Run the Craft installer:\nddev craft install\nddev launch\n```\n\n2. Installed [nystudio107/craft-vite](https://github.com/nystudio107/craft-vite):\n\n```bash\n# install via composer\nddev composer require nystudio107/craft-vite\n# activate within craftcms\nddev craft plugin/install vite\n```\n\n3. Exposing the ports via [web_extra_exposed_ports](https://ddev.readthedocs.io/en/latest/users/extend/customization-extendibility/#exposing-extra-ports-via-ddev-router):\n\n```yaml\nweb_extra_exposed_ports:\n  - name: craft-vite\n    container_port: 5173\n    http_port: 5172\n    https_port: 5173\n```\n\n⚠️ `ddev restart` is needed afterwards\n\n4. Following https://nystudio107.com/docs/vite/#using-ddev and extend the previous config of `vite.config.js`:\n\n```javascript\n/* vite.config.js */\n    // for ddev:\n    server: {\n        // respond to all network requests:\n        host: '0.0.0.0',\n        port: 5173,\n        strictPort = true,\n        // Defines the origin of the generated asset URLs during development, this must be set to the\n        // Vite dev server URL and selected Vite port. In general, `process.env.DDEV_PRIMARY_URL` will\n        // give us the primary URL of the DDEV project, e.g. \"https://test-vite.ddev.site\". But since\n        // DDEV can be configured to use another port (via `router_https_port`), the output can also be\n        // \"https://test-vite.ddev.site:1234\". Therefore we need to strip a port number like \":1234\"\n        // before adding Vites port to achieve the desired output of \"https://test-vite.ddev.site:5173\".\n       origin: `${process.env.DDEV_PRIMARY_URL.replace(/:\\d+$/, \"\")}:5173`,\n       // Configure CORS securely for the Vite dev server to allow requests from *.ddev.site domains,\n       // supports additional hostnames (via regex). If you use another `project_tld`, adjust this.\n       cors: {\n         origin: /https?:\\/\\/([A-Za-z0-9\\-\\.]+)?(\\.ddev\\.site)(?::\\d+)?$/,\n       },\n    },\n```\n\n5. Also changes are needed to `config/vite.php` (based on https://nystudio107.com/blog/using-vite-js-next-generation-frontend-tooling-with-craft-cms) \n\n6. Install npm deps, as stated here: https://nystudio107.com/blog/using-vite-js-next-generation-frontend-tooling-with-craft-cms\n\n```bash\nddev npm init -y\nddev npm install -D vite vite-plugin-restart postcss autoprefixer @vitejs/plugin-legacy sass\n```\n\nAdd the following scripts to `package.json`:\n\n```json\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vite build\",\n    \"test\": \"echo \\\"Error: no test specified\\\" \u0026\u0026 exit 1\"\n  },\n```\n\n- [ ] TODO: Is @vitejs/plugin-legacy always needed? (https://nystudio107.com/blog/using-vite-js-next-generation-frontend-tooling-with-craft-cms)\n\n7. Edited `index.twig`, added craft-vite (and created `app.js` + `app.scss` file)\n\n```\n    {{ craft.vite.script(\"src/js/app.js\", false) }} \n```\n\n8. That's it, have fun!\n\n9. Updated from v4 to v5 https://craftcms.com/docs/5.x/upgrade.html\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 [Randy Fay](https://github.com/rfay) for suggestions and feedback! 💚\n\nHuge thanks to ...\n\n- [nystudio107](https://nystudio107.com/) for providing the open source Vite plugin for Craft CMS.\n- [@superflausch](https://github.com/superflausch) for a quick chat about Codespaces + Vite + craft integration.\n- [dotsandlines](https://craftcms.com/partners/dotsandlines) for the opportunity to learn more about codespaces usage.\n- [Ofer Shaal](https://github.com/shaal) for providing DrupalPod (base for Gitpod support)\n\n## Further resources\n\n- Official plugin site: https://plugins.craftcms.com/vite\n- More experiments and notes about DDEV + vite: https://my-ddev-lab.mandrasch.eu/\n- Blog article: [Working with Vite in DDEV - an introduction](https://ddev.com/blog/working-with-vite-in-ddev/)\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-craftcms-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmandrasch%2Fddev-craftcms-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmandrasch%2Fddev-craftcms-vite/lists"}