phpreactjsdrupalvitehtml-webpack-plugin

Use index.php instead of index.html in vitejs


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


Solution

  • 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.