In the last weeks I experimented with GitHub Codespaces + DDEV. Here is a first demo repository. It supports the development with vite, which was the tricky part. Have fun with it!
Repo: mandrasch/ddev-craftcms-vite
1. Open the repository in Codespaces
There is a button in the README to launch it:
You can also use this dropdown menu on repositories:
Select the defaults:
The file .devcontainer/postCreateCommand.sh will handle all the setup steps automatically:
- starts ddev project
- adds workaround for vite port exposing (since ddevs internal router is not used on codespaces)
- installs composer & npm packages
- installs craft cms via CLI
If you already have a live site, you could also pull in the database and assets (via ddev pull) instead of starting with a fresh install.
2. Switch the vite port to public
After the initial setup finished, we need to setup one more thing: Change the vite port visibility to "public":
This change sometimes takes a minute or two to have effect.
If we don't switch it to public, there will be CORS errors and javascript and styles can't be loaded via vite.
Due to security reasons, GitHub codespaces does not allow to this to be set automatically right now. We need to switch this manually each time.
The port type for vite should be HTTP (set by default).
3. Start vite
Now it's time to run the vite dev server:
ddev npm run dev
That's it, happy developing!
You can launch the website in a new browser window:
Or use the preview (Simple Browser) in the editor:
Normally you could use ddev launch as well, but there is a small fix needed since GitHub changed their forwarding domain in last week. This will work in future
Codespaces environment variables
Codespaces offer some default environment variables like CODESPACES=true, CODESPACE_NAME, etc. You can inherit them in .ddev/config.yaml to pass them into the ddev containers with this neat trick:
# codespaces: inherit env vars from host environment, thx rfay!
web_environment:
- CODESPACES
- CODESPACE_NAME
- GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN
I used this to access these in vite.config.js as well as config/vite.php.
Test it yourself:
Repository: https://github.com/mandrasch/ddev-craftcms-vite
Just hit the "Open in Codespaces" button to try it. 🥳
Acknowledgements: Thanks very much to Randy Fay (DDEV maintainer) for guidance and suggestions on this.
Join the DDEV discord to connect with the community. My personal notes for various DDEV topics can be found here: My DDEV Lab. Have fun!
Top comments (1)
Excellent Job