Custom URL in Vite dev server (multi page app)

Question

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/',
    },
  },
};

tony19 · Accepted Answer · 2021-09-24T04:28:43.933

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

I noticed that this solution breaks the Vite HMR when accessing `/page-name`, but `/page-name.html` still works (the content is refreshed when you save the code in the `page-name.html` file). Do you know how to fix this issue? — Rafael Tavares, Apr 16 '22 at 23:10

score 0 · Answer 2 · answered Nov 03 '22 at 13:57

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

Custom URL in Vite dev server (multi page app)

2 Answers2

Linked