.docs

Vite

Contents

• Setup
• Usage
• Config
• Tracy
• Vite

Setup

composer require contributte/vite

Usage

Register the extension in your config file, and optionally configure it.

extensions:
	vite: Contributte\Vite\Nette\Extension

vite:
    manifestFile: %wwwDir%/manifest.json

Now you can use the {vite} filter in your templates. It automatically transforms assets paths located in manifest generated by Vite:

<link rel="stylesheet" href="{='/src/styles/main.css'|vite}">
<script src="{='/src/scripts/main.js'|vite}" type="module"></script>

Other static assets as .png or .jpg etc. can be also used with this filter. But you have to add import.meta.glob('/src/assets/**') somewhere in your javascript file.

<img src="{='/src/assets/logo.png'|vite}">

Config

Here are the options you can change in the neon config.

server

• Type: string
• Default: http://localhost:5173

Url under which your Vite server is running. You can change this if you use https or different port in Vite.

cookie

• Type: string
• Default: contributte/vite

Cookie name for the Tracy integration. You might wan to change this if you have more than one nette application on the same domain.

debugMode

• Type: bool
• Default: $this->getContainerBuilder()->parameters['debugMode'] ?? false

If set to false, then the vite assets are always loaded via manifest and tracy integration is disabled.

manifestFile

• Type: string

Path to your manifest file. By default, it's auto-resolved from wwwDir.

filterName

• Type: string
• Default: vite

Name for the latte filter, you can change this for example to asset, like so the assets are written like this {='/src/styles/main.css'|asset}.

templateProperty

• Type: string
• Default: vite

Name that is used in templates as variable for the service.

wwwDir

• Type: string
• Default: getcwd()

Path to your public www dir. By default it's where index.php is executed.

basePath

• Type: string

Tracy

You can enable and disable vite dev server via Tracy with Vite button. If enabled, then all assets with {vite} filter are loaded from the local vite dev server for fast development without build. To use this, you have to run vite with vite command first. By default, Vite runs on http://localhost:5173, you can change this url in neon config or vite config.

You have to also include @vite/client script in your layout if you want to benefit from all the features of vite, like HMR and auto-reload.

{if $vite->isEnabled()}
    <script type="module" src="{='@vite/client'|vite}"></script>
{/if}

Vite

Learn more how to configure Vite here. Basic config in your project should look like this.

// vite.config.js

const reload = {
    name: 'reload',
    handleHotUpdate({ file, server }) {
        if (!file.includes('temp') && file.endsWith(".php") || file.endsWith(".latte")) {
            server.ws.send({
                type: 'full-reload',
                path: '*',
            });
        }
    }
}

export default {
    plugins: [reload], // include this little plugin if you want to enable browser auto-reload upon chaning .php and .latte files, or not up to you
    server: {
        watch: {
            usePolling: true // should be on on Windows devices
        },
        hmr: {
            host: 'localhost' // use if you want to use vite dev server on remote server
        }
    },
    build: {
        manifest: true, // generates manifest files in /www
        outDir: "www", // output dir for build
        emptyOutDir: false, // must be false, we dont want to delete any files in /www dir
        rollupOptions: {
            input: FastGlob.sync(['./src/scripts/*.{js,ts}', './src/styles/*.css']).map(entry => resolve(process.cwd(), entry))
            // location for your asset files, can be glob for script (js, ts, etc.) and styles (css, scss, etc.) files
            // for use of sass or less you have to install them first (otherwise only postcss is used), eg. npm i sass --save-dev
        }
    }
}

Vite basics

• vite - to run vite dev server
• vite build - to build your assets for production

That's it, pretty simple right?

You can learn more about Vite on the official website at vitejs.dev