nystudio107 / craft
nystudio107 Craft 3 CMS scaffolding project
Fund package maintenance!
khalwat
Installs: 3 473
Dependents: 0
Suggesters: 0
Security: 0
Stars: 291
Watchers: 20
Forks: 85
Language:Twig
Type:project
- dev-craft-vite
- 2.5.13
- 2.5.12
- 2.5.11
- 2.5.10
- 2.5.9
- 2.5.8
- 2.5.7
- 2.5.6
- 2.5.5
- 2.5.4
- 2.5.3
- 2.5.2
- 2.5.1
- 2.5.0
- 2.4.55
- 2.4.54
- 2.4.53
- 2.4.52
- 2.4.51
- 2.4.50
- 2.4.49
- 2.4.48
- 2.4.47
- 2.4.46
- 2.4.45
- 2.4.44
- 2.4.43
- 2.4.42
- 2.4.41
- 2.4.40
- 2.4.39
- 2.4.38
- 2.4.37
- 2.4.36
- 2.4.35
- 2.4.34
- 2.4.33
- 2.4.32
- 2.4.31
- 2.4.30
- 2.4.29
- 2.4.28
- 2.4.27
- 2.4.26
- 2.4.25
- 2.4.24
- 2.4.23
- 2.4.22
- 2.4.21
- 2.4.20
- 2.4.19
- 2.4.17
- 2.4.16
- 2.4.15
- 2.4.14
- 2.4.13
- 2.4.12
- 2.4.11
- 2.4.10
- 2.4.9
- 2.4.8
- 2.4.7
- 2.4.6
- 2.4.5
- 2.4.4
- 2.4.3
- 2.4.2
- 2.4.1
- 2.3.15
- 2.3.14
- 2.3.13
- 2.3.12
- 2.3.11
- 2.3.9
- 2.3.8
- 2.3.7
- 2.3.5
- 2.3.4
- 2.3.3
- 2.3.2
- 2.3.1
- 2.3.0
- 2.2.13
- 2.2.12
- 2.2.11
- 2.2.10
- 2.2.9
- 2.2.8
- 2.2.7
- 2.2.6
- 2.2.5
- 2.2.4
- 2.2.1
- 2.2.0
- 2.1.1
- 2.0.4
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 1.0.15
- 1.0.14
- 1.0.13
- 1.0.12
- 1.0.11
- 1.0.10
- 1.0.9
- 1.0.7
- 1.0.6
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
- 1.0.0
- dev-develop
- dev-craft-webpack
- dev-craft-gulp
This package is auto-updated.
Last update: 2024-10-27 15:13:41 UTC
README
About nystudio107/craft
This is an alternate scaffolding package for Craft 3 CMS projects to Pixel & Tonic's canonical craftcms/craft package.
Vite buildchain
This project uses a Vite.js for the build system as per Vite.js Next Generation Frontend Tooling + Craft CMS, as opposed to the usual webpack buildchain.
Vite is fast ⚡
The project
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
- Vite.js is used for the build system as per Vite.js Next Generation Frontend Tooling + Craft CMS
- 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 using the @tailwindcss/jit
- 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 using the rollup-plugin-critical
- 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
- Vite - for loading Vite-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.
Using nystudio107/craft
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.
Setting Up Local Dev
You'll need Docker desktop for your platform installed to run devMode in local development
Ensure no other local development environments are running that might have port conflicts, then:
- Start up the site by typing
make dev
in terminal in the project's root directory (the first build will be somewhat lengthy) - Navigate to
http://localhost:8000
to use the site; thevite-dev-server
runs off ofhttp://localhost:3000
Wait until you see the following to indicate that the PHP container is ready:
php_1 | Craft is installed.
php_1 | Applying changes from your project config files ... done
php_1 | [01-Dec-2020 18:38:46] NOTICE: fpm is running, pid 22
php_1 | [01-Dec-2020 18:38:46] NOTICE: ready to handle connections
...and the following to indicate that the Vite container is ready:
vite_1 | vite v2.3.2 dev server running at:
vite_1 |
vite_1 | > Local: http://localhost:3000/
vite_1 | > Network: http://172.22.0.5:3000/
vite_1 |
vite_1 | ready in 1573ms.
The CP login credentials are initially set as follows:
Login: andrew@nystudio107.com
Password: letmein
Obviously change these to whatever you like as needed.
Build the production assets by typing make build
to build the critical CSS, fonts, and other production assets. They will appear in cms/web/dist/
(just double-click on the report-legacy.html
and report-modern.html
files to view them).
N.B.: Without authorization & credentials (which are private), the make pulldb
will not work (it just runs scripts/docker_pull_db.sh
). It's provided here for instructional purposes.
Makefile Project Commands
This project uses Docker to shrink-wrap the devops it needs to run around the project.
To make using it easier, we're using a Makefile and the built-in make
utility to create local aliases. You can run the following from terminal in the project directory:
make dev
- starts up the local dev server listening onhttp://localhost:8000/
make build
- builds the static assets via the Vite buildchainmake clean
- removes thecms/composer.lock
& the entirecms/vendor/
directory as well as thebuildchain/package-lock.json
& the entirebuildchain/node_modules/
directorymake composer xxx
- runs thecomposer
command passed in, e.g.make composer install
make craft xxx
- runs thecraft
console command passed in, e.g.make craft project-config/apply
in the php containermake npm xxx
- runs thenpm
command passed in, e.g.make npm install
make nuke
- restarts the project from scratch by runningmake clean
(above), then shuts down the Docker containers, removes any mounted volumes (including the database), and then rebuilds the containers from scratchmake pulldb
- runs thescripts/docker_pull_db.sh
script to pull a remote database into the database container; thescripts/.env.sh
must be set up firstmake restoredb xxx
- runs thescripts/docker_restore_db.sh
script to restore a local database dump into the database container; thescripts/.env.sh
must be set up firstmake ssh
- opens up a Unix shell inside the PHP container for the project
Tip: If you try a command like make craft project-config/apply --force
you’ll see an error, because the shell thinks the --force
flag should be applied to the make
command. To side-step this, use the --
(double-dash) to disable further option processing, like this: make -- craft project-config/apply --force
Other notes
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:
Roadmap
- Update to Tailwind CSS
^3.0.0
.....
About Craft CMS
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.
Tech Specs
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.
Installation
See the following documentation pages for help installing Craft 3:
Popular Resources
- 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.