Starter for creating Craft 4 sites at XM Media

Installs: 0

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 3

Forks: 0

Open Issues: 5



dev-master 2023-10-11 21:16 UTC


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


  • 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 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