Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/armoniacore/armonia-vite
Almost bare-metal plugin for multiplatform development in vite, it's even faster.
https://github.com/armoniacore/armonia-vite
electron playground server-side-rendering ssg ssr static-site-generator vite
Last synced: 3 months ago
JSON representation
Almost bare-metal plugin for multiplatform development in vite, it's even faster.
- Host: GitHub
- URL: https://github.com/armoniacore/armonia-vite
- Owner: armoniacore
- License: mit
- Created: 2022-04-05T10:11:53.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-26T10:38:49.000Z (over 2 years ago)
- Last Synced: 2024-08-10T23:18:23.390Z (6 months ago)
- Topics: electron, playground, server-side-rendering, ssg, ssr, static-site-generator, vite
- Language: TypeScript
- Homepage: https://vite.armoniacore.com/
- Size: 938 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
⚡️ Vite plugin for quick cross-platform application development ⚡️
[](https://npmjs.com/package/@armonia/vite)
[](https://npmjs.com/package/@armonia/vite)
[](LICENSE)
[](https://vite.armoniacore.com/)
Table of Contents
- [About](#about)
- [Getting Started](#getting-started)
- [For Electron](#for-electron)
- [For SSR](#for-ssr)
- [For SSG](#for-ssg)
- [Roadmap](#roadmap)
- [Contributing](#contributing)
- [Support](#support)
- [License](#license)
---
## About
**Armonia** is a vite plugin for quick application development.
Almost bare metal, **Armonia** allows you to develop and build application across multiple target without leaving the comfort of vite.
It currently supports:
- SSR
- SSG (preview)
- Electron
Read the [online documentation](https://vite.armoniacore.com/), explore the [examples](/packages/playground/) or take a look at the [not so starter project](https://github.com/armoniacore/starter-template-vue-ts).
## Getting Started
In your vite project install `armonia` and `cross-env`:
```bash
$ pnpm i @armonia/vite cross-env -D
```
Add the `armonia` plugin to your `vite.config.ts`
```ts
// vite.config.ts
import { defineConfig } from 'vite'
import { armonia } from '@armonia/vite'
export default defineConfig({
plugins: [armonia()]
})
```
### For Electron
Install `electron` and `electron-builder`:
```bash
$ pnpm i electron electron-builder -D
```
Create the file `src-electron/index.ts`, it will be automatically discovered by Armonia:
```ts
// src-electron/index.ts
import { app, BrowserWindow } from 'electron'
let mainWindow: BrowserWindow | undefined
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
useContentSize: true
})
if (import.meta.env.DEV) {
mainWindow.loadURL(import.meta.env.ELECTRON_APP_URL)
mainWindow.webContents.openDevTools()
} else {
mainWindow.webContents.on('devtools-opened', () => {
mainWindow.webContents.closeDevTools()
})
mainWindow.loadFile(import.meta.env.ELECTRON_APP_URL)
}
mainWindow.on('closed', () => {
mainWindow = null
})
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (mainWindow == null) {
createWindow()
}
})
```
Add new `scripts` in your package.json
```json
"scripts": {
"dev:electron": "cross-env ARMONIA_TARGET=electron vite",
"build:electron": "cross-env ARMONIA_TARGET=electron vite build",
}
```
Run the project with:
```bash
$ pnpm dev:electron
```
Build the project with:
```bash
$ pnpm build:electron
```
---
### For SSR
Create the file `src/entry-server.ts`, it will be automatically discovered by Armonia. This will be your main entry point for the server-side code and it will run on `node`.
```ts
// src/entry-server.ts
// import the ssr manifest
import manifest from 'ssr:manifest'
// import the index.html string
import template from 'ssr:template'
export async function render(req: Request): Promise {
// execute your custom logic to render the page
const app = await createAppToRoute(req.originalUrl)
const appHtml = await renderToString(app, ctx)
// inject the template
return template
.replace('', `${preloadLinks}`)
.replace('
', `${appHtml}`)
}
```
Add new `scripts` in your package.json
```json
"scripts": {
"dev:ssr": "cross-env ARMONIA_TARGET=ssr vite",
"build:ssr": "cross-env ARMONIA_TARGET=ssr vite build",
}
```
Run the project with:
```bash
$ pnpm dev:ssr
```
Build the project with:
```bash
$ pnpm build:ssr
```
---
### For SSG
Follow the [SSR steps](#for-ssr).
Update your `vite.config.ts` to support SSG:
```ts
// vite.config.ts
armonia({
ssg: {
async staticRender({ render }) {
const code = await render('/')
// return a list file and text
return [
{
id: '/index.html',
code
}
]
}
}
})
```
`staticRender` will be executed when building the `SSG` target, `render` is the name of the exported function from the `src/entry-server.ts` file.
Add new `scripts` in your package.json
```json
"scripts": {
"build:ssg": "cross-env ARMONIA_TARGET=ssg vite build",
}
```
Run the project in ssr:
```bash
$ pnpm dev:ssr
```
Build the project with:
```bash
$ pnpm build:ssg
```
---
## Roadmap
See the [open issues](https://github.com/armoniacore/armonia-vite/issues) for a list of proposed features (and known issues).
- [ ] Add support for Capacitor
- [ ] Provide examples and templates for `react` and `svelte`
- [ ] Stabilize the API
- [ ] Improve the documentation
- [ ] Implement a specialized CLI
- [ ] Actually do a proper CHANGELOG
- [ ] Workflow, everybody likes workflows
- [ ] Tests, tests and more tests
## Contributing
First off, thanks for taking the time to contribute! Contributions are what makes the open-source community such an amazing place to learn, inspire, and create. Any contributions you make will benefit everybody else and are **greatly appreciated**.
Please try to create bug reports that are:
- _Reproducible._ Include steps to reproduce the problem.
- _Specific._ Include as much detail as possible: which version, what environment, etc.
- _Unique._ Do not duplicate existing opened issues.
- _Scoped to a Single Bug._ One bug per report.
Please adhere to this project's [code of conduct](CODE_OF_CONDUCT.md).
## Support
Reach out to the maintainer at one of the following places:
- [GitHub discussions](https://github.com/armoniacore/armonia-vite/discussions)
- [Discord](https://discord.gg/GQT7mrXgvc)
## License
This project is licensed under the **MIT license**.
See [LICENSE](LICENSE) for more information.
---
> [docs](https://vite.armoniacore.com/) ·
> GitHub [Nucleo Armonico](https://github.com/armoniacore) ·
> [Discord](https://discord.gg/GQT7mrXgvc)