Plugin for Kirby that allows you to load assets generated by Vite.

Overview

Kirby Vite Plugin

Plugin for Kirby that allows you to load assets generated by Vite.

  • In development mode, assets are loaded from Vite's development server, allowing you to benefit from all of its features, such as HMR.
  • In production mode, URLs to the built assets are provided and they're served by PHP.

Another similar plugin is arnoson/kirby-vite, but it's more complicated and relies on the generation of a .lock file that Vite no longer seems to generate. Thus, it inspired the creation of this plugin.

Note: Developed and tested with Vite 2.7.1.

How it works

The plugin depends on Vite's manifest functionality, which gives the generated production assets' location. If such a file exists, the plugin attempts to load the files listed inside. If this file doesn't exist, it's assumed that Vite is running in development mode and the plugin attempts to request files from Vite's develpment server.

How to use

Install

You can find oblik/kirby-vite on packagist:

composer require oblik/kirby-vite

Enable manifest

Make sure you've enabled the build.manifest option in your vite.config.js:

export default {
	build: {
		manifest: true,
	},
};

Output JavaScript

You need to pass your entry script to the js() method:

 vite()->js('src/index.js') ?>

Output CSS

You have to do the same as for JavaScript, but use the css() method:

 vite()->css('src/index.js') ?>

Note: In Vite, you import CSS in your main JavaScript file. In order to find the CSS from the generated manifest, the plugin needs the file that imports your CSS, not the CSS file itself.

Note 2: In development mode, the css() method does nothing because Vite automatically loads your CSS when your JavaScript loads, as well as the required @vite/client script. In other words, vite()->js() would load everything.

Remove generated assets

As explained in the how it works section, to ensure proper function, you should remove the build folder every time you start your development server. This can easily be done with rm -rf in your npm dev script:

{
	"scripts": {
		"dev": "rm -rf dist && vite"
	}
}

There's an open issue in the Vite repo that suggests this as a core feature of the framework, which you can upvote. Until then, we'll have to take care of removing that folder ourselves.

Options

In your config.php, make sure you configure the plugin to match your vite.config.js:

return [
	'oblik.vite' => [
		'server' => [
			'port' => 3000,
			'https' => false,
		],
		'build' => [
			'outDir' => 'dist'
		]
	]
];

Note: The values above are the default ones, so if they match your setup, you don't need to configure anything. 🤙

You might also like...
A plugin that allows you to hear the sound "Welcome to the server!" when you join the server by NhanAZ for PocketMine-MP

General A plugin that allows you to hear the sound "Welcome to the server!" when you join the server by NhanAZ for PocketMine-MP Contacts You can cont

A horrendous PM plugin to manually load all the chunks in your world without logging on. Only for the sole purpose of aiding in PM4 - DF world conversion.

ChunkLoader A horrendous PM plugin to manually load all the chunks in your world without logging on. Only for the sole purpose of aiding in PM4 - DF

Vite integration for WordPress plugins and themes development.

Vite for WordPress Vite integration for WordPress plugins and themes development. Usage Let's assume we have this plugin files structure: my-plugin/ ├

Running Laravel and React stacks together using Vite and InertiaJS on Docker.

Laravel-Vite-Docker Running Laravel and React stacks together using Vite and InertiaJS on Docker. Explore project's blog » Report Bug · Request Featur

Sspak - Tool for managing bundles of db/assets from SilverStripe environments

SSPak SSPak is a SilverStripe tool for managing database and assets content, for back-up, restoration, or transfer between environments. The file form

A Magento 1.x module which facilitates automatic purging of static assets from HTTP caches such as browser cache, CDN, Varnish, etc using best practices outlined within the HTML5 boilerplate community.

Magento Cachebuster Cachebuster is a Magento module which facilitates automatic purging of static assets from HTTP caches such as browser cache, CDN,

Kirby Janitor job for staging

Simple staging Janitor jobs Plugin for very simple staging setup for https://github.com/bnomei/kirby3-janitor/ (required). Beta quality - use at your

Color-managed thumbnails for Kirby 3

ImageKit for Kirby 3 This is not directly related for ImageKit for Kirby 2, but based on the same idea of improving Kirby’s built-in image processing

Add information about PGP public keys on upload in Kirby v3
Add information about PGP public keys on upload in Kirby v3

Kirby3 GnuPG This plugin adds information about PGP public keys on upload, using gpg binary (which needs to be installed for this to work). Getting st

Comments
  • fix empty out dir and add option host

    fix empty out dir and add option host

    Like already discussed, i fixed the empty outDir by filter the path array by strlen. Furthermore i need the possibility to add an IP as host in dev-mode, when i access the site by a mobile-device in my wlan. Therefore i added an option host, which defaults to Server::host() like it was before. To show the Version in the Panel System View, i also added a Version to composer.json. Would be nice, if you can accept this PR. Thx!

    opened by dennisbaum 3
  • improve(prodUrl): empty outDir leads to wrong assets path

    improve(prodUrl): empty outDir leads to wrong assets path

    If i build into the same (public)-directory or in my case the hole site into a dist-folder with the same structure, i have to config an empty outDir - otherwise no manifest.json will be found nor the assets.

    'oblik.vite.build.outDir' => '',

    If i do so, it leads to a wrong asset path: ( please note the two slashes

    grafik

    i would like to filter the path-array to empty strings by strlen. so the empty outDir wont be included in the array, and the path is correct.

    public function prodUrl(string $path)
    {
        return implode('/', array_filter([
            site()->url(),
            option('oblik.vite.build.
            $path
        ], 'strlen'));
    }
    

    what do you think? Thx!

    opened by dennisbaum 2
  • feat: update default Vite port, fix multilang & minor refactors

    feat: update default Vite port, fix multilang & minor refactors

    Hi there! I've added snackable, descriptive commits for all the changes.

    Breaking Changes

    • Minimum requirement of Kirby 3.7+
    • Change default port to 5173, which is the default for Vite 3
    • Replace deprecated Server class with Environment

    Features

    • Added the public isDev method

    Fixes

    • With site()->url(), the plugin broke multi-lang environments, since the language code was added before the asset's path. Fixed by using kirby()->url().

    Chore

    • Minor updates to the README, mainly to clarify the intent of the manifest
    • Update the note on @arnoson's .lock file – it was never created by Vite, but instead manually with touch .lock
    opened by johannschopplich 1
Releases(1.1.0)
Owner
Oblik Studio
a result-driven design and development
Oblik Studio
Helper to automatically load various Kirby extensions in a plugin

Autoloader for Kirby Helper to automatically load various Kirby extensions in a plugin Commerical Usage This package is free but if you use it in a co

Bruno Meilick 13 Nov 9, 2022
Pimcore Localized Assets - localize your assets with no duplicating files

Localized assets in Pimcore Pimcore Bundle to localize your assets with same file. Installation composer require lemonmind/pimcore-localized-assets bi

LemonMind.com 7 Aug 31, 2022
Perch Dashboard app for exporting content to (Kirby) text files and Kirby Blueprint files

toKirby Perch Dashboard app for exporting content to (Kirby) text files and Kirby Blueprint files. You can easily install and test it in a few steps.

R. Banus 4 Jan 15, 2022
This plugin allows you to create many-to-many relationships between pages in Kirby and synchronizes them on both sides.

Kirby 3 Many To Many Field This plugin allows you to create many-to-many relationships between pages in Kirby.

Jonas Holfeld 41 Nov 19, 2022
Kirby plugin to visually show hidden characters in all kind of input fields and their previews.

Kirby Hidden Characters Kirby plugin to visually show hidden characters in all kind of input fields and their previews. This includes white spaces and

Jakob Grommas 21 Oct 17, 2022
Kirby 3 Plugin for running jobs like cleaning the cache from within the Panel, PHP code, CLI or a cronjob

Kirby 3 Janitor Kirby 3 Plugin for running jobs. It is a Panel Button! It has jobs build-in for cleaning the cache, sessions, create zip-backup, pre-g

Bruno Meilick 68 Dec 21, 2022
JSON schema models and generated code to validate and handle various data in PocketMine-MP

DataModels JSON schema models and generated code to validate and handle various data in PocketMine-MP This library uses php-json-schema-model-generato

PMMP 2 Nov 9, 2022
This example shows how to estimate pi, using generated random numbers that uniformly distributed.

php-estimatepi This example shows how to estimate pi, using generated random numbers that uniformly distributed. Every pair of numbers produced will b

OÄŸuzhan Cerit 1 Nov 26, 2021
This app is to measure the hand and eye co-ordination speed based on the score generated taken from Database

CoOrdinationSpeedTest Website link: https://skyward-punctures.000webhostapp.com/ Try this only when you are a psychiatrist ?? ?? This app runs as php

MANOJKUMAAR GOWDA 1 Jan 12, 2022