Develop with CraftCMS + vite + DDEV in Codespaces

#ddev #php #craftcms #vite

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!