CODEWITHSUNDEEP
javascriptviteconfigmulti-page-application
Julien CORON
Julien CORON

Reputation: 1

Setup multiple pages with vite in a JS project

I would like to render a page located in app/pages/language/index.html of my JS project (no React, no Typescript stuff). When I go to the url http://localhost:3000/pages/language/, the main /index.html file is displayed (with some errors).

Here is my vite.config.ts file (without imports):

export default defineConfig({
    root: './app',
    base: './', // For local devs
    //base: '/Admin/', // For deployment
    resolve: {
      alias: {
        '~bootstrap': resolve(__dirname, 'node_modules/bootstrap'),
        '~bootstrap-icons': resolve(__dirname, 'node_modules/bootstrap-icons'),
      },
    },
    plugins: [
        image(),
        htmlPurge(),
        createHtmlPlugin({
            entry: './assets/index.js', // for live run
            template: 'index.html',
            inject: {
              data: {
                title: 'index',
                injectScript: `<script>window.APP_VERSION = '${app.version}'</script><script src="./inject.js"></script>`,
              },
            }
        }),
    ],
    define: {
        'process.env.NODE_ENV': JSON.stringify('developpment'),
    },
});

How can I configure vite to provide pages in subfolders of my project?

After reading this post https://stackoverflow.com/questions/77498366/how-do-i-setup-a-multi-page-app-using-vite, and updated my project, the provided solution does not work.

Upvotes: 0

Views: 60

Answers (1)

Julien CORON
Julien CORON

Reputation: 1

I found the problem in the configuration: the createHtmlPlugin({...]) overrides all pages. For a multiple-pages app, this block have to be removed.

Upvotes: 0

Related Questions