CODEWITHSUNDEEP
vite
Shams Sujon
Shams Sujon

Reputation: 875

Changing the input and output directory in Vite

I am using Vite (https://vitejs.dev/) for a static multipage site. This is the default project folder structure after the build command.

my-app/
├─ node_modules/
├─ dist/
│  ├─ assets/
│  ├─ index.html
├─ index.html
├─ main.js
├─ style.scss
├─ package.json

But I want to make this a multipage site and change the input and output directory for a better organizable way like this

my-app/
├─ node_modules/
├─ package.json
├─ src/
│  ├─ about.html
│  ├─ index.html
│  ├─ main.js
│  ├─ style.scss
├─ dist/
│  ├─ assets/
│  ├─ about.html
│  ├─ index.html

Basically, it should take the src as an input folder and output dist as a child of the my-app. When I try to do this it shows errors, then I change the scripts of the package.json into this

  "scripts": {
    "dev": "vite src",
    "build": "vite build src",
    "serve": "vite preview"
  },

This way the devcommand works fine. But the 'build' command makes the dist folder inside the src folder and does not generate other HTML files except index.html.

Now how can I fix this? Any suggestion?

Upvotes: 83

Views: 213223

Answers (8)

Denis Zhuzhkov
Denis Zhuzhkov

Reputation: 26

I tested on Mac OS with Vite for React
If you want to change output dist -> build (for expample) when you run npm run build project, you should add in your vite.config.js build.outDir property.

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: './build'
  }
})

Upvotes: 1

rakeen
rakeen

Reputation: 2331

Create a vite.config.js file and define your project root and output directory as such:


module.exports = {
  root: 'src',
  build: {
    outDir: '../dist',
    emptyOutDir: true, // also necessary
  }
}

For more info, checkout config.

Upvotes: 136

Imen A.
Imen A.

Reputation: 857

another example, on my vite project

my-app/
├─ node_modules/
├─ dist/
│  ├─ registerSW.js
│  ├─ index.html
├─ index.html
├─ index.ts
├─ style.css
├─ vite.config.ts
├─ index.ts
├─ package.json

Depending on the structure project as above, the URL was https://domain_name.com/my-app/dist/. The default "index.html" file is located in "dist" folder. How to display it without subfolder in URL ? I mean how to convert from https://domain_name.com/my-app/dist/ to just https://domain_name.com/

My solution ^^ here we have slight changes in the configuration file. Pay attention, if you set emptyOutDir to true, that will remove all files on your server

export default defineConfig({
  base: "./",
  root:"../my-app",
  build: {
    emptyOutDir: **false**, //Pay attention !
    outDir: '../',
    rollupOptions: {
      output: {
        assetFileNames: "[name].[ext]",
        chunkFileNames: "[name].[ext]",
        entryFileNames: "[name].js",
      },
    },
  },

The structure project will be like this

    ├─ my-app/
    │  ├─ node_modules/
    │  ├─ index.html
    │  ├─ index.ts
    │  ├─ style.css
    │  ├─ vite.config.ts
    │  ├─ index.ts
    │  ├─ package.json
    ├─ registerSW.js
    ├─ index.html

Upvotes: 0

Mothproof Arose
Mothproof Arose

Reputation: 29

Create a vite.config.js file and specify it's location in your package.json scripts using the --config flag:

  "scripts": {
    "dev": "vite --config ./config/vite.config.js",
    "build": "vite build --config ./config/vite.config.js
    "preview": "vite preview --config ./config/vite.config.js"
  },

Inside your vite config file include the following:

import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist',
    emptyOutDir: true,
  },
});

Upvotes: 2

Mahathir Jeshan
Mahathir Jeshan

Reputation: 263

For multipage apps you need to specify each entry point.

To dynamically specify all .html files in src/ directory as the entry points you can set up your vite.config.js like this:

import path from "path";
import glob from "glob";

export default {
  root: path.join(__dirname, "src"),
  build: {
    outDir: path.join(__dirname, "dist"),
    rollupOptions: {
      input: glob.sync(path.resolve(__dirname, "src", "*.html")),
    },
  },
};

Make sure to install glob like this

npm install glob -D

Upvotes: 26

anno1231232423
anno1231232423

Reputation: 129

If you want to use defineConfig in your vite.config.ts you can use it like this:

    import { defineConfig } from 'vite'
    import reactRefresh from '@vitejs/plugin-react-refresh'
    import eslintPlugin from 'vite-plugin-eslint'
    
    // https://vitejs.dev/config/
    export default defineConfig({
        plugins: [reactRefresh(), eslintPlugin({ cache: false })],
        root: 'src',
        build: {
            outDir: '../dist'
        }
    })

Upvotes: 12

Kobshobe
Kobshobe

Reputation: 99

You can set up your vite.config.js like this:

import path from 'path'

export default {
  root: path.resolve(__dirname, 'src'),
  build: {
    outDir: path.resolve(__dirname, 'dist'),
    rollupOptions: {
      input: {
        index: path.resolve(__dirname, 'src/index.html'),
        about: path.resolve(__dirname, 'src/about.html')
      }
    }
  }
}

Upvotes: 7

DrSiemer
DrSiemer

Reputation: 330

Make sure you add vite.config.js inside your Vite root directory (src).

    module.exports = defineConfig({
      base: '',
      root: 'src',
      build: {
        outDir: '../dist'
      }
    });

Don't forget to update your package scripts. You'll need to add the --emptyOutDir flag if you want the same behavior as in the default project structure (clear output folder before building).

    "scripts": {
      "dev": "vite src",
      "build": "vite build src --emptyOutDir",
    }

Upvotes: 18

Related Questions