development.md

Development

This is the development section. For information on the project, see README.md. Below information will guide you through developing and contributing to the project.

Prerequisites

Development will go like a breeze; follow the recommendations unless you know what you're doing :)

• Install PhpStorm, or WebStorm, or alternatively VS Code, for which you'd have to find similar plugins by yourself.

• Have the following software accessible through the CLI

  • git
  • php
  • composer
  • node
  • npm
  • yarn
  • docker
  • docker-compose
  • <cloud provider>-cli

• Install the following plugins

  • Symfony Plugin
  • PHP Annotations
  • PHP Toolbox
  • PHP Inspections (EA Extended)
  • PHPUnit Enhancement
  • Twig
  • ESLint
  • SassLint
  • EditorConfig
  • Markdown Navigator

• Optional colors and styles that work well with this project

  • Colors from my PHPStormSettings repository
  • Material Theme UI Plugin

Note: The rest of all documentation assumes the prerequisites are met. Note: When using Docker Toolbox on Windows, make sure to disable experimental features, because of this issue.

Getting started

Project settings

Go to Settings > Editor > Code Style.

• Enable the setting "Enable formatter markers in comments".

Go to Settings > Editor > Spelling.

• Register dictionary.dic as an additional custom dictionary.
  • note: that custom dictionaries can't be chosen for words saving yet. The only way to commit new words is to add them to the project dictionary and then copy & paste them into dictionary.dic.

Go to Settings > Languages and Frameworks > Javascript

• Set Javascript language version to React JSX.
• Enable ESLint under Code Quality Tools of this section.

Go to Settings > Languages and Frameworks > Node.js & NPM

• Enable Coding assistance for NodeJs.

Go to Settings > Languages and Frameworks > PHP

• Enable the Symfony plugin and set web directory to public.
• Enable the Composer plugin and register the Composer executable.

Go to Settings > Tools.

• Configure PHP-CS-Fixer; using .php_cs.dist as config file;
  • as an external program, or;
  • as file watcher that runs on save.

Go to Settings > Other Settings.

• Enable Sass Lint and register the SassLint executable.

Starting the application

1. Start application using docker-compose up
2. Start the asset dev-server running yarn dev-server

Stopping the application

1. End the asset dev-server using ctrl-c
2. Stop the application running docker-compose down

Troubleshooting

Update software

Updating NodeJs

To update NodeJs see StackOverflow: updating NodeJs.

Updating composer

To update composer, run the following command:

$ composer self-update

Updating npm

To update npm, run the following command:

$ npm install --global npm

Updating yarn

To update yarn, run the following command:

$ npm install --global yarn

Unlock built assets

Sometimes it may happen that switching between different asset generation methods blocks built files from being manipulated. When this happens, run the following commands:

$ docker-compose down
$ rm -rf ./public/application/*
$ docker-compose up
$ yarn run dev-server