basic setup troubles

[longstorycorte]

I'm having some troubles setting up vite-puglin-php. It s my first time using vite and using npm workflow in general, but i managed to make it work with regular html and everything its working fine (i started a fresh new project with nothing else then vite and this plugin). Now i want to switch to php, i followed plugin's documentation and set my vite.config.js as below, but i cant make it work. I'm not even sure about a simple thing (since i'm new to this workflow): till now i was developing php using live server + PHP sever extensions in VScode, do i still need them? Cause i also searched for other solution and following some of them (envolving vite-plugin-live-reload for example) (none of which worked for me) and they were talking about changing port in vite.config.js to match the php one (i assumed the one u can set in PHP sever extension indeed, u can even see some comments left from a piece of code i copyed).

Here's my vite.config.js:

import { defineConfig } from 'vite';
import usePHP from 'vite-plugin-php';

export default defineConfig({
    plugins: [
        usePHP({
            //binary: "/opt/homebrew/bin/php",
            entry: ['src/index.php'],
        }),
    ],
    root: 'src/',
    publicDir: '../public/',
    base: './',
    build:
    {
        outDir: '../dist',
        emptyOutDir: true,
        sourcemap: true
    },
    server: {
        // we need a strict port to match on PHP side
        // change freely, but update on PHP to match the same port
        strictPort: true,
        port: 3000
    },
});

And my project structure:

(i already checked this Issue)

At this point i dont get any error if i only run via npm run dev but the browser says it cant find any page at localhost:3000, but if i serve the project via PHP sever before everything else i get this error:

error when starting dev server:
Error: Port 3000 is already in use
    at Server.onError (file:///F:/tuttecose/wwwsiti/portfolio/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:47116:28)
    at Server.emit (node:events:519:28)
    at emitErrorNT (node:net:1925:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) 

All the other combination of starting the 2 extensions in different orders gives no error but still not working.

I hope it is not a completely noob question but i m strugglin a lot and i already search everything about php in vite. I also hope i gave right amount of info. Thank U.U

[donnikitos]

Hi, first of all welcome to web dev ;)

Secondly, it looks like your index.php is located in the /src folder, so based on you configuration you would need to access it in the web browser via http://localhost:3000/src/index.php. The proper configuration field root (to avoid the src prefix in the url) for Vite still needs to be implemented, see issue https://github.com/donnikitos/vite-plugin-php/issues/10. For this plugin you do not need the VS Code extensions, only a real PHP server binary. Server starting/ killing, compilation and auto reload will be handled automatically.

But besides that all for an even more simple start you can use our starter repository: https://github.com/nititech/php-vite-starter