diff --git a/.ddev/config.yaml b/.ddev/config.yaml index 9942e1d..a2a60fa 100644 --- a/.ddev/config.yaml +++ b/.ddev/config.yaml @@ -14,10 +14,11 @@ database: use_dns_when_possible: true composer_version: "2" web_environment: + - GITPOD_WORKSPACE_URL - CODESPACES - CODESPACE_NAME - GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN -nodejs_version: "20" +nodejs_version: "20.13.1" corepack_enable: false web_extra_exposed_ports: - name: craft-vite diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 25409dd..f06f71d 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -26,7 +26,7 @@ "label": "web https" }, // our custom vite port for ddev + codespaces - "5174":{ + "5173":{ "label": "vite" } }, diff --git a/.devcontainer/postCreateCommand.sh b/.devcontainer/postCreateCommand.sh index 6d2af35..041735a 100755 --- a/.devcontainer/postCreateCommand.sh +++ b/.devcontainer/postCreateCommand.sh @@ -21,6 +21,7 @@ wait_for_docker() { wait_for_docker +# TODO: remove, might not be needed (auto-detected) # https://github.com/ddev/ddev/pull/5290#issuecomment-1689024764 ddev config global --omit-containers=ddev-router @@ -30,35 +31,17 @@ ddev debug download-images # avoid errors on rebuilds ddev poweroff -# Workaround for vite: -# We expose port 5174 for vite on codespaces, because ddev-router is not used on codespace instances. -# Routing is handled by codespaces itself. This will create an additional config file for DDEV -# which will expose port 5174. This port needs to be set to public + HTTPS manually in ports tab, -# otherwise CORS errors will occur. See config/vite.php and vite.config.js as well. - -if [ ! -f ".ddev/docker-compose.codespaces-vite.yaml" ]; then - echo "Creating vite port workaround file for port exposing ..." - # create workaround file for port exposing (if it does not exist yet) - # info: this file should not be commited to git since it shouldn't be used on local DDEV - cat >.ddev/docker-compose.codespaces-vite.yaml < 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 +See creation log via 'CMD + P > 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: - `SHIFT + CMD + P > Codespaces: Full rebuild` Containers and db will be deleted. -#### Could not connect to a docker provider - -The error `Could not connect to a docker provider. Please start or install a docker provider.` occurs from 1 time out of 5, could not figure out why exactly yet. Please always make sure you're using `"ghcr.io/devcontainers/features/docker-in-docker:2": {},`, not v1. - -- Posted it here: https://github.com/orgs/community/discussions/63776 - -#### Disk space errors - -Also `Your docker install has only 2163760 available disk space, less than 5000000 warning level (94% used). Please increase disk image size. ` errors occur from time to time as well. - -### Technical background: workaround for vite port - -Since the ddev router is not used on codespaces, the vite setup requires some adjustments. To access vite we expose another port (5174) via `.ddev/docker-compose.codespaces-vite.yaml`. This file is generated on codespace start up (and gitignored). - -We needed to adjust some config values in `config/vite.php` and `vite.config.js` as well when codespaces is used. If codespace is used, the new port 5174 needs to be used (instead of the port 5173 for local DDEV setups). - -I implemented this via `.env`. - -See `.devcontainers/postCreateCommand.sh` for all steps. - - - ## Simulate production environment 1. `ddev npm run build` 2. Switch `CRAFT_ENVIRONMENT=dev` to `CRAFT_ENVIRONMENT=production` in `.env` - ## How was this created? 1. Followed the official [DDEV Quickstart for CraftCMS](https://ddev.readthedocs.io/en/latest/users/quickstart/#craft-cms) @@ -187,18 +185,31 @@ Add the following scripts to `package.json`: 8. Updated from v4 to v5 https://craftcms.com/docs/5.x/upgrade.html +## Reset the demo + +```bash +# delete without snapshot +ddev delete -O +# reset files, beware: deletes all untracked files! +git clean -fdx +# reset files, but not .ddev +git clean -fdx -e .ddev/ +``` + ## Acknowledgements Thanks to the DDEV maintainers and DDEV open source community, especially [Randy Fay](https://github.com/rfay) for suggestions and feedback! 💚 -- Thanks to [@superflausch](https://github.com/superflausch) for a quick chat about Codespaces + vite + craft integration. -- Thanks to [dotsandlines](https://craftcms.com/partners/dotsandlines) for the opportunity to learn more about codespaces usage. +Huge thanks to ... + +- [nystudio107](https://nystudio107.com/) for providing the open source Vite plugin for Craft CMS. +- [@superflausch](https://github.com/superflausch) for a quick chat about Codespaces + Vite + craft integration. +- [dotsandlines](https://craftcms.com/partners/dotsandlines) for the opportunity to learn more about codespaces usage. +- [Ofer Shaal](https://github.com/shaal) for providing DrupalPod (base for Gitpod support) ## Further resources -- https://nystudio107.com/blog/using-vite-js-next-generation-frontend-tooling-with-craft-cms -- https://github.com/szenario-fordesigners/craft-vite-starter / https://twitter.com/thomasbendl/status/1628741476355112962 -- docker, but not ddev: https://github.com/nystudio107/spin-up-craft +- Official plugin site: https://plugins.craftcms.com/vite More experiments and notes about DDEV + vite: https://my-ddev-lab.mandrasch.eu/ diff --git a/config/vite.php b/config/vite.php index c2395b3..fb46200 100644 --- a/config/vite.php +++ b/config/vite.php @@ -6,13 +6,18 @@ // Adjustments for DDEV (local) or DDEV + codespaces // (if you want to detect if DDEV is used, you can check App::env('IS_DDEV_PROJECT')) -// default, local DDEV (via ddev-router) +// defaults for local DDEV $port = 5173; $devServerPublic = App::env('PRIMARY_SITE_URL') . ':' . $port; -// DDEV + codespaces (without ddev-router), switch to port 5174 +// Gitpod support +if (App::env('GITPOD_WORKSPACE_URL') !== null) { + $gitpodWorkspaceUrl = App::env('GITPOD_WORKSPACE_URL'); + $devServerPublic = str_replace("https://", "https://5173-", $gitpodWorkspaceUrl); +} + +// Codespaces support if (App::env('CODESPACES') === true) { - $port = 5174; $devServerPublic = "https://" . App::env('CODESPACE_NAME') . "-" . $port . "." . App::env('GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN'); } diff --git a/vite.config.js b/vite.config.js index ce7458e..421c89f 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,45 +1,34 @@ // https://www.npmjs.com/package/vite-plugin-restart import ViteRestart from 'vite-plugin-restart'; -// TODO: import legacy from '@vitejs/plugin-legacy' ? -// (https://nystudio107.com/blog/using-vite-js-next-generation-frontend-tooling-with-craft-cms) - -// defaults, local DDEV (with ddev-router) +// defaults, local DDEV let port = 5173; let origin = `${process.env.DDEV_PRIMARY_URL}:${port}`; -// for debugging: -// console.log(process.env); +// Gitpod support +// env var GITPOD_WORKSPACE_URL needs to be passed through to ddev, see .ddev/config.yaml +if (Object.prototype.hasOwnProperty.call(process.env, 'GITPOD_WORKSPACE_URL')) { + origin = `${process.env.GITPOD_WORKSPACE_URL}`; + origin = origin.replace('https://', 'https://5173-'); + console.log(`Gitpod detected, set origin to ${origin}`); +} -// DDEV + codespaces (without ddev-router), switch port to 5174 -// (you need to switch the port manually to public on codespaces) +// Codespaces support +// env var GITPOD_WORKSPACE_URL needs to be passed through to ddev, see .ddev/config.yaml +// You need to switch the port manually to public on codespaces after launching if (Object.prototype.hasOwnProperty.call(process.env, 'CODESPACES')) { - console.log('Codespaces environment detected ...'); - - port = 5174; origin = `https://${process.env.CODESPACE_NAME}-${port}.${process.env.GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}`; - - console.log('Setting config to ', {port,origin}); - + console.log('Codespaces environment detected, setting config to ', {port,origin}); console.log("Please check that this can be opened via browser after you run 'ddev npm run dev':"); console.log(origin + '/src/js/app.js'); - console.log('If it can\'t be opened, please switch the vite port to public in the ports tab.'); - + console.log('If it can\'t be opened, please switch the Vite port to public in the ports tab.'); /* console.log({ 'CODESPACES' : process.env?.CODESPACES, 'CODESPACE_NAME' : process.env?.CODESPACE_NAME, 'GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN': process.env?.GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN });*/ -}else{ - console.log('Local DDEV detected',{ - port, origin - }) } - -// Last step is to set 5173 to PUBLIC in the codespace, else you will get a CORS error. -// Unfortunately you cannot specify this in the .devcontainer - export default ({ command }) => ({ // 'vite' is always command = 'serve', other command is 'build' base: command === 'serve' ? '' : '/dist/',