TYPO3, ddev und browsersync

Published
Start the Conversation
0 Comments

Die browsersync Doku https://github.com/ddev/ddev-browsersync ist ein wenig irreführend. Im folgenden beschreibe ich, wie man in einem TYPO3 v13 Projekt unter in einem ddev container browsersync installiert.

Installation von browsersync

Ich gehe mal davon aus, dass schon eine funktionierende ddev-Instanz vorhanden ist.
Diese Instanz ist unter proj.ddev.site erreichbar.

Laut Doku ist der erste Schritt:

```
ddev add-on get ddev/ddev-browsersync
ddev restart
```

Dieser Schritt erstellt innerhalb des .ddev Verzeichnisses  
die Datei .ddev/browser-sync.cjs mit dem Inhalt:

let docroot = process.env.DDEV_DOCROOT;
let filesdir = process.env.DDEV_FILES_DIR;
let url = process.env.DDEV_HOSTNAME;
let nonSslUrl = process.env.DDEV_PRIMARY_URL.replace( /^https:/, 'http:' )

  

if (filesdir === "") {
	filesdir = null
}


module.exports = {
	files: [docroot, "app", "resources/views/**/*.php"],
	ignore: ["node_modules", filesdir, "vendor"],
	open: false,
	ui: false,
	server: false,
	proxy: {
		target: nonSslUrl
	},
	host: url,
}

Für ein typisches TYPO3-Projekt sollte das eher so aussehen:

// #ddev-generated

let docroot = process.env.DDEV_DOCROOT;
let filesdir = process.env.DDEV_FILES_DIR;
let url = process.env.DDEV_HOSTNAME;
let nonSslUrl = process.env.DDEV_PRIMARY_URL.replace( /^https:/, 'http:' )

  

if (filesdir === "") {
	filesdir = null
}


module.exports = {
	files: [
		"packages/sitepackage/Resources/Public/**/*.js",
		"packages/sitepackage/Resources/Public/**/*.css"
	],
	ignore: ["node_modules", filesdir, "vendor"],
	open: false,
	ui: false,
	server: false,
	proxy: {
		target: nonSslUrl
	},
	host: url,
}

Ich persönlich beobachte noch auch die typoscript-, die HTML-Dateien und eigentlich alles im sitepackage.

config.yaml

Damit die Kommunikation zwischen broswersync und dem webserver in ddev richtig funktioniert, muss das TYPO3 so konfiguriert werden, dass es ohne Zertifikat funktioniert.
Das ändern wir den baseurl-Eintrag in config/sites/proj/config.yaml

Wichtig
Die base ist hier ohne Protokoll. Dadurch ist es möglich, dass das TYPO3 auch auf Anfragen ohne https antwortet.

base: https://www.site.com
	-
		base: 'proj.ddev.site'
		condition: 'applicationContext == "Development/Local"'

TYPO3-Cache

Eigentlich ist der TYPO3-Cache ein tolle Sache. Aber mit Browsersync ist er einbisschen Hinderlich. Ein Neuladen der Seite in unsinnig solange der Cache nicht gelöscht wird.
Damit wir den Cache nicht immer löschen müssen, schalten wir ihn einfach bei allen Request durch Browsersync aus.

Damit das TYPO3 weiß dass wir einen Browsersync-Request machen, muss der Browsersync einen Headerwert mitgeben.
Dazu erweitern wir die Datei .ddev/browser-sync.cjs:

module.exports = {
	files: [
		"packages/sitepackage/Resources/Public/**/*.js",
		"packages/sitepackage/Resources/Public/**/*.css"
	],
	ignore: ["node_modules", filesdir, "vendor"],
	open: false,
	ui: false,
	server: false,
	proxy: {
		target: nonSslUrl,
		proxyReq: [
			function(proxyReq) {
				proxyReq.setHeader('X-Browser-Sync', '1');
			}
		]
	},
	host: url,
}

Diese Information können wir dann im TYPO3 auswerten config/system/additional.php:

if (getenv('HTTP_X_BROWSER_SYNC') == '1') {
    $GLOBALS['TYPO3_CONF_VARS']['SYS']['caching']['cacheConfigurations']['core']['backend'] = \TYPO3\CMS\Core\Cache\Backend\NullBackend::class;
    $GLOBALS['TYPO3_CONF_VARS']['SYS']['caching']['cacheConfigurations']['hash']['backend'] = \TYPO3\CMS\Core\Cache\Backend\NullBackend::class;
    $GLOBALS['TYPO3_CONF_VARS']['SYS']['caching']['cacheConfigurations']['pages']['backend'] = \TYPO3\CMS\Core\Cache\Backend\NullBackend::class;
    $GLOBALS['TYPO3_CONF_VARS']['SYS']['caching']['cacheConfigurations']['pagesection']['backend'] = \TYPO3\CMS\Core\Cache\Backend\NullBackend::class;
    $GLOBALS['TYPO3_CONF_VARS']['SYS']['caching']['cacheConfigurations']['phpcode']['backend'] = \TYPO3\CMS\Core\Cache\Backend\NullBackend::class;
    $GLOBALS['TYPO3_CONF_VARS']['SYS']['caching']['cacheConfigurations']['runtime']['backend'] = \TYPO3\CMS\Core\Cache\Backend\TransientMemoryBackend::class;
    $GLOBALS['TYPO3_CONF_VARS']['SYS']['caching']['cacheConfigurations']['rootline']['backend'] = \TYPO3\CMS\Core\Cache\Backend\NullBackend::class;
    $GLOBALS['TYPO3_CONF_VARS']['SYS']['caching']['cacheConfigurations']['imagesizes']['backend'] = \TYPO3\CMS\Core\Cache\Backend\NullBackend::class;
    $GLOBALS['TYPO3_CONF_VARS']['SYS']['caching']['cacheConfigurations']['l10n']['backend'] = \TYPO3\CMS\Core\Cache\Backend\NullBackend::class;
    $GLOBALS['TYPO3_CONF_VARS']['SYS']['caching']['cacheConfigurations']['extbase_object']['backend'] = \TYPO3\CMS\Core\Cache\Backend\NullBackend::class;
    $GLOBALS['TYPO3_CONF_VARS']['SYS']['caching']['cacheConfigurations']['extbase_reflection']['backend'] = \TYPO3\CMS\Core\Cache\Backend\NullBackend::class;
    $GLOBALS['TYPO3_CONF_VARS']['SYS']['caching']['cacheConfigurations']['extbase_datamapfactory_datamap']['backend'] = \TYPO3\CMS\Core\Cache\Backend\NullBackend::class;
    $GLOBALS['TYPO3_CONF_VARS']['SYS']['caching']['cacheConfigurations']['typoscript']['backend'] = \TYPO3\CMS\Core\Cache\Backend\NullBackend::class;
    $GLOBALS['TYPO3_CONF_VARS']['SYS']['caching']['cacheConfigurations']['fluid_template']['backend'] = \TYPO3\CMS\Core\Cache\Backend\NullBackend::class;
}

Die Kür

Zu guter Letzt möchte ich noch, dass ich auch bei Arbeiten im Backend den Browsersync. Dazu installieren wir die TYPO3-Extension mst-reloadtrigger

ddev composer require mst/mst-reloadtrigger --dev

Diese Extension trigger eine Datei die wir mit browsersync beobachten können.

module.exports = {
	files: [
		"public/typo3temp/ReloadFrontend.now",
		"packages/sitepackage/Resources/Public/**/*.js",
		"packages/sitepackage/Resources/Public/**/*.css"
	],
	ignore: ["node_modules", filesdir, "vendor"],
	open: false,
	ui: false,
	server: false,
	proxy: {
		target: nonSslUrl,
		proxyReq: [
			function(proxyReq) {
				proxyReq.setHeader('X-Browser-Sync', '1');
			}
		]
	},
	host: url,
}

Comments

No Comments

Write comment

* These fields are required