Vue Symfony Starter Documentation site

Vue Symfony Starter: A ‘simple’ starter project using Vue.js and Symfony.

The objective of the project is to provide a project template with full build / tests / deploy automation while providing as much “standard” features as usually found in recent web applications.

Technologies

This project uses the following technologies:

• Symfony 4.4 with:
  • Twig templates with full translation support
  • Messenger component to send messages to background workers
  • Custom Console Commands for support and cron jobs automation
  • Code quality tools: PHPUnit, PHPCS, Psalm
• Vue.js frontend with:
  • full TypeScript support
  • Vuex state management and axios HTTP client
  • full Sass support
  • Bulma with Buefy integration
  • WebPack to build efficiently assets
  • StoryBook to help development of the UI components
  • Code quality tools: ESLint, stylelint with stylelint-config-sass-guidelines
• Docker and Docker-Compose for building development and production environment with:
  • RabbitMQ for delegating long tasks to background workers
  • Mail sending with MailCatcher for simple mail debug with GUI
  • LDAP Authentication with rroemhild/docker-test-openldap for simple LDAP test server
• CI tools:
  • DockerHub Advanced Automated Build hooks
  • GitHub Actions using DockerHub Advanced Automated Build hooks
  • Travis-CI using DockerHub Advanced Automated Build hooks
  • Jenkins (experimental) support with sample Jenkinsfile
  • Codacy code quality and code coverage review
  • Snyk security review
• Monitoring, Reporting and SEO:
  • Integration with Google Analytics and Matomo
  • Integration with Prometheus / Grafana and custom metrics possible (POC)
  • Integration with ELK Stack possible (POC)
• Source Code Management templates:
  • GitHub Issue and PR templates
  • GitLab Issue and MR templates
• Ready to Code:
  • 

Architecture diagram

Directory structure:

• app: The main application directory
  • assets: everything regarding the Frontend VUE app
    • i18n: Frontend app translations
    • styles: Frontend app global SCSS
    • vue: Frontend Vue.js
  • src: everything regarding the Symfony Backend
    • Command: Symfony Console Commands. Mostly used for CRON and automation.
    • Controller: Symfony REST API Controllers for APP.
    • DataFixtures: Dummy Data fixtures. Currently only used for tests purposes.
    • DTO: Data Transfer Object. Define custom objects to interact with the API when it’s not appropriate to use the Entities.
    • Entity: Symfony (Doctrine) Entities that are saved in the persistence storage.
    • Event: Symfony Events and Event Subscribers. Mostly used to trigger asynchronous tasks on the Messenger.
    • EventListner: Symfony Event Listeners.
    • Message: Long tasks messages for the backend Symfony Messenger.
      • Handler: Long tasks handlers for the backend MESSENGER.
    • Migrations: Persistence storage Migrations. Used by backend to check database status and by APP to install/update database.
    • Repository: Symfony (Doctrine) Entity Repositories that manage the persistence storage.
    • Service: Symfony services.
  • templates: Twig templates. Used to generate HTML index page and emails.
  • tests: Backend Symofny testing. Used to test APP controllers, CRON commands, … Provides Unit and Integration tests.
  • translations: Backend Symfony translations. Mostly used for emails and error messages.
• cron: The main CRON jobs directory. Each subdirectory contains bash scripts to will be executed periodically.
• docker: Test/Dev/Prod docker related configuration
• hooks: CI build/test/publish hooks for DockerHub (shared with GitHub Actions and Travis-CI)

How to use

Check repository on GitHub for details: https://github.com/Monogramm/vue-symfony-starter

Contributing

For information about contributing, see the Contributing page.

License

For information about license, see the license page.