Learning Lab Notes

Vite

Vite

Frontend tooling

Instalation

npm create vite@latest

Config

vite config

Vite’s config file (vite.config.ts)

To import kebab case into a styles object:

.icon-button {
  \\ properties
}

and import as ‘styles’ in camelCase use this config:

css: {
  modules: {
    localsConvention: 'camelCase',
  }
},

export default defineConfig({
  plugins: [
    react(),
  ],
})

Add an alias to defineConfig()

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
  },
}

If using typescript add to tsconfig

"baseUrl": ".",
"paths": {
  "@/*": ["src/*"],
},

Add multiple page endpoints:

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
    build: {
        rollupOptions: {
            input: {
                main: './index.html',
                about: './about.html' // add your new HTML page here
            }
        }
    }
});

Development

To run on the local network (for phone, device, etc.) add --host to the ‘dev’ script in package.json.

"dev": vite --host

that will expose the port 5173 on the network IPV4 address.