crazy252/typo3_vite

Vite for Typo3

1.1.7 2024-10-29 14:08 UTC

Requires

• typo3/cms-core: ^10 || ^11 || ^12 || ^13

Replaces

• typo3-ter/typo3_vite: 1.1.7

GPL-2.0-or-later

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"