README

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 git@github.com: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

madebyshape / craft-3

Maintainers

Details