README

Used to create new projects using Symfony 5 at XM Media.

Setting Up a New Site

1. Create a new project:

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

2. Add .env.local – copy .env and update.
3. Update composer.json: name, license (likely private) and description
4. Update package.json: name, version, git.url, license (probably delete), private, script.dev-server (update the port)
5. Remove or update the LICENSE file.
6. Composer install & update: composer install && composer update (or without memory limit: php -d memory_limit=-1 /usr/local/bin/composer update)
7. Run yarn && yarn upgrade.
8. Run yarn dev or yarn build (for production) to compile JS & CSS files.
9. Give executable perms to bin dir: chmod u+x bin/*
10. Add nitro site: nitro add (updating .env won't do anything).
11. Create database with event streams & projections tables from db_create.sql using nitro db import. If possible, set database collation to utf8mb4_bin.
12. Create one or more event streams with the command: bin/console event-store:event-stream:create user && bin/console event-store:event-stream:create auth && bin/console event-store:event-stream:create enquiry (remove enquiry if not using the enquiry form).
13. Run all projections once: bin/console event-store:projection:run user_projection -o && bin/console event-store:projection:run user_token_projection -o && bin/console event-store:projection:run enquiry_projection -o (remove enquiry if not using the enquiry form).
14. Create a user bin/console app:user:add (select role ROLE_SUPER_ADMIN).
15. Find and make changes near @todo-symfony comments throughout the site.
16. Delete starter files: README.md (or update) and TEMPLATES.md.
17. Optional: Run composer test – will install PHPUnit & run PHP tests
18. Create new favicons: realfavicongenerator.net
19. Copy (use "Push to another server") or recreate the templates in Postmark. The templates are referenced by the aliases.
20. Optional: Run bin/console app:graphql:dump-schema <username> to update the GraphQL schema file where username is the email of an admin user.
21. Rename the project in PhpStorm.

Dev site can be accessed at https://[domain]/

System Requirements

• PHP 8.0
• 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
• Projections:
  • All commands: bin/console event-store:projection
  • Run once: bin/console event-store:projection:run user_projection -o
• Makers (PHP):
  • Make aggregate root/model: bin/console make:model
  • Make projection: bin/console make:projection

Apache Config

The following is needed in the Apache VirtualHost for the Webpack Dev Server/HMR to work:

ProxyPassMatch ^(\/dev-server\/.+$)|(sockjs-node) http://localhost:<port>
ProxyPassReverse / http://localhost:<port>

You'll probably want to customize the port number in the Apache ProxyPass config and in package.json (script.dev-server) to be unique to each project if running multiple sites on one server.

Incorporated Libraries & Tools

• Craft Nitro – local dev environment
• 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
  • GraphQL – the communication (query) language for the API
    • Apollo Client through Vue Apollo – frontend GraphQL
  • 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
  • Workbox – helps with configuration of service worker/PWA
  • 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
  • GraphQLBundle – provides GraphQL in PHP using graphql-php
    • GraphQiL is available at /graphiql (on dev only)
  • Twig – server side templating language (limited use)
  • Prooph PDO Event Store & Bridge/Bundle – for doing Event Sourcing
  • Doctrine – for reading from read models
  • 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)
  • Cloudflare – DNS & CDN
• GitLab – deployment
• Dev Tools
  • Vue Devtools
  • Apollo Devtools