^0.xsupports Silverstripe 4.xdev-mastersupports Silverstripe 5.x. Note: No stable release available yet, see #3
composer require passchn/silverstripe-vite
In your mysite.yml:
Page:
extensions:
- ViteHelper\Vite\ViteDataExtension
You can override the default config in your mysite.yml:
ViteHelper\Vite\ViteHelper:
forceProductionMode: false
devHostNeedle: '.test'
devPort: 3000
jsSrcDirectory: 'public_src/'
mainJS: 'main.js'
manifestDir: '/public/manifest.json'
ViteHelper Config setting options:
- If you set
forceProductionModeto true, the build files (created after runningvite build) will be served. - Set the
devHostNeedleto distinguish your live site from your local environment, e.glocalhost:8080,mysite.testor127.0.0.1.- Note: The vite dev server must also be running.
- Set the
devPortto the port of the vite dev server, e.g.3000– the vite port will be shown in the terminal when running the dev server. To set a fixed port (recommended), remember to also set it in the vite config - underserver. The port in both configs must always match. - Define the
mainJSentry point to where your applications script file is located.- E.g., if you use TypeScript, change the
mainJsprop to"main.ts".
- E.g., if you use TypeScript, change the
- Define the
manifestDirfor where the manifest file will be located.
Insert JS / CSS tags in your main template, e.g., Page.ss:
<head>
...
$Vite.HeaderTags.RAW
</head>
<body>
...
$Vite.BodyTags.RAW
</body>
The config must match the vite.config.js. You need to ?flush after making changes to yml configs.
Take a look at the ViteHelper.php for more Information.
The config from your vite.config.js or vite.config.ts must match your ViteHelper config for this plugin.
See this example vite.config.ts for default configuration.
Note: When using vite below 2.9.0, the server config will be different. See this config.