ddev-craftcms-vite

This repository is a template for DDEV + CraftCMS + Vite project for local development.

This implementation makes heavy use of default and added DDEV environment variables to configure the project. The following environment variables are used:

• DDEV_PRIMARY_URL: used both on vite.config.ts and ./cms/.env to configure the CraftCMS PRIMARY_SITE_URL and in Vite's server configuration.
• DDEV_PROJECT: used to configure the CraftCMS PRIMARY_SITE_NAME
• VITE_PRIMARY_PORT: used to configure the port on Vite's server and Vite Craft Plugin on ./cms/config/vite.php

Components of the repository

• The base setup to run CraftCMS + Vite with DDEV
• Github actions for building an deploying the site in Forge.

The Project:

The project is based on Craft CMS using the templates/_boilerplate system for web/AJAX pages from nystudio107/craft starter, and implements a number of technologies/techniques:

• Leverages DDEV for both PHP and Node development environments.
• A base Twig templating setup as described in An Effective Twig Base Templating Setup, with some minor modifications.
• Vite is used for the build system.
• TypeScript for strictly typed JavaScript code.
• TailwindCSS for the site-wide CSS.
• Static assets are stored in Digital Ocean Spaces.
• Critical CSS using the rollup-plugin-critical
• Frontend error handling as per Handling Errors Gracefully in Craft CMS.
• Github Actions for atomic deployments.

...and a bunch of other stuff too.

The following Craft CMS plugins are used on this site:

• Mailgun
• Redactor
• BlurHash
• Vite
• Empty Coalesce
• Retour
• SEOmatic
• Typogrify
• Minify
• Relax
• Typed Link Field
• DigitalOcean Spaces Volume
• Navigation
• Super Table

The DDEV is configured with PHP 8.1, MySQL 8.0 and Node 16.

Requirements

DDEV installed and running on your machine. Installation instructions

Getting Started

You can create a new repo from this one by clicking the template button in the top right corner of the page.

After creating your new repo and cloning it locally:

1. Create the new template repository by using the template button.
2. Clone the new repository to your local machine.
3. Replace craft-vite in .ddev/confi.yaml with your local project name.
4. Start DDEV with ddev start.
5. Run ddev install-craft to install CraftCMS.

The ddev install-craft command will perform the following actions:

• Copy the env.example file to .env, if it doesn't exist.
• Create the storage directory, if it doesn't exist.
• Setup Craft's CRAFT_APP_ID, CRAFT_SECURITY_KEY and setup the database with DDEV's default configuration.
• Install CraftCMS with all defaults plus:
  • Email: info@hellodative.com
  • Password: changeme.
  • Site name: $PRIMARY_SITE_NAME
  • Site URL: $PRIMARY_SITE_URL
• Perform Craft Plugin installs.

Using dative/ddev-craftcms-vite

Once installed and started, you can run ddev yarn to install the node dependencies and ddev yarn dev to start the dev server.

Other useful commands:

• ddev yarn lint: run the linter.
• ddev yarn lint:fix: run the linter and fix the errors.
• ddev yarn build: build the production assets.
• ddev yarn build:critical: build the production assets for CI. It uses CRITICAL_URL env variable to generate the critical CSS.

And the Craft/DDEV commands:

• ddev install-craft: run the installer.
• ddev craft: run the Craft CLI.

Roadmap

• Auto detect either the fork repository name or the local directory name, and pipe as DDEV project name.

Thanks

Big thanks to Andrew Welch for his awesome plugins and articles from which this repository is heavily based on.

Brought to you by Dative