crazy252 / typo3_vite
Vite for Typo3
Installs: 140
Dependents: 0
Suggesters: 0
Security: 0
Stars: 8
Watchers: 2
Forks: 1
Open Issues: 0
Type:typo3-cms-extension
Requires
- typo3/cms-core: ^10 || ^11 || ^12 || ^13
Replaces
- typo3-ter/typo3_vite: 1.1.7
README
This open source project provides a bridge between Vite.js and Typo3 to make development and deployment of modern web applications easier and more efficient. It allows Typo3 users to leverage the power of Vite.js's fast and modular development experience in their projects. It offers an easy-to-use interface for integrating Vite.js into Typo3 and enables developers to take full advantage of Vite.js's modern features, such as hot module replacement, tree-shaking, and code splitting. It's a perfect way to give your Typo3 project the modern web development experience it deserves!
Setup
Add a package.json
file to your extension or add the following dependencies to your file.
{ "name": "extension_name", "private": true, "version": "0.0.1", "scripts": { "dev": "vite --host 0.0.0.0", "build": "vite build", "preview": "vite preview" }, "devDependencies": { "vite": "^4.4.11" } }
Add a vite.config.js
file to your extension. If you don't use ddev as environment you can remove the https
object in the config.
You are free to change the input and output paths and the alias. If you change the paths, you also need to change your paths in the typoscript configuration.
import fs from 'fs' import path from 'path' import { defineConfig } from 'vite' /** @type {import('vite').UserConfig} */ const config = { server: { port: 5173, https: { key: fs.readFileSync('/etc/ssl/certs/master.key'), cert: fs.readFileSync('/etc/ssl/certs/master.crt'), } }, base: '', publicDir: 'fake_dir_so_nothing_gets_copied', build: { manifest: true, outDir: 'Resources/Public', rollupOptions: { input: [ 'Resources/Private/Frontend/main.js', ] } }, resolve: { alias: [ { find: '@', replacement: path.resolve(__dirname + '/Resources/Private/Frontend/') } ] }, plugins: [ { name: 'html', handleHotUpdate({file, server}) { if (file.endsWith('.html')) { server.ws.send({ type: 'full-reload', path: '*' }); } } } ] } export default defineConfig(config)
Extend your TypoScript with your configuration. You can use the template setup in the backend or your setup.typoscript
file for that.
The port need to be the same as in the vite.config.js
.
plugin.tx_typo3vite.settings.extension_name { port = 5173 out = Resources/Public src = Resources/Private/Frontend }
Add the viewhelpers in your page template to use your bundled files. The entry is the filename of the input files from the vite.config.js
.
{namespace vite=Crazy252\Typo3Vite\ViewHelpers} <vite:asset extension="extension_name" entry="main.js" />
And now it's done. Start the dev server in your extension folder via yarn dev
or other javascript package managers.
After that, you can view your site with the ?no_cache=1
and you got the full power of vite.js in typo3!
React setup
If you want to use react in your frontend, you need to add the following viewhelper in your page template.
<vite:react extension="extension_name" />
Extension setup
If you want to change the domain, url, timeout and other settings you can change it via the typoscript setup. Here are the possible settings with the default values.
plugin.tx_typo3vite.settings.extension_name { out = null # path to the output folder src = null # path to the src folder domain = https://127.0.0.1 # default domain of vite server port = 3000 # default port of vite server uri = /@vite/client # default uri for vite client timeout = 1.0 # timeout for dev server check verify = false # ssl certificate verification }
DDEV setup
If you use ddev as environment, you need to extend ddev with a port for the vite dev server. Create a file in the .ddev
folder named docker-compose.ports.yaml
and add the following content.
version: '3.6' services: web: ports: - "127.0.0.1:5173:5173"