How do I setup a multi page app using vite?

Question

I am trying to setup a vite project that has multiple entry points.

https://stackblitz.com/edit/vitejs-vite-swtkdv

It is a pretty basic setup taken straight from the vite website that uses vanilla flavour. Only things which I have updated are the following:

• add vite.config.js file with configuration for multiple entry points (check the attached stackblitz link)
• add new files: login/index.html; login/login.js (check the attached stackblitz link)

What I expect to happen is everytime I enter url/login, it should load the page ./login/index.html. However in reality it keeps on loading the ./index.html.

Answer 1

Your code is correct and should work exactly as they described in the docs, the problem is you typed http://localhost:5173/login into the browser and expected ./login/index.html to be rendered.

In the docs they said, that with your code, in order to render ./login/index.html you should type http://localhost:5173/login/ into the browser. I.e. your previous URL was missing the / at the end.

https://vitejs.dev/guide/build.html#multi-page-app:

Answer 2

This relates to the answer by DVN-Anakin.

I was using this as an example and noticed that my dist folder after a build did not include the login folder with index.html. I took a look at the vite site as recommended but got errors relating to 'path' and '__dirname'. I changed it to:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        main: 'index.html',
        login: 'login/index.html',
      },
    },
  },
})

And now I have those files in dist. I am hosting this on an Azure SWA and can confirm that GitHub built and pushed this across and appending /login/ to the url of the site works as expected (although this is configurable in SWAs too).