madebyshape/craft-3

Craft CMS

, _(*1)

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., _(*2)

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)., _(*3)

1a. Option 1: Composer

If you have composer installed locally, open terminal and run:, _(*4)

composer create-project madebyshape/craft-cms

1b. Option 2: Git

You can clone the repo from Github using Git CLI:, _(*5)

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., _(*6)

2. Start DDEV, Install Craft CMS and dependencies

Firstly, edit .ddev/config.yaml and change the name to your project name., _(*7)

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:, _(*8)

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:, _(*9)

make dev

CLI commands

We've create a few commands to make development easier. All these commands are ran in terminal:, _(*10)

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:, _(*11)

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:, _(*12)

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:, _(*13)

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

Roadmap