@analogjs/vite-plugin-nitro 1.10.2-beta.4 → 1.10.2-beta.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +69 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
# @analogjs/vite-plugin-nitro
|
|
2
2
|
|
|
3
|
-
A Vite plugin for integrating with [Nitro](https://nitro.unjs.io)
|
|
3
|
+
A lightweight [Vite](https://vite.dev) plugin for integrating with [Nitro](https://nitro.unjs.io) to enable:
|
|
4
|
+
|
|
5
|
+
- Runtime Server Side Rendering
|
|
6
|
+
- Build-time Pre-rendering
|
|
7
|
+
- Static Site Generation
|
|
8
|
+
- API routes
|
|
4
9
|
|
|
5
10
|
## Install
|
|
6
11
|
|
|
@@ -8,18 +13,75 @@ npm install @analogjs/vite-plugin-nitro --save-dev
|
|
|
8
13
|
|
|
9
14
|
## Setup
|
|
10
15
|
|
|
11
|
-
Add the plugin to the `plugins` array in
|
|
16
|
+
Add the `nitro` plugin to the `plugins` array in the Vite config.
|
|
12
17
|
|
|
13
18
|
```ts
|
|
19
|
+
// vite.config.ts
|
|
14
20
|
import { defineConfig } from 'vite';
|
|
21
|
+
import react from '@vitejs/plugin-react';
|
|
15
22
|
import nitro from '@analogjs/vite-plugin-nitro';
|
|
16
23
|
|
|
17
24
|
// https://vitejs.dev/config/
|
|
18
25
|
export default defineConfig({
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
26
|
+
plugins: [
|
|
27
|
+
react(),
|
|
28
|
+
nitro({
|
|
29
|
+
ssr: true,
|
|
30
|
+
entryServer: 'src/main.server.tsx',
|
|
31
|
+
prerender: {
|
|
32
|
+
routes: ['/'],
|
|
33
|
+
},
|
|
34
|
+
}),
|
|
35
|
+
],
|
|
24
36
|
});
|
|
25
37
|
```
|
|
38
|
+
|
|
39
|
+
### SSR Setup
|
|
40
|
+
|
|
41
|
+
Define a `src/main.server.ts(x)` file to declare how to render the application on the server.
|
|
42
|
+
|
|
43
|
+
Below is a minimal example for SSR w/React:
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
import React from 'react';
|
|
47
|
+
import ReactDOMServer from 'react-dom/server';
|
|
48
|
+
|
|
49
|
+
import App from './App';
|
|
50
|
+
|
|
51
|
+
export default async function render(_url: string, document: string) {
|
|
52
|
+
const html = ReactDOMServer.renderToString(
|
|
53
|
+
<React.StrictMode>
|
|
54
|
+
<App />
|
|
55
|
+
</React.StrictMode>
|
|
56
|
+
);
|
|
57
|
+
return document.replace('<!--app-html-->', html);
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Also setup the placeholder to be replaced in the `index.html`:
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<!DOCTYPE html>
|
|
65
|
+
<html lang="en">
|
|
66
|
+
<head>
|
|
67
|
+
<title>Vite + React + Nitro</title>
|
|
68
|
+
</head>
|
|
69
|
+
<body>
|
|
70
|
+
<div id="root"><!--app-html--></div>
|
|
71
|
+
<script type="module" src="/src/main.tsx"></script>
|
|
72
|
+
</body>
|
|
73
|
+
</html>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Examples
|
|
77
|
+
|
|
78
|
+
React: https://github.com/brandonroberts/vite-nitro-react
|
|
79
|
+
SolidJS: https://github.com/brandonroberts/vite-nitro-solid
|
|
80
|
+
Vue: https://github.com/brandonroberts/vite-nitro-vue
|
|
81
|
+
|
|
82
|
+
## Community
|
|
83
|
+
|
|
84
|
+
- Visit and Star the [GitHub Repo](https://github.com/analogjs/analog)
|
|
85
|
+
- Join the [Discord](https://chat.analogjs.org)
|
|
86
|
+
- Follow us on [Twitter](https://twitter.com/analogjs) and [Bluesky](https://bsky.app/profile/analogjs.org)
|
|
87
|
+
- Become a [Sponsor](https://github.com/sponsors/brandonroberts)
|
package/package.json
CHANGED