Download the PHP package swordfox/vite without Composer
On this page you can find all versions of the php package swordfox/vite. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download swordfox/vite
More information about swordfox/vite
Files in swordfox/vite
Package vite
Short Description Vite Frontend Tooling, Lightning Fast HMR for SilverStripe 4
License MIT
Informations about the package vite
Silverstripe Vite Plugin
Vite is a modern frontend build tool that provides an extremely fast development environment and bundles your code for production.
This plugin configures Vite for use with Silverstripe.
Install
To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line, in the root folder of your project:
-
Install the plugin
- Copy vite yml config
Make sure to set the path to images folder of your theme assetsImageFolder
You can also use extra_requirements_css
, editor_css
as shown in the config, in order to apply custom css to admin environment through Vite
- Copy vite config
You might need to update paths to your assets in vite.config.js, eg.: themes/custom/src/app.scss
- Prepare package.json
We need to set up package.json in our project root folder. Use it for all frontend packages. If you have one, make sure to include npm scripts follows:
and install necessary packages:
or run the command to copy example package.json from the source folder to start with
-
Finally, run
- Add APP_URL to your .env with the local address of your website
How To Use
We need to include css in our head tag
<head>
...
$Vite.CSS.RAW
</head>
The same goes with js requirements, but it can be included in body tag instead, at the very bottom
<body>
...
$Vite.JS.RAW
</body>
Excellent! Next, let's get into a groove. For dev environment you need to run
Compiling for Production
In order to add assets in your template .ss files you can use these helpers:
$Vite.asset('themes/custom/src/images/image.jpg')
or, shortcut if you set assetsImageFolder
in your vite.yml
as mentioned above
$Vite.image('image.jpg')
You can also reach vite helper through SiteConfig
$SiteConfig.Vite.image('image.jpg')
Make sure to include glob import that will handle assets on npm run build
. To do so, add this at the very top of your main js file. You might need to update paths or include other assets that are involved in your own build.
Don't forget to update your .gitignore by adding these
You are all set now, enjoy.