QFQ

git@git.math.uzh.ch:typo3/typo3-docker.gith1. Docker

{{toc}}

Handout

| *Topic* | *Description* |

| GIT Repo ssh | @git@git.math.uzh.ch:typo3/typo3-docker.git@ |

| GIT Repo http | @https://git.math.uzh.ch/typo3/typo3-docker.git@ |

| Docker Host | @webwork20@ - alle Befehle werden als @root@ ausgefuehrt |

| Docker Verzeichnis | @/var/docker/<username>@ |

| Konfiguration / Ports | @/var/docker/<username>/<username_instancename>/config.json@ |

| Save in kpdev | @Root > webwork20 > webwork20/crose_qfq [docker]@ |

| T3 FE, xdebug, PMA | @https://webwork20.math.uzh.ch:<port>@ |

| Start Docker | @docker compose up -d@ |

| Stop Docker | @docker compose down@ |

| *Update Docker Image* | @docker compose down; git pull; docker compose build; docker compose up -d@ |

<pre>

[root@webwork20]

$ cd /var/docker/

$ mkdir <username>

$ cd /var/docker/<username>

# Checkout git repo - decide to if you like to use 'http' or 'ssh'. 

# You can change later, check: https://wiki.math.uzh.ch/public/Git#Change_Repo:_http_.3E_ssh

$ git clone https://git.math.uzh.ch/typo3/typo3-docker.git

# ssh: username/password is given automatically, login  via ssh-agent forward: ssh -A root@webwork20

$ git clone git@git.math.uzh.ch:typo3/typo3-docker.git <username_instancename>

# Main Branch ist Typo3 V10

# In case T3 V11 should be used

$ git checkout typo11

$ cd /var/docker/<username>/<username_instancename>

# Create docker images and prepare nginx, mariadb, pma

# execute bootstrap.py

$ python3 bootstrap.py

....

⠿ Network crose1_dev_default      Created                                                                                               0.1s

⠿ Container crose1_dev-mariadb-1  Healthy                                                                                              16.5s

⠿ Container crose1_dev-pma-1      Started                                                                                              17.0s

⠿ Container crose1_dev-nginx-1    Started                                                                                              17.2s

First time install: http://webwork20:51515/typo3/install.php

web: http://webwork20:51515

pma: http://webwork20:52195

xdebug: 53859

ssh: ssh root@webwork20 -p 58785

#-------------------------------------------------------

# Create a keepass entry in @kpdev@ under webwork20, incl. your instance password, with the above mentioned ports!

#-------------------------------------------------------

#-------------------------------------------------------

# Configure ssh passwordless access to the nginx/php docker.

# If not already done before, create a personal private/public SSH keys (in thinlinc): ssh-keygen -t ed25519

#-------------------------------------------------------

# Transfer the public SSH key from Thinlinc to the docker on webwork20.

[user@tlx] cat ~/.ssh/id_ed25519.pub

ssh-ed25519 AAA... 

# Copy/paste the key on webwork20

[root@webwork20] vim /var/docker/<username>/<username_instancename>/ssh/authorized_keys

# Test the password less login ... accept the new SSH hostkey.

[user@tlx] ssh root@webwork20 -p 58785

</pre>

h1. Typo3

h2. Setup

* Open T3/BE: https://webwork20:xxxx/typo3/install.php

!typo3_1.png!

!typo3_2.png!

* Choose "take me straight to the backend"

h2. Extensions: Fluid, T3 BE Highlight, QFQ, UZH_CD

* Login > extension:

** *fluid styled content*

** *typo3 edit highlighting*

** *qfq* -  https://qfq.io/download/?dir=releases  

** *uzh_cd* - https://www.math.uzh.ch/repo/?dir=uzhcd/v9  

!clipboard-202303281403-ewftg.png!

!t3editor.png!

h2. QFQ Extension Config

* Set baseUrl

!clipboard-202304211259-9zi62.png!

h2. Test Page 

* Create first page:

!typo3_4.png!

!typo3_5.png!

!typo3_6.png!

* Under access, set page visible to true

* Add template to home (via plus):

!typo3_7_t1.png!

!typo3_7_t2.png!

!typo3_7_t3.png!

h2. Test Content

* Add page content > QFQ to home

!https://project.math.uzh.ch/projects/qfq/wiki/Docker/qfq_1.png!

<pre>

10.sql = SELECT "Hello world from QFQ, ", NOW()

</pre>

* Try view page on home for a first test:

!qfq2.png!

* As instructed, create a new page "Form" with pagecontent [QFQ] Form under Home and load the formEditor:

<pre>

file=_formEditor

</pre>

* Reload the page

!qfq3.png!

h2. T3 Version

* Get and remember the T3 version (for source directory in PhpStorm)

!clipboard-202304181445-ecvvz.png!

* Done with typo3!

h1. PhpStorm

h2. TCP Ports

* *Replace* the following ports with yours!

| Config File | @/var/docker/<username>/<username_instancename>/config.json@ |

| First time install | http://webwork20:51515/typo3/install.php |

| web | http://webwork20:51515 |

| pma | http://webwork20:52195 |

| xdebug | 53859 |

| ssh | ssh root@webwork20 -p 58785 |

h2. Clone local qfq directory

* If you have not done so already, clone the qfq directory on your local environment for development in PhpStorm

<pre>

cd  ~/PhpstormProjects

git clone git@git.math.uzh.ch:typo3/qfq.git

# run makefile

cd qfq

make

</pre>

* Open the project in PhpStorm

h2. Check Update T3 Sources in /scratch/software/typo3

* Typo3: during docker bootstrap, the latest Typo3 V10 version will be downloaded - if that one is not already uploaded to @/scratch/software/typo3@, do this first.

h2. Content Root

* Add Content Root: @File > Settings > Directories > Add Content Root: /scratch/software/typo3/typo3_src-...@

!clipboard-202304181453-83ajj.png!

h2. Default PHP Version / Remote PHP

* Set a) PHP Version and b) CLI Interpreter (used as default)

!clipboard-202304191618-zomdu.png!

!clipboard-202304191619-fafjc.png!

!clipboard-202304191620-vbtni.png!

h2. Debug

* PhpStorm: @File > Settings > PHP > Debug@

!clipboard-202304181438-qmb9t.png!

* List all of the xdebug ports of your docker containers, comma separated.

* REMOVE 9000, else phpstorm will still stop webwork16.

h2. HTTP Server

* Add Server: @File > Settings > PHP > Server > [+] @

!clipboard-202304181500-ozxt9.png!

* Please give a detailed name, eg. webwork20 dev, there will be multiple deployments on the same server!

* Use the *http* port for the website, not the xdebug port!

* Map a) the path of extension > /var/www/html/typo3conf/ext/qfq/ and b) the Typo3 Sources

!clipboard-202304191625-sbryd.png!

!clipboard-202304191629-4csfm.png!

h2. Run / Debug Configuration

* Add a new @Run/Debug Configuration@ (upper right corner):

!clipboard-202304191632-rhyoj.png!

!clipboard-202304191636-sv3pw.png!

* Remove webwork16 if you didn't remove port 9000, to not stop webwork16 by accident.

h2. Deployment

* Deployment path: @Tools > Deployment > Configuration > [+] > Sftp > New Servername: ...@

!20230421-102743-842.png!

!clipboard-202304211320-eis7t.png!

* Wenn gewuenscht kann der automatische Upload aktiviert werden:

!clipboard-202303281501-vsrv2.png!

h1. PHPUnit Tests

* Aktuell ist noch ein Workaround noetig (Ruecksprache mit Benj) - nur damit phpunit lokal im Docker installiert ist. 

* Im Docker als @root@:

<pre>

$ apt install composer

$ cd /var/www/html/typo3conf/ext/qfq

$ composer update

$ composer dump-autoload

</pre>

  The last command is required by PHPUnit to be loaded properly in the next step.

* PHPUnit by Remote Interpreter

!clipboard-202304211328-e4st5.png!

!clipboard-202304211339-hsuwe.png!

!manual_nr7_phpunit.png!

h1. Issues / Probleme

h2. Problems showing icons

* If the FormEditor is broken and has problems to show note.gif, the baseUrl is probably not configure in QFQ setup.

* Configure correct Site entry point

!clipboard-202304081911-mfwna.png!

h2. Docker funktionierte nicht mehr auf webwork20

* #15745 / Docker

h2. Class 'ComposerAutoloaderInit40...' not found

* Testweise QFQ tt-content records deaktivieren > Danach funktioniert die Seite wieder.

* Ursache: das @extension/composer.json@ wurde beim Deployment von Thinlinc in den Container kopiert ... das funktioniert aktuell nicht. @composer.json@  im Docker loeschen.

  !clipboard-202304211305-ig94v.png!

h2. Install QFQ Extension: Could not remove extension directory

* @ERROR: Could not remove extension directory "typo3conf/ext/qfq/". Reasons@

  * Fix: in docker container @chown -R www-data:www-data /var/www/html/typo3conf/ext/qfq@

!clipboard-202304211307-p22de.png!