Ecommerce Shopify WordPress Discussion

WordPress development using Vite+Docker+pug

I want to compile pug files using vite.js and update php files in a WordPress theme that is set up using docker-compose. Furthermore, I want to monitor the php files for changes and automatically reload them. However, even when the contents of the pug files are reflected in the php files, the automatic reload does not happen. file structure my_project/ ├── dist/ │ ├── wp-content/ │ ├── themes/ │ ├── test/ | ├── assets/ | | ├── images/ | | ├── js/ | | | └── app.js | | └── css/ | | └── app.css | ├── index.php | └── style.css ├── mysql_data/ ├── node_modules/ ├── public/ ├── src/ | ├── pug/ | | └── index.pug | ├── scss/ | | ├── foundations/ | | ├── layouts/ | | ├── objects/ | | | ├── components/ | | | └── projects/ | | └──app.scss | └── js/ | ├── modules/ | └── app.js ├── .env ├── docker-compose.yml ├── package-lock.json ├── package.json └── vite.config.js vite.config.js host:http://localhost:3000 import { defineConfig } from 'vite'; import pug from 'pug'; import pugPhpFilter from 'pug-php-filter'; import fs from 'fs'; import { Glob, glob } from 'glob'; import liveReload from 'vite-plugin-live-reload'; import path, { resolve } from 'path'; import dotenv from 'dotenv'; dotenv.config({ path: path.resolve(__dirname, '.env') }); const proxyPath = process.env.NODE_ENV === 'development' ? 'http://localhost:8000' : ''; const dist = './dist/wp-content/themes/' + process.env.WP_THEME; export default defineConfig({ root: './', plugins: [ { name: 'pugPhp', //apply: "serve", handleHotUpdate({ file, server }) { if ( file.endsWith('.pug') ) { console.log(`Pug file updated: ${file}`); const compiled = pug.compileFile(file, { pretty: true, filters: { php: pugPhpFilter } }); const output = compiled(); const srcPath = path.relative(path.resolve(__dirname, './src/pug'), file); const phpFilePath = path.resolve(__dirname, dist, srcPath).replace(/\.pug$/, '.php'); fs.writeFileSync(phpFilePath, output); //server.ws.send({ type: "full-reload", path: "*" }); } } }, { name: 'phpUpdated', handleHotUpdate({ file, server }) { if ( file.endsWith('.php') ) { console.log(`PHP file updated: ${file}`); //server.ws.send({ type: "full-reload", path: "*" }); } } }, liveReload(__dirname+'/dist/wp-content/themes/'+process.env.WP_THEME+'/**/*.php'), ], build: { //outDir: path.resolve(__dirname, dist), manifest: true, //outDir: dist, assetsDir: "", emptyOutDir: false, rollupOptions: { input: 'src/js/app.js', }, }, server: { proxy: { '/': proxyPath, }, cors: true, strictPort: true, port: 3000, host: true, hmr: { host: 'localhost' }, }, }); WordPress host:http://localhost:8000 functions.php <?php define('IS_VITE_DEVELOPMENT', true); // load setting about vite include "inc/inc.vite.php"; function my_theme_enqueue_styles() { wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css'); } add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles'); add_action('wp_enqueue_scripts', function () { $ver = "0"; wp_enqueue_script( 'js', get_theme_file_uri( '/assets/js/app.js' ), array(), $ver, true ); wp_enqueue_style( 'css', get_stylesheet_directory_uri() . '/assets/css/app.css', array(), $ver ); }); inc.vite.php <?php define('JS_DEPENDENCY', array()); define('JS_LOAD_IN_FOOTER', true); define('VITE_SERVER', 'http://localhost:3000'); define('VITE_ENTRY_POINT', '/../../../../../main.js'); //enqueue hook add_action( 'wp_enqueue_scripts', function() { $b = 1; if (IS_VITE_DEVELOPMENT === true) { // insert hmr into head for live reload function vite_head_module_hook() { echo '<script type="module" crossorigin src="' . VITE_SERVER . VITE_ENTRY_POINT . '"></script>'; } add_action('wp_head', 'vite_head_module_hook'); } else { // Production Server Configuration } }); What improvements can be made to monitor PHP updates and automatically reload the page? Please provide an answer.
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.