vite Architecture Docs
Home / File/ vite.config.js — vite Source File

vite.config.js — vite Source File

Architecture documentation for vite.config.js, a javascript file in the vite codebase. 4 imports, 0 dependents.

File javascript ViteCore ConfigEngine 4 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  8d04ac38_01d9_e2ee_5ded_ff544e9f5063["vite.config.js"]
  51e96894_3556_ed5c_1ede_97d449867adf["node:path"]
  8d04ac38_01d9_e2ee_5ded_ff544e9f5063 --> 51e96894_3556_ed5c_1ede_97d449867adf
  f768205a_533a_2be3_ec95_10f7f47d71ce["tinyglobby"]
  8d04ac38_01d9_e2ee_5ded_ff544e9f5063 --> f768205a_533a_2be3_ec95_10f7f47d71ce
  54c37fea_4fe7_2693_71cb_1276b77f55f9["vite"]
  8d04ac38_01d9_e2ee_5ded_ff544e9f5063 --> 54c37fea_4fe7_2693_71cb_1276b77f55f9
  1b33f543_dcf3_eb24_961e_6951bd095f55["vite"]
  8d04ac38_01d9_e2ee_5ded_ff544e9f5063 --> 1b33f543_dcf3_eb24_961e_6951bd095f55
  style 8d04ac38_01d9_e2ee_5ded_ff544e9f5063 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import path from 'node:path'
import { globSync } from 'tinyglobby'
import { defineConfig, normalizePath } from 'vite'
import tailwind from '@tailwindcss/vite'

/**
 * @returns {import('vite').Plugin}
 */
function BackendIntegrationExample() {
  return {
    name: 'backend-integration',
    config() {
      const projectRoot = import.meta.dirname
      const sourceCodeDir = path.join(projectRoot, 'frontend')
      const root = path.join(sourceCodeDir, 'entrypoints')
      const outDir = path.relative(root, path.join(projectRoot, 'dist/dev'))

      const entrypoints = globSync(`${normalizePath(root)}/**/*`, {
        absolute: true,
        expandDirectories: false,
        onlyFiles: true,
      }).map((filename) => [path.relative(root, filename), filename])

      entrypoints.push(['tailwindcss-colors', 'tailwindcss/colors.js'])
      entrypoints.push(['bar.css', path.resolve(projectRoot, './dir/foo.css')])
      entrypoints.push([
        'bar.custom',
        path.resolve(projectRoot, './dir/custom.css'),
      ])

      return {
        server: {
          // same port in playground/test-utils.ts
          port: 5009,
          strictPort: true,
          origin: 'http://localhost:5009',
        },
        preview: {
          port: 5009,
        },
        build: {
          manifest: true,
          outDir,
          rollupOptions: {
            input: Object.fromEntries(entrypoints),
          },
        },
        root,
        resolve: {
          alias: {
            '~': sourceCodeDir,
          },
        },
      }
    },
  }
}

export default defineConfig({
  base: '/dev/',
  plugins: [BackendIntegrationExample(), tailwind()],
})

Domain

Subdomains

Functions

Dependencies

  • node:path
  • tinyglobby
  • vite
  • vite

Source

Frequently Asked Questions

What does vite.config.js do?
vite.config.js is a source file in the vite codebase, written in javascript. It belongs to the ViteCore domain, ConfigEngine subdomain.
What functions are defined in vite.config.js?
vite.config.js defines 1 function(s): BackendIntegrationExample.
What does vite.config.js depend on?
vite.config.js imports 4 module(s): node:path, tinyglobby, vite, vite.
Where is vite.config.js in the architecture?
vite.config.js is located at playground/backend-integration/vite.config.js (domain: ViteCore, subdomain: ConfigEngine, directory: playground/backend-integration).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free