Get started

This guide walks you through creating your first PHP project powered by Vite.

What you need

  • A working Node.js installation.
  • A PHP binary available on your system path. Run php -v in your terminal to verify.

Step 1: Create a project

Create a folder for your project and install Vite plus the plugin:

mkdir my-php-app
cd my-php-app
npm install vite vite-plugin-php@latest --save-dev

Step 2: Configure Vite

Create a vite.config.ts file in the project root:

// vite.config.ts
import { defineConfig } from 'vite';
import usePHP from 'vite-plugin-php';

export default defineConfig({
    plugins: [usePHP()],
});

By default the plugin looks for a system php binary and uses index.php as the only entry point.

Step 3: Create your PHP entry

Delete index.html if it exists and create index.php instead:

<!-- index.php -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>My PHP App</title>
        <link rel="stylesheet" href="./src/style.css" />
    </head>

    <body>
        <h1><?= 'Hello from PHP!' ?></h1>

        <?php if (isset($_GET['visitor'])): ?>
            <p>Welcome back, <?= htmlspecialchars($_GET['visitor']) ?>!</p>
        <?php endif; ?>

        <script src="./src/main.js" type="module"></script>
    </body>
</html>

Step 4: Add assets

Create a src folder with a script and a stylesheet:

// src/main.js
import './style.css';

console.log('Vite + PHP are working!');
/* src/style.css */
body {
    font-family: system-ui, sans-serif;
    padding: 2rem;
}

Step 5: Run the dev server

npx vite

Open the URL shown in your terminal, for example http://localhost:5173. You should see your rendered PHP page. Try adding ?visitor=Alice to the URL to see the conditional PHP block in action.

Step 6: Build for production

npx vite build

The dist/ folder will contain:

  • index.php with the processed PHP source.
  • Hashed JavaScript and CSS assets.
  • Any other imported assets.

You can now deploy the dist/ folder to any static or PHP host.

Common next steps