I'm building a multi page app with Vite (migrating from Webpack).

To open the login page in the dev server I have to go to: localhost:3010/login.html

Is it possible to tweak the Vite config to serve login.html with the URL as: localhost:3010/login (without .html)?

// vite.config.js excerpt

export default {
  build: {
    rollupOptions: {
      input: {
        index: new URL('./index.html', import.meta.url).pathname,
        login: new URL('./login.html', import.meta.url).pathname,
      }
    }
  },
  server: {
    port: 3010,
    proxy: {
      '/api': 'http://localhost:5000/',
    },
  },
};

I'm building a multi page app with Vite (migrating from Webpack).

To open the login page in the dev server I have to go to: localhost:3010/login.html

Is it possible to tweak the Vite config to serve login.html with the URL as: localhost:3010/login (without .html)?

// vite.config.js excerpt

export default {
  build: {
    rollupOptions: {
      input: {
        index: new URL('./index.html', import.meta.url).pathname,
        login: new URL('./login.html', import.meta.url).pathname,
      }
    }
  },
  server: {
    port: 3010,
    proxy: {
      '/api': 'http://localhost:5000/',
    },
  },
};

• javascript
• reactjs
• vite

3 Answers 3

Configure the Vite dev server with a Vite plugin's configureServer(server) API. That method's server argument is a ViteDevServer, whose middlewares property is the underlying Connect instance. Call middlewares.use() with a method that acts as a custom middleware.

Here's a basic plugin that configures the dev server to replace /login with /login.html, added to the plugins array in the Vite config:

import { defineConfig } from 'vite'

const LoginHtmlFallbackPlugin = {
  name: 'login-html-fallback',
  configureServer(server) {
    server.middlewares.use('/login', (req, res, next) => {
      req.url += '.html'
      next()
    })
  }
}

export default defineConfig({
  plugins: [
    LoginHtmlFallbackPlugin
  ],
})

demo 1

And a more dynamic plugin that falls back to a corresponding .html file (appending .html to extension-less URLs) only if it exists:

// build/plugins/html-ext-fallback.js
import path from 'path'
import fs from 'fs'

export default (options) => ({
  name: 'html-ext-fallback',
  configureServer(server) {
    server.middlewares.use((req, res, next) => {
      // Check extensionless URLs but ignore the `/` root path
      if (req.originalUrl.length > 1 && !path.extname(req.originalUrl)) {
        if (fs.existsSync(path.join(options.rootDir, `${req.originalUrl}.html`))) {
          req.url += '.html'
        }
      }
      next()
    })
  }
})

// vite.config.js
import { defineConfig } from 'vite'
import HtmlExtFallbackPlugin from './build/plugins/html-ext-fallback'

export default defineConfig({
  plugins: [
    HtmlExtFallbackPlugin({ rootDir: __dirname })
  ],
})

demo 2

As Rafael pointed out, rewriting the URL breaks the HMR feature for that page. Using a redirect, however, does not:

//req.url += '.html'
res.writeHead(301, { Location: `${req.url}.html` })

You will get an "ugly" URL during development, but you can revert to URL rewriting on your production server (since HMR would not be needed then).

I encountered a similar issue and resolved it by adding multiple links to the configuration file located in public/env/config.js (and in config.testing.js).

To add multiple links to the same environment, you can specify them in the VITE_APP_UI_URL variable, separating each URL with a comma. This approach allows you to easily configure multiple links within the same environment.

//config.Testing.js

process.env.PORT = 3000;
process.env.HOST = 'localhost';
process.env.CLIENT_ID = 'your_client_id';
process.env.REDIRECT_URI = 'your_callback_endpoint';

var VITE_APP_UI_URL = "your_test_url_1 , your_test_url_2";
var VITE_SITE_KEY = "your_site_key";
var VITE_APP_API_BASEURL = "your_baseurl";

enter image description here