Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/symbux/turbo-vite
The Vite plugin offers the ability to take a static or JS framework web application and server-side render it alongside offer the Vite dev server with HMR for development.
https://github.com/symbux/turbo-vite
framework pinia react ssr typescript vite vitejs vue vue-router
Last synced: 2 days ago
JSON representation
The Vite plugin offers the ability to take a static or JS framework web application and server-side render it alongside offer the Vite dev server with HMR for development.
- Host: GitHub
- URL: https://github.com/symbux/turbo-vite
- Owner: Symbux
- License: apache-2.0
- Created: 2022-02-24T11:42:14.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-19T10:29:26.000Z (over 1 year ago)
- Last Synced: 2024-11-15T03:12:25.704Z (5 days ago)
- Topics: framework, pinia, react, ssr, typescript, vite, vitejs, vue, vue-router
- Language: TypeScript
- Homepage:
- Size: 351 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
The Vite plugin offers the ability to take a static or JS framework web application and server-side render it alongside offer the Vite dev server with HMR for development.
---
## Notes
> This plugin has packages linked to Vue, this is only set as dev dependencies, and shouldn't be installed when installing the project, and the demo app that we use to test is a Vue application, hence the packages being there.
## Installation
With Yarn:
```bash
yarn add @symbux/turbo @symbux/turbo-vite
```
With NPM:
```bash
npm install --save @symbux/turbo @symbux/turbo-vite
```
---
## Getting Started
[You can find the documentation here](https://github.com/Symbux/Turbo-Vite/wiki).
```typescript
import { Engine, HttpPlugin, Registry } from '@symbux/turbo';
import VitePlugin from '@symbux/turbo-vite';
import { resolve } from 'path';
import { config as configureDotenv } from 'dotenv';
import VueVitePlugin from '@vitejs/plugin-vue';
// Prepare dotenv.
configureDotenv();
// Initialise engine.
const engine = new Engine({
autowire: true,
logLevels: ['info', 'warn', 'error', 'verbose', 'debug'],
errors: { continue: true },
});
// Register the http plugin.
engine.use(new HttpPlugin({
port: 80,
static: String(process.env.VITE_ENV) === 'production' || Registry.get('turbo.mode') === 'production' ? [
{ folder: resolve(process.cwd(), './web/dist/client/assets'), pathname: '/assets' },
{ folder: resolve(process.cwd(), './web/dist/client/'), pathname: '/' },
] : undefined,
security: {
disablePoweredBy: true,
enableHelmet: true,
helmetOptions: {
contentSecurityPolicy: false,
nocache: false,
},
},
}));
// Register the Vite plugin.
engine.use(new VitePlugin({
environment: Registry.get('turbo.mode') === 'production' ? 'production' : 'development',
root: resolve(process.cwd(), './web'),
plugins: [ VueVitePlugin() ],
basePath: '/',
buildOutput: resolve(process.cwd(), './web/dist'),
}));
// Start engine.
engine.start().catch(err => {
console.error(err);
});
```
---
## Features
A list of available features.
| Feature | Description |
| - | - |
| SSR | Server-side rendering is part of the core of this plugin and allows users to provide pre-rendered HTML for the client while using JS frameworks. |
| Vite | The Vite plugin is used for compiling and bundling JS frameworks, including support for Vue, React, Svelte, Angular, static and more. |
| Auto Routing | Due to the nature of SSR and the framework, we have built in support for auto routing which reads your router file to generate routes. |
| Auto Compilation | The plugin listens to hooks so that it can either start the vite dev server, or compile the application depending on the turbo mode. |
| HMR Dev Server | Vite comes with a blazing fast dev server with HMR (hot module reload) support, which we utilise and register inside of the plugin. |
---
## Future development
Here are some things we want to achieve in the future.
| Feature | Description |
| - | - |
| Better Auto Routing | At the moment the auto-router is reading files using Regex, this is of course inefficent, so to find a solution to actually read the router better. |
| Static Site Generation (SSG) | Support server side generation with automatic file serving, this is useful because not all applications need/want to be server-side rendered. |
| Client Bundle Generation | This allows you to simply compile your normal Vite application at runtime of the engine. |
| Multiple Applications | Allow for multiple applications to be served on the same server, this is a push but the idea is to allow to have separate frontend and admin systems, this can be configured without this using the vite config. |
