Vite development server shows 404 error on localhost:5173 in WordPress custom theme

Other Questions Wordpress
1

I am currently developing a custom WordPress theme with XAMPP as my local server. I configured Vite according to a tutorial, but I am facing issues with the local development server.

Vite Configuration:

import { defineConfig } from 'vite';
import { resolve } from 'path';

// Specify the main file where all scripts are included
const MAIN_FILE = resolve('src/js/main.js');

// Define the directory for compiled files
const OUTPUT_DIRECTORY = resolve(__dirname, 'dist');

export default defineConfig({
  build: {
    assetsDir: '',
    manifest: true,
    emptyOutDir: true,
    outDir: OUTPUT_DIRECTORY,
    rollupOptions: {
      input: MAIN_FILE,
    },
  },
});

Enqueue Script Function:

add_action('wp_enqueue_scripts', function(){
    $manifestFilePath = get_theme_file_path('dist/.vite/manifest.json');
    
    if (file_exists($manifestFilePath)) {
        $manifestFile = json_decode(file_get_contents($manifestFilePath), true);
        
        if (isset($manifestFile['src/js/main.js'])) {
            wp_enqueue_script('theme-script', get_theme_file_uri('dist/' . $manifestFile['src/js/main.js']['file']));
            wp_enqueue_style('theme-style', get_theme_file_uri('dist/' . $manifestFile['src/js/main.js']['css'][0]));
        }
    }
});

Issue Encountered: When I execute npm run build, everything functions correctly on my WordPress site. However, running npm run dev and accessing localhost:5173 leads to a 404 error.

What adjustments should I make to get the Vite development server working with my WordPress theme?

2

the 404 happens cause Vite’s dev server isn’t for replacing WP - just serves assets, not pages. keep accessing your site via XAMPP as Vite runs separate. add define: { __DEV__: true } to your config and modify your PHP to check if the dev server’s runnin before loading manifest. localhost:5173 only handles assets.

3

You’re getting a 404 because Vite’s dev server expects an HTML entry point, but you’ve only got a JavaScript file. WordPress themes don’t work like regular Vite apps since WordPress handles the HTML rendering.

Here’s the fix: create an index.html file in your project root that imports your main.js, or better yet, add development mode detection to your PHP functions.

I ran into this exact issue before. The trick is realizing you’re not supposed to view your site at localhost:5173 during development. Keep accessing your WordPress site through XAMPP (localhost/your-site) while Vite runs in the background.

Your PHP enqueue function needs to detect dev mode and pull assets from Vite’s dev server when needed. Think of localhost:5173 as serving assets TO WordPress, not replacing your WordPress site.

4

You’re encountering a 404 error because your Vite configuration lacks a proper setup for the development server. You should include a server section to facilitate integration with WordPress. Here’s how you can modify your config:

export default defineConfig({
  server: {
    port: 5173,
    host: 'localhost',
    hmr: {
      host: 'localhost'
    }
  },
  // ... rest of your config
});

Additionally, adjust your PHP enqueue function to check if the Vite dev server is active by verifying the existence of the manifest file. If it’s absent, switch to pulling scripts directly from localhost:5173 rather than the dist folder. This is a frequent challenge faced when integrating Vite with WordPress themes.