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'
    })
  ]
})

Michal Szajter · Accepted Answer · 2022-03-25 09:38:59Z

3

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 %>">

edited Mar 25, 2022 at 9:38

answered Mar 25, 2022 at 8:02

Michal Szajter

944 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gedouuu · Accepted Answer · 2024-09-30 06:43:23Z

0

If your project does not use the default index.html, you can use plugin vite-plugin-generate-html which allows you to define separate files for generated CSS & JS chunks and then include the files as you wish in the project.

answered Sep 30, 2024 at 6:43

gedouuu

11 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related