https://github.com/brandcom/silverstripe-vite
https://github.com/brandcom/silverstripe-vite
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/brandcom/silverstripe-vite
- Owner: brandcom
- Created: 2022-01-26T10:00:17.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-10-20T21:37:50.000Z (over 2 years ago)
- Last Synced: 2024-11-10T05:13:22.354Z (over 1 year ago)
- Language: PHP
- Size: 23.4 KB
- Stars: 1
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Silverstripe Vite Plugin
## Silverstripe Version support
* `^0.x` supports Silverstripe 4.x
* `dev-master` supports Silverstripe 5.x. Note: No stable release available yet, see https://github.com/brandcom/silverstripe-vite/issues/3
## Installation
```
composer require passchn/silverstripe-vite
```
In your `mysite.yml`:
```
Page:
extensions:
- ViteHelper\Vite\ViteDataExtension
```
## Configuration
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 `forceProductionMode` to true, the build files (created after running `vite build`) will be served.
- Set the `devHostNeedle` to distinguish your live site from your local environment, e.g `localhost:8080`, `mysite.test` or `127.0.0.1`.
- **Note:** The vite dev server must also be running.
- Set the `devPort` to 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](https://github.com/brandcom/silverstripe-vite/wiki/example-vite-config) - under `server`. The port in both configs must always match.
- Define the `mainJS` entry point to where your applications script file is located.
- E.g., if you use TypeScript, change the `mainJs` prop to `"main.ts"`.
- Define the `manifestDir` for where the manifest file will be located.
## Usage
Insert JS / CSS tags in your main template, e.g., `Page.ss`:
```
...
$Vite.HeaderTags.RAW
...
$Vite.BodyTags.RAW
```
## Vite config
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](https://github.com/passchn/silverstripe-vite/blob/master/src/Vite/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](https://github.com/brandcom/silverstripe-vite/wiki/example-vite-config) for default configuration.
**Note:** When using vite below `2.9.0`, the server config will be different. [See this config](https://github.com/brandcom/silverstripe-vite/wiki/example-vite-config#vite-below-290).