Simple Svelte3 Vite Template

anatolieGhebea

A template for siimple svelte projects with compilation: multi components single bundle, multi components multi bundle.

simple-svelte3-vite-template

A template for siimple svelte projects with compilation: multi components single bundle, multi components multi bundle.

After cloning

After cloning this repo, decide if you want to use the multi components single bundle or multi components multi bundle configuration. Then delete the folder that you don't need.

For every other option or configuration, refer to the svelte documentation and vite documentation!

Add tailwind CSS

To add tailwind Css you can use the instructions from the tailwindcss install sveltekit

Multiple components single bundle

This is the default configuration, all svelte componets are compiled into a single bundle.js file.

Multiple components multi bundle

If for some reason you need to export each component to a separate bundle, the best way is to use the following folder structure:

- src_multi
    - module1
        - index.js
        - Component1.svelte
    - module2
        - index.js
        - Component2.svelte
    - components
        - widget1.svelte
        - widget2.svelte
    -services
        - service1.js
        - service2.js

Then configure the rollup options in vite.config.js to export each module as a separate bundle. Example

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  build: {
    rollupOptions: {
      input: {
        module1: 'src/module1/main.js', // entry point for module 1
        module2: 'src/module2/main.js'  // entry point for module 2
        // Add more modules here as needed
      },
      output: {
        dir: './dist',
        entryFileNames: 'assets/[name].js',
        chunkFileNames: 'assets/[name].js',
        assetFileNames: 'assets/[name].[ext]'
      }
    }
  },
  server: {
    host: '0.0.0.0'
  }
});

The index file might look like this:

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <!-- <link rel="icon" type="image/x-icon" href="/favicon.ico"> -->
    <title>SimpleSvelte3ViteTemplate</title>
</head>

<body>
    <div id="app"></div>
    <!-- <script type="module" src="assets/index.js"></script> -->
    <script type="module" src="assets/module1.js"></script>
    <script type="module" src="assets/module2.js"></script>
</body>
</html>

Top categories