Configuration

There aren’t many things (yet) to configure with Gracile, and most of your endeavors are achievable by interacting with the Vite/Rollup plugin pipeline.

Configuration file

The vite.config (.js or .ts) is where you put the Gracile plugin specifics and Vite options.
It can be a TypeScript or a JavaScript file.

📄 /vite.config.ts

import { defineConfigfunction defineConfig(config: UserConfig): UserConfig (+3 overloads)Type helper to make it easier to use vite.config.ts
accepts a direct
{@link
UserConfig
}
object, or a function that returns it.
The function receives a
{@link
ConfigEnv
}
object. } from 'vite';
import { gracileconst gracile: (config?: GracileConfig) => any[]The main Vite plugin for loading the Gracile framework.
@paramconfig - Gracile configuration.@returnsVite plugins. `any` is used to prevent Vite typings version mismatches for the plugin API.@example`/vite.config.js`
```js
import { gracile } from '@gracile/gracile/plugin';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		gracile({ output: 'server' }),
	],
});
``` } from '@gracile/gracile/plugin';

export default defineConfigfunction defineConfig(config: UserConfig): UserConfig (+3 overloads)Type helper to make it easier to use vite.config.ts
accepts a direct
{@link
UserConfig
}
object, or a function that returns it.
The function receives a
{@link
ConfigEnv
}
object.({
  serverUserConfig.server?: ServerOptions | undefinedServer specific options, e.g. host, port, https...: {
    portCommonServerOptions.port?: number | undefinedSpecify server port. Note if the port is already being used, Vite will
automatically try the next available port so this may not be the actual
port the server ends up listening on.: 4567,
  },
  pluginsUserConfig.plugins?: PluginOption[] | undefinedArray of vite plugins to use.: [gracilefunction gracile(config?: GracileConfig | undefined): any[]The main Vite plugin for loading the Gracile framework.
@paramconfig - Gracile configuration.@returnsVite plugins. `any` is used to prevent Vite typings version mismatches for the plugin API.@example`/vite.config.js`
```js
import { gracile } from '@gracile/gracile/plugin';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		gracile({ output: 'server' }),
	],
});
```()],
});

Capabilities

TypeScript

Under the hood, The TypeScript code and all imported modules get transpiled on the fly, that’s it: You can enjoy writing your own plugins here with parity with your application code regarding type-safety and with easy module sharing (think app-wide constants).

Automatic-reloading

Every time the configuration is changed or when its imported modules get updated, Gracile will reload itself.
This also works for third parties in the node_modules folder.

Directory structure

The bare minimum is a src/routes/<...>.ts file.

my-project/
- vite.config.ts - Vite and Gracile project configuration.
- public/ - Static assets.
  - favicon.svg
- src/
  - ambient.d.ts - Vite, Gracile, etc. environmental types.
  - routes/
    - index.ts - At least one route is required.
    - foo/
      - (the-foo-index).ts
      - [myParam].ts
      - bar/
        
        […restParams].ts
- …

You will need to define and put a default document somewhere, too. For example as src/document.ts.

There are no other directory structure conventions besides the file router, the root config. and the public assets folder.

:host{display:inline-block}svg{vertical-align:text-bottom}Configuration