# Vite Plugin: File-based Routing | SigPro
Minimalist Reactive Library

Skip to content

# Vite Plugin: File-based Routing ​

The `sigproRouter` plugin for Vite automates route generation by scanning your `pages` directory. It creates a virtual module that you can import directly into your code, eliminating the need to maintain a manual routes array.

## 1. Project Structure ​

To use the plugin, organize your files within the `src/pages` directory. The folder hierarchy directly determines your application's URL structure. SigPro uses brackets `[param]` for dynamic segments.

text

    my-sigpro-app/
    ├── src/
    │   ├── pages/
    │   │   ├── index.js          →  #/
    │   │   ├── about.js          →  #/about
    │   │   ├── users/
    │   │   │   └── [id].js       →  #/users/:id
    │   │   └── blog/
    │   │       ├── index.js      →  #/blog
    │   │       └── [slug].js     →  #/blog/:slug
    │   ├── App.js                (Main Layout)
    │   └── main.js               (Entry Point)
    ├── vite.config.js
    └── package.json

## 2. Setup & Configuration ​

Add the plugin to your `vite.config.js`. It works out of the box with zero configuration.

javascript

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

    export default defineConfig({
      plugins: [sigproRouter()]
    });

## 3. Implementation ​

Thanks to SigPro's synchronous initialization, you no longer need to wrap your mounting logic in `.then()` blocks.

### Option A: Direct in `main.js` ​

Ideal for single-page applications where the router controls the entire viewport.

javascript

    // src/main.js
    import { $ } from 'sigpro';
    import { routes } from 'virtual:sigpro-routes';

    // The Core already has $.router ready
    $.mount($.router(routes), '#app');

### Option B: Inside `App.js` (Persistent Layout) ​

Recommended for professional apps with a fixed Sidebar or Navbar that should not re-render when changing pages.

javascript

    // src/main.js
    import { $ } from 'sigpro';
    import App from './App.js';

    $.mount(App, '#app');

    // src/App.js
    import { routes } from 'virtual:sigpro-routes';

    export default () => div({ class: 'layout' }, [
      header([
        h1("SigPro App"),
        nav([
          button({ onclick: () => $.router.go('/') }, "Home"),
          button({ onclick: () => $.router.go('/blog') }, "Blog")
        ])
      ]),
      // Only the content inside <main> will be swapped reactively
      main($.router(routes))
    ]);

## 4. Route Mapping Reference ​

The plugin follows a simple convention to transform your file system into a routing map.

File Path | Generated Path | Description
--- | --- | ---
`index.js` | `/` | The application root.
`about.js` | `/about` | A static page.
`[id].js` | `/:id` | Dynamic parameter (passed to the component).
`blog/index.js` | `/blog` | Folder index page.
`_utils.js` | Ignored | Files starting with `_` are excluded from routing.

## 5. How it Works (Vite Virtual Module) ​

The plugin generates a virtual module named `virtual:sigpro-routes`. This module exports an array of objects compatible with `$.router()`:

javascript

    // Internal representation generated by the plugin
    export const routes = [
      { path: '/', component: () => import('/src/pages/index.js') },
      { path: '/users/:id', component: () => import('/src/pages/users/[id].js') },
      // ...
    ];

Because it uses dynamic `import()`, Vite automatically performs Code Splitting, meaning each page is its own small JS file that only loads when the user navigates to it.