🆅🅸🆃🅴🆂🆂🅴

Frontend building for sitegeist TYPO3 projects based on vite

Contents

1. Setup
2. Settings
3. Usage
4. Example Settings file

Setup

Step 1

yarn add @sitegeist/vitesse

or

npm install @sitegeist/vitesse --save-dev

Step 2

If you are not using typed imports (e.g. import { value, type Type } from 'somewhere' instead of import { value, Type } from 'somewhere'), add this option to your tsconfig.json file:

{
    "compilerOptions": {
      "verbatimModuleSyntax": true,
    }
}

If the file doesn't exist yet, create it.

Step 3

Create a vitesse.config.json file and add your build settings

Settings

Setting	Type	Default
extensionPath	String	/typo3conf/ext/sitepackage/
build.inputFiles	Array	- (mandatory)
build.outputPath	String	./Resources/Public/Build/
build.outputFilePattern	String	[name].min.js
build.tailwindConfigFile	String	./tailwind.config.js
build.svelteConfigFile	String	./svelte.config.js
spritemap.prefix	String
spritemap.inputFiles	String	./Resources/Private/Images/SVG-Icons/**/*.svg
spritemap.outputPath	String	./Resources/Public/Images/
spritemap.outputFileName	String	svg-icons.svg
emptyOutDir	Boolean	false
excludeTailwind	Boolean	false
includeSvelte	Boolean	false
modulePreload	Boolean	true

Usage

Run the commands vitesse for build or vitesse --watch for watcher or add this to your package.json file:

{
    "scripts": {
        "build": "vitesse",
        "watch": "vitesse --watch"
    }
}

Example Settings file

{
	"extensionPath": "/vendor/sitegeist/sitepackage/",
	"build": {
		"inputFiles": [
			"./Resources/Private/Styles/Main.scss",
			"./Resources/Private/Components/**/*.ts"
		],
		"outputPath": "./Resources/Public/Build/",
		"outputFilePattern": "[name].min.js"
	},
	"spritemap": {
		"prefix": "abc-",
		"inputFiles": "./Resources/Public/Icons/SVG-Sprite/**/*.svg",
		"outputPath": "./Resources/Public/Build/Images/",
		"outputFileName": "svg-icons.svg"
	},
	"emptyOutDir": false,
	"excludeTailwind": false,
	"includeSvelte": true,
	"modulePreload": false
}

…