How to serve different index.html based on environment using Vite?

Question

In webpack I used HtmlWebpackPlugin, which I could tell which HTML template I'd like to use. I wonder how can I achieve this same result using Vite.

The objective is to use React CDN in production (build), but I don't want to use it in development.

I had something like this in my webpack config:

const { merge } = require('webpack-merge')
const common = require('./webpack.common')

module.exports = merge(common, {
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/template.dev.html'
    })
  ]
})

Answer 1

You can use vite-plugin-html.

Based on the docs it supports to set the template file same way as HtmlWebpackPlugin.

Changing the template based on the mode, you'd need to use conditional config in your "vite.config" file.

Edit:

As this plugin also allows to expose variables into the template, you might even not use two separate templates if the only difference is the <script src="">.

You might use something like: <script src="<%- REACT_SCRIPT_SOURCE %>">