A simple copy and live reloading plugin for vite.
I use this configuration when working PHP, but it works great with any backend!
Note: by default the paths are relative to Vite's root folder.
// vite.config.js
import copyReload from 'vite-plugin-copy-live-reload';
export default {
// ...
/**
* This is an example configuration for the vite-plugin-copy-live-reload plugin.
* Copy files from src/public to XAMPP's htdocs folder and reload the page
* in the browser.
*/
plugins: [
copyReload({
/**
* The folder containing the files to copy. Relative to Vite's root folder.
*/
folderToWatch: 'src/public',
/**
* The destination folder.
*/
destinationFolder: 'C:\\xampp\\htdocs\\',
/**
* Reload the page in the browser.
*/
reloadPage: true,
}),
],
};
The plugin will delete the .vite/manifest.json
so make sure you set manifest: true
in vite.config.js
The plugin uses a chokidar watcher. See the chokidar documentation to find out which path notations are supported.
I needed a way to develop a php website using vite and since i couldn't find a plugin that will watch for php modifications and reload the page i made one :)
import { defineConfig } from 'vite';
import copyReload from 'vite-plugin-copy-live-reload';
/**
* The main vite configuration file.
*/
export default defineConfig({
/**
* The plugins used by vite.
*/
plugins: [
/**
* This plugin copies files from `src/public` to a destination folder
* and reloads the page in the browser when the files are updated.
*/
copyReload({
/**
* The folder containing the files to copy. Relative to Vite's root folder.
*/
folderToWatch: 'src/public',
/**
* The destination folder.
*/
destinationFolder: 'C:\\xampp\\htdocs\\',
/**
* Reload the page in the browser.
*/
reloadPage: true,
}),
],
/**
* The Vite server configuration.
*/
server: {
/**
* The port of the Vite server.
*/
port: 8888,
/**
* Enforce the port to be strictly the one specified in the config.
* Otherwise, it will increment the port until a free one is found.
*/
strictPort: true,
},
/**
* Write a manifest.json file containing a mapping from entry module name to
* the corresponding output file.
*/
manifest: true,
//...
});
<?php
/**
* index.php
*
* This is the default entry point for our PHP application.
* If we have a manifest file, we use that to load the compiled JS and CSS
* files. If not, we assume we're in development mode and load the files
* from the Vite dev server.
*/
if (file_exists(".vite/manifest.json")) {
/**
* If we have a manifest file, we load the styles and scripts from there.
*/
$manifest = file_get_contents(".vite/manifest.json");
$manifest = json_decode($manifest);
/**
* The CSS file is the first item in the `css` array for the entry point `index.js`
*/
$css = "<link rel='stylesheet' href='" . $manifest->{'index.js'}->css[0] . "' type='text/css' />";
/**
* The compiled JS file is the value of the `file` property for the entry point `index.js`
*/
$js = $manifest->{'index.js'}->file;
} else {
/**
* If we don't have a manifest file, we assume we're in development mode
* and load the files from the Vite dev server.
*/
$js = "http://localhost:8888/index.js";
}
?><!DOCTYPE html>
<html lang="ro">
<head>
<!-- ... -->
<?= $css ?>
</head>
<body>
<!-- ... -->
<script type="module" src="<?= $js ?>"></script>
</body>
</html>
';