Craft CMS 5 Starter

This is a Craft CMS 5.x starter MadeByShape use internally for projects, that we open sourced so anybody can use it.

The Stack

• Craft CMS 5.x Content management system
• DDEV Local development environment
• Vite 5.x Front end build tool with HMR
• Tailwind CSS 3.x Utility-first CSS framework
• Alpine.js 3.x Minimal JS framework
• Mailgun Email API
• Servd Craft CMS first hosting provider

Requirements

• Docker
• DDEV

Features

• Templates
  • Layout templates setup ready with header and footer globals
  • Exception templates for 404, offline/maintenece and generic errors
  • Page templates setup for use with matrix fields
  • Email template for sending prettier system emails (Forgot password etc)
• Config
  • Configs for all Craft CMS plugins
  • Customised general config with required features that hook in to .env vars
• Env
  • Customised .env file with Servd and Mailgun included
• Building
  • HMR
  • CSS and JS minified and purged
  • Favicon is generated and auto inserted into the template
  • Images compressed
  • Sourcemaps generated
• Servd
  • Setup to be used with Servd hosting platform
  • Enabled for using static caching
• Caching
  • Uses Blitz to handle server caching and warming

Plugins

Craft CMS

• Blitz
• Hyper
• SEOMatic
• Vite
• Sprig
• Formie
• Imager X
• Minify
• CKEditor
• Mailgun
• Servd Asset Storage

Tailwind CSS

• Aspect Ratio

Install

Create an empty folder and CD to it in terminal (If you plan to use Option 1 or 2).

1a. Option 1: Composer

If you have composer installed locally, open terminal and run:

composer create-project madebyshape/craft-cms

1b. Option 2: Git

You can clone the repo from Github using Git CLI:

git clone [email protected]:madebyshape/craft-cms.git

1c. Option 3: Manual

Download a copy of this repo to your computer using the Code button above, and choosing Download ZIP. Move these files to your empty folder.

2. Start DDEV, Install Craft CMS and dependencies

Firstly, edit .ddev/config.yaml and change the name to your project name.

Then, there are a few CLI commands (See more) we've created that allow starting DDEV, installing Craft CMS and installing dependencies (Node particularly). The one to get you started:

make install

3. Starting Vite

Once you've followed step 2 and it's successfully ran through the steps, you'll need to start Vite which allows you to start using front end tooling:

make dev

CLI commands

We've create a few commands to make development easier. All these commands are ran in terminal:

Command	Description
make install	Starts DDEV, Install Craft CMS and dependencies.
make setup	Use when starting to work on your project especially if your working in a team.
make dev	Starts Vite development process.
make prod	Run on production to start Vite build process - minify, compress etc.
make clean	Removes composer and node files ready for a clean install.
make update	Smaller command that runs ddev exec php craft update all.
make up 💅	Runs project config apply and migrations apply.
make pull	Pulls a database dump from a remote Servd environment into the local database.

Nice to know

Database

To access the database inside the DDEV environment, you can use TablePlus. You can use the following command to open TablePlus to export/import:

ddev tableplus

Exiting Vite

One thing that confused me in side the terminal was how to exi Vite once running a CLI command like make dev. You can't use ctrl + c like you would in a normal terminal. You need to use:

q + enter

HTTPS recommended

There is a few issues getting Vite, DDEV and Craft CMS running nicely together over HTTP, so always make sure you are using HTTPS. For DDEV just run:

ddev stop --all
mkcert -install
ddev start
ddev launch

Roadmap