This is an alternate scaffolding package for Craft 3 CMS projects to Pixel & Tonic's canonical craftcms/craft package.
The project is based on Craft CMS using a unique templates/_boilerplate
system for web/AJAX/AMP pages, and implements a number of technologies/techniques:
- Docker Docker is used for local development; see Setting Up Local Dev below for details
- A base Twig templating setup as described in An Effective Twig Base Templating Setup
- webpack 5 is used for the build system as per An Annotated webpack 4 Config for Frontend Web Development
- TypeScript for strictly typed JavaScript code
- Vue.js 3.0 is used for some of the interactive bits on the website, and Vue.js 3.x allows us to leverage the Composition API
- Tailwind CSS for the site-wide CSS with CSS splitting as per the Speeding Up Tailwind CSS Builds article
- JSON-LD structured data as per Annotated JSON-LD Structured Data Examples
- Google AMP versions of the podcast episode and other pages
- Image transforms are done via a Serverless Image Handler lambda function, as described in the Setting Up Your Own Image Transform Service article
- Static assets are stored in AWS S3 buckets with CloudFront as the CDN, as per the Setting Up AWS S3 Buckets + CloudFront CDN for your Assets article
- Implements a Service Worker via Google's Workbox as per Service Workers and Offline Browsing
- Critical CSS as per Implementing Critical CSS on your website
- Frontend error handling as per Handling Errors Gracefully in Craft CMS
- A custom site module as per Enhancing a Craft CMS 3 Website with a Custom Module
- CLI-based queue as per Robust queue job handling in Craft CMS
- FastCGI Static Cache as per Static Page Caching with Craft CMS
- buddy.works atomic deployments
...and probably a bunch of other stuff too.
The following Craft CMS plugins are used on this site:
- FastCGI Cache Bust - to bust the FastCGI cache whenever entries are modified
- ImageOptimize - for the optimized images and
srcset
s used on the site - Minify - to minify the HTML and inline JS/CSS
- Retour - for setting up 404 redirects
- SEOmatic - for handling site-side SEO
- Twigpack - for loading webpack-generated
manifest.json
resources in a modern way - Typogrify - for smart quotes and other typographic ligatures
- Webperf - for monitoring web performance
You can read more about it in the Setting up a New Craft 3 CMS Project article.
This project package works exactly the way Pixel & Tonic's craftcms/craft package works; you create a new project by first creating & installing the project:
composer create-project nystudio107/craft PATH --no-install
Make sure that PATH
is the path to your project, including the name you want for the project, e.g.:
composer create-project nystudio107/craft craft3 --no-install
We use --no-install
so that the composer packages for the root project are not installed.
You'll need Docker desktop for your platform installed to run the project in local development
- Set up a
.env
file in thecms/
directory, based off of the providedexample.env
- Set up a
.env.sh.
file in thescripts/
directory, based off of the providedexample.env.sh
- Start up the site with
docker-compose up
(the first build will be somewhat lengthy) - Navigate to
http://localhost:8000
to use the site; thewebpack-dev-server
runs off ofhttp://localhost:8080
The CP login credentials are initially set as follows:
Login: andrew@nystudio107.com
Password: letmein
Obviously change these to whatever you like as needed
N.B.: Without authorization & credentials (which are private), the ./docker_pull_db.sh
will not work. It's provided here for instructional purposes
To update to the latest Composer packages (as constrained by the cms/composer.json
semvers), do:
rm cms/composer.lock
docker-compose up
To update to the latest npm packages (as constrained by the buildchain/package.json
semvers), do:
rm buildchain/package-lock.json
docker-compose up
To use Xdebug with VSCode install the PHP Debug extension and use the following configuration in your .vscode/launch.json
:
{
"version": "0.2.0",
"configurations": [
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"port": 9003,
"log": true,
"externalConsole": false,
"pathMappings": {
"/var/www/project/cms": "${workspaceRoot}/cms"
},
"ignore": ["**/vendor/**/*.php"]
}
]
}
Below is the entire intact, unmodified README.md
from Pixel & Tonic's craftcms/craft:
.....
Craft is a flexible and scalable CMS for creating bespoke digital experiences on the web and beyond.
It features:
- An intuitive Control Panel for administration tasks and content creation.
- A clean-slate approach to content modeling and front-end development.
- A built-in Plugin Store with hundreds of free and commercial plugins.
- A robust framework for module and plugin development.
Learn more about it at craftcms.com.
Craft is written in PHP (7+), and built on the Yii 2 framework. It can connect to MySQL (5.5+) and PostgreSQL (9.5+) for content storage.
See the following documentation pages for help installing Craft 3:
- Documentation – Read the official docs.
- Guides – Follow along with the official guides.
- #craftcms – See the latest tweets about Craft.
- Discord – Meet the community.
- Stack Exchange – Get help and help others.
- CraftQuest – Watch unlimited video lessons and courses.
- Craft Link List – Stay in-the-know.
- nystudio107 Blog – Learn Craft and modern web development.