First of all you need to set up local domain. Unfortunately
http://localhost:3000 won't be available (see below).
<Virtualhost *:80> DocumentRoot "/Users/path/to/project/public" ServerName kirby-vitekit.local </Virtualhost>
Please make sure to run all the commands below from the root folder of your project.
The Kirby related dependencies are not included in this repository. Please make sure to install them with composer.
Symlink src assets during development
During development Kirby can't acces your static files (like font files or images linked in css) in the
src folder. Therefore it's necessary to create a symbolic link inside of the
ln -s /Users/path/to/project/src/assets public/assets
npm, yarn, package.json
You can start the development process with:
Vite will run a local server on port
:3000. Because of the unusual setup
http://localhost:3000 won't be accessible. To be honest, I don't really understand the reasons but it's no problem for use because we can use the local domain. You can find more information here.
If you are ready for production you should stop the dev server and use the following command to create your optimized assets.
Vite will generate a hashed version of all of the
js files including the static assets you used. All these files will be exported to
/public/dist/assets. In addition to that, a
manifest.json file will generated to map the latest versions of the files.
I included the
dist folder in this repository to show the basic setup. You might want to add it to your
Kirby has to switch dynamically between
production mode and included different scripts and files. This is handled by the vite helper plugin included in this repository.
MORE INFORMATION ABOUT THE PLUGIN WILL FOLLOW.
Just one thing: during development a
.lock file will be generated inside the
src folder (and will be deleted when you run the build command). The
vite plugin will use this
.lock file to indicate whether to use the dynamic import polyfill (during development) or the generated and hashed assets (in production).
Read more about the Vite.js backend integration.
Feel free to use this ViteKit setup for your personal and commercial projects for free.
Feel also free to send me money if you like.
You can try Kirby on your local machine or on a test server as long as you need to make sure it is the right tool for your next project … and when you’re convinced, buy your license using this affiliate link.