Simple demo for CraftCMS v5 + DDEV, including support for nystudio107/craft-vite. Have fun with it!
You can run this
See How was this created? for more information.
Install DDEV and run the following commands:
git clone https://github.com/mandrasch/ddev-craftcms-vite.git
# or git clone git@github.com:mandrasch/ddev-craftcms-vite.git
cd ddev-craftcms-vite/
# automatically creates .env with correct db settings
ddev start
# install dependencies
ddev composer install && ddev npm install
# install craft cms
# You can remove password from this command if you want to enter it manually
ddev craft install/craft \
--username="admin" \
--email="admin@example.com" \
--password="password123" \
--site-name="Testsite" \
--language="en" \
--site-url='$DDEV_PRIMARY_URL'
# already installed in composer, but needs activation:
ddev craft plugin/install vite
# Open your website in browser, ...
ddev launch
# start the local dev server (Vite), ...
ddev npm run dev
# ... and hit reload in browser. Vite should work now 🥳
After this first time setup, only ddev npm run dev
is needed (after ddev start
).
Your site is accessible via https://ddev-laravel-vite.ddev.site.
You could also import a database dump via ddev import-db --file=dump.sql.gz
or use ddev pull
to setup a project. Use ddev sequelace
to view your database.
Just hit the button, wait for the initial setup and start developing:
⚠️ Disclaimer - May 2024: Codespaces is currently a bit buggy on startups, see https://github.com/devcontainers/features/issues/977.
postCreateCommand.sh
to be finishedddev npm run dev
ddev launch
in future (currently small bug to be fixed)).See all steps in this video and blog post:
The port switch can take a minute. Just wait if it doesn't work instantly.
Access control panel via /admin
(or use in future ddev launch /admin
, when small bug is fixed in ddev).
Login via user admin
and password newPassword
.
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.
ddev npm run build
CRAFT_ENVIRONMENT=dev
to CRAFT_ENVIRONMENT=production
in .env
# https://ddev.readthedocs.io/en/latest/users/quickstart/#craft-cms
# Create a project directory and move into it:
mkdir my-craft-project
cd my-craft-project
# Set up the DDEV environment:
ddev config --project-type=craftcms --docroot=web --create-docroot
# Boot the project and install the starter project:
ddev start
ddev composer create -y --no-scripts craftcms/craft
# Run the Craft installer:
ddev craft install
ddev launch
# install via composer
ddev composer require nystudio107/craft-vite
# activate within craftcms
ddev craft plugin/install vite
web_extra_exposed_ports:
- name: craft-vite
container_port: 5173
http_port: 5172
https_port: 5173
⚠️ ddev restart
is needed afterwards
vite.config.js
:/* vite.config.js */
// for ddev:
server: {
// respond to all network requests:
host: '0.0.0.0',
port: 5173,
strictPort = true,
// origin is important, see https://nystudio107.com/docs/vite/#vite-processed-assets
origin: `${process.env.DDEV_PRIMARY_URL}:5173`
},
ddev npm init -y
ddev npm install -D vite vite-plugin-restart postcss autoprefixer @vitejs/plugin-legacy sass
Add the following scripts to package.json
:
"scripts": {
"dev": "vite",
"build": "vite build",
"test": "echo \"Error: no test specified\" && exit 1"
},
index.twig
, added craft-vite (and created app.js
+ app.scss
file) {{ craft.vite.script("src/js/app.js", false) }}
That's it, have fun!
Updated from v4 to v5 https://craftcms.com/docs/5.x/upgrade.html
# 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/
Thanks to the DDEV maintainers and DDEV open source community, especially Randy Fay for suggestions and feedback! 💚
Huge thanks to ...
Connect with the DDEV community on Discord