Develop with CraftCMS + vite + DDEV in Codespaces
Tags: ddev, php, craftcms, vite
Published: 2023-08-12 11:30:15

In the last weeks I experimented with GitHub Codespaces + [DDEV](https://ddev.com). 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](https://github.com/mandrasch/ddev-craftcms-vite)

{% embed https://www.youtube.com/watch?v=ruw24tJHB5s %}

**1. Open the [repository](https://github.com/mandrasch/ddev-craftcms-vite) in Codespaces**

There is a button in the README to launch it:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kiazhy1d2l5gspkiz7ds.png)

You can also use this dropdown menu on repositories:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4g0i61cnuevmq380gtqe.png)

Select the defaults:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc658s04dxja00xxopyz.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vfmmbp9ub8p0161hbcp.png)

The file [`.devcontainer/postCreateCommand.sh`](https://github.com/mandrasch/ddev-craftcms-vite/blob/main/.devcontainer/postCreateCommand.sh) will handle all the setup steps automatically:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uarvdc4de82g73xb67ky.png)

- 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":

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdvn6653o69nd2u4wjwl.png)

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).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bd83m1g94my94xj3th58.png)

**3. Start vite**

Now it's time to run the vite dev server:

`ddev npm run dev`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90s67ugbt6zgs9ctv8qa.png)

That's it, happy developing!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lmp89bjr9ofvu2x065x.png)

You can launch the website in a new browser window:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vuzmuf5lzz53wilt4nx9.png)

Or use the preview (Simple Browser) in the editor:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72t95ieh589bo6qib9xi.png)

_Normally you could use `ddev launch` as well, but there is a [small fix](https://github.com/ddev/ddev/issues/5256) needed since GitHub changed their forwarding domain in last week. This will work in future_

**Codespaces environment variables**

Codespaces offer some [default environment variables](https://docs.github.com/en/codespaces/developing-in-codespaces/default-environment-variables-for-your-codespace)  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](https://discord.gg/hCZFfAMc5k) to connect with the community. My personal notes for various DDEV topics can be found here: [My DDEV Lab](https://my-ddev-lab.mandrasch.eu/). Have fun!