Easy to use vite connector to nette apps. Based on lubomirblazekcz/nette-vite and transformed into extension.
Download extension.
composer require mskocik/vinette
Register it into your Nette application. It automatically adds asset filter and $vite property to your templates.
extensions:
vite: Mskocik\Vinette\Bridges\NetteDI\ViteExtension
vite:
manifest: assets/build/manifest.json # public path local from real www dir
wwwDir: <string> # can be omitted if it's 'www'
devServer: http://localhost:5174 # can be omitted if your are using default 'http://localhost:5174'You can use filter asset to set path to asset properly.
<link rel="stylesheet" href="{='src/css/style.css'|asset}">
<script src="{='src/js/bundle.js'|asset}" type="module">Or in case you have JS files which imports some CSS files, you should use printTags() method. $vite variable is
automatically injected into your templates.
{$vite->printTags('src/js/components.js')|noescape}
// which can result into:
// DEV
<script type="module" src="http://localhost:5174/src/js/components.js"></script>
// PRODUCTION
<link rel="stylesheet" href="/assets/build/components-1b96c47d.css">
<script type="module" src="/assets/build/components-8b95eb03.js"></script>Dev mode is enabled/toggled by clicking on the Vite icon in the tracy bar. By default it's disabled, using production build assets.
| Icon | Status |
|---|---|
 |
Production mode. Assets are being served according to definition in `manifest.json. Icon is semitransparent |
 |
Dev mode enabled, serving assets directly from vite devServer |
 |
Dev mode enabled, but vite devServer is not running |
Reference vite.config.js file I am using very often (includes svelte for custom elements and tailwind)
import FastGlob from 'fast-glob'
import { resolve } from 'path';
import { defineConfig, loadEnv } from 'vite';
import tailwindcss from 'tailwindcss'
import tailwindcssNesting from 'tailwindcss/nesting/index.js'
import autoprefixer from 'autoprefixer'
import postcssImport from 'postcss-import';
import postcssNested from 'postcss-nested';
import postcssCustomMedia from 'postcss-custom-media';
import { svelte } from '@sveltejs/vite-plugin-svelte'
const reload = {
name: 'reload',
handleHotUpdate({ file, server }) {
if (!file.includes('temp') && file.endsWith(".php") || file.endsWith(".latte")) {
server.ws.send({
type: 'full-reload',
path: '*',
});
}
}
}
/** @type {import('vite').UserConfig} */
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), 'DEV');
return {
plugins: [svelte(), reload],
css: {
postcss: {
plugins: [postcssImport, tailwindcssNesting(postcssNested), postcssCustomMedia, tailwindcss, autoprefixer]
}
},
server: {
port: env.DEV_PORT || 5174,
strictPort: true,
watch: {
ignored: ['!^src', '!**/app/**/*.latte']
},
hmr: {
host: 'localhost',
port: 5137,
protocol: 'ws'
}
},
build: {
manifest: true,
outDir: "www/assets/build",
emptyOutDir: true,
rollupOptions: {
input: FastGlob.sync(['./src/js/*.js', './src/css/*.css']).map(entry => resolve(process.cwd(), entry)),
},
assetsDir: '',
}
}
})MIT
