Use index.php instead of index.html in vitejs

Question

I have a react application, currently migrating the app from CRA to vite. i have configured index.php (which has some php configuration) as entry point using HtmlWebpackPlugin. So, while migrating to vite, it takes index.html as a entry point. Is there any way to change it to index.php? Reference Link

Bonheur

Answer 1

Unfortunately, there's no way to configure vite to use index.php instead of index.html, but there is a workaround.

Here is a link to a basic setup to get a PHP application working with Vite:

https://github.com/andrefelipe/vite-php-setup

This uses Vue, but all of the Vue stuff in this is not necessary, it should work with any PHP application. The key thing to understand here is that in a typical Vite setup where you are using index.html, you have your index.html in your source directory, and when you build, it processes that file as part of the build.

In this setup, you are not using index.html as the "entry point", you are using main.js instead. You put your index.php file in your public directory and that's where you edit it, and there are two key parts that make this work:

1. You are using the live reload plugin to detect changes to index.php (or any other php files you want) in the build directory and reload the pages during development.
2. You have the file of PHP helper functions that parse manifest.json (generated by Vite), and insert the tags for the generated files into your header in index.php.

Quinquagesima

Answer 2

Now there is a way to have an index.php instead of the default index.html!

Use the vite-plugin-php Vite plugin to use PHP-files as entry points for your application.
No major hack- and workarounds required.

Check out: https://www.npmjs.com/package/vite-plugin-php

Stickler