Craft CMS Starter

Used to create new projects using Craft CMS at XM Media.

Setting Up a New Site

1. Create a new project:

   composer create-project xm/starter_craft project-name --stability=dev --no-install --remove-vcs

2. Update composer.json: name, license (likely private) and description
3. Update package.json: name, version, git.url, license, private, script.dev-server
4. Setup dev server:
   1. If using InterWorx, upload setup_dev.sh and run: sh ./setup_dev.sh
   2. Upload the files (exclude files that are OS dependent like node_modules & .env or that are only for editing like .idea and .git and a lot of what's in .gitignore).
   3. Install Composer (if not already installed)
   4. Install PHP packages/vendors: php composer.phar install
   5. Add .env (copy .env.example and update).
   6. Run . ./node_setup.sh (this will setup node & install the JS packages – requires yarn to be installed).
   7. Run yarn dev or yarn build (for production) to compile JS & CSS files.
   8. Give executable perms to bin dir: chmod u+x craft
   9. Install craft: ./craft install/craft
5. Remove or update the LICENSE file.
6. Install Composer locally (if not installed globally).
7. Composer install & update (locally): composer install && composer update
8. Run yarn && yarn upgrade locally.
9. Upload composer.lock and yarn.lock and on the server, run php composer.phar install and . ./node_setup.sh again.
10. Find and make changes near @todo-craft comments throughout the site. All changed files will need to uploaded to the server.
11. Create new favicons: realfavicongenerator.net
12. Add icon/logo as SVGs in /storage/rebrand/icon/ and /storage/rebrand/logo/ as logo.svg. (SVGs are best.) Only works with paid version of Craft.
13. Delete starter files: README.md (or update) and TEMPLATES.md.
14. Update site name:
    • In Settings -> General
    • In Settings -> Sites
    • Globals -> Site Information

Dev site can be accessed at https://[domain]/
Craft admin is located at /admin

System Requirements

• PHP 8.1+
• MySQL 5.7+
• Node 14
• Yarn

Commands

• Production JS/CSS build: yarn build
• Dev JS/CSS build: yarn dev
• Dev JS/CSS watch: yarn watch (files will not be versioned)
• Dev JS/CSS HMR server: yarn dev-server (see below)
• JS Tests (Jest): yarn test:unit
• E2E Tests (Cypress): yarn test:e2e
• Linting:
  • JS (ESLint): yarn lint:js or yarn lint:js:fix
  • CSS: yarn lint:css or yarn lint:css:fix
• PHP Tests (PhpUnit):
  • composer test
  • no memory limit php -d memory_limit=-1 bin/simple-phpunit
  • with coverage (HTML) composer test:coverage
• PHP CS: (must be installed first)
  • Dry run: composer cs
  • Fix: composer cs:fix
• PHP Static Analysis (PHPStan): composer static

Incorporated Libraries & Tools

• Frontend – full list of dependencies can be found in package.json
  • Vue – frontend framework
    • Vue Router – routing package for frontend
    • Vuex – helps to manage state
    • Vue Devtools – makes debugging in the browser easier
    • Vue Templates – the syntax for .vue files
    • Vue Test Utils – to help testing Vue components
  • Vue CLI – to manage & run the frontend compilation & testing
  • SASS – CSS preprocessor (uses node-sass)
  • Webpack – compiles JS & CSS
    • Babel – transforms JS to work in all browsers
    • Webpack Encore – connects the frontend and backend and makes Webpack configuration simpler
    • PostCSS – transforms CSS
    • Autoprefixer – for adding browser prefixes
    • Purge CSS – removes unused CSS during the deployment process (not run in dev)
    • SVGO – optimizes SVG files
    • Bundle Analyzer – displays sizes/stats on the JS bundle size
  • Tailwind – utility first styling framework
  • Jest – JS unit testing
  • Cypress – end-to-end (e2e) testing
  • Lodash – helper functions for JS
  • date-fns – helper functions for Dates in JS
  • PortalVue – helps to manage things like modals
  • Vue-JS-Modal – for modals
  • Faker.js – for generating fake data in tests
  • ESLint – checks JS for conventions & errors
  • Stylelint – checks CSS for conventions & errors
• Backend – full list of dependencies can be found in composer.json
  • Symfony – backend framework
  • Twig – server side templating language (limited use)
  • PhpUnit – for running PHP tests
  • PHP CS – PHP coding standards analyzer & fixer
  • PHPStan – static analysis of PHP
  • Postmark – for sending email, contains email templates (currently setup under XM Media's account)
• GitLab – deployment
• Dev Tools
  • Vue Devtools