create-vite-extra 2.1.1 → 2.2.0
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 +38 -34
- package/index.js +50 -16
- package/package.json +1 -1
- package/template-deno-lit/vite.config.mjs +1 -1
- package/template-deno-lit-ts/vite.config.mts +1 -1
- package/template-deno-preact/vite.config.mjs +8 -4
- package/template-deno-preact-ts/vite.config.mts +8 -4
- package/template-deno-react/vite.config.mjs +1 -1
- package/template-deno-react-ts/vite.config.mts +1 -1
- package/template-deno-solid/vite.config.mjs +3 -3
- package/template-deno-solid-ts/vite.config.mts +3 -3
- package/template-deno-svelte/vite.config.mjs +3 -3
- package/template-deno-svelte-ts/vite.config.mts +3 -3
- package/template-deno-vue/vite.config.mjs +3 -3
- package/template-deno-vue-ts/vite.config.mts +3 -3
- package/template-library/package.json +1 -1
- package/template-library-ts/package.json +2 -2
- package/template-ssr-preact/package.json +5 -5
- package/template-ssr-preact-ts/package.json +7 -7
- package/template-ssr-react/package.json +4 -4
- package/template-ssr-react-streaming/_gitignore +24 -0
- package/template-ssr-react-streaming/index.html +14 -0
- package/template-ssr-react-streaming/package.json +25 -0
- package/template-ssr-react-streaming/public/vite.svg +1 -0
- package/template-ssr-react-streaming/server.js +104 -0
- package/template-ssr-react-streaming/src/App.css +41 -0
- package/template-ssr-react-streaming/src/App.jsx +32 -0
- package/template-ssr-react-streaming/src/Card.jsx +18 -0
- package/template-ssr-react-streaming/src/assets/react.svg +1 -0
- package/template-ssr-react-streaming/src/entry-client.jsx +11 -0
- package/template-ssr-react-streaming/src/entry-server.jsx +17 -0
- package/template-ssr-react-streaming/src/index.css +69 -0
- package/template-ssr-react-streaming/vite.config.js +7 -0
- package/template-ssr-react-streaming-ts/_gitignore +24 -0
- package/template-ssr-react-streaming-ts/index.html +14 -0
- package/template-ssr-react-streaming-ts/package.json +30 -0
- package/template-ssr-react-streaming-ts/public/vite.svg +1 -0
- package/template-ssr-react-streaming-ts/server.js +104 -0
- package/template-ssr-react-streaming-ts/src/App.css +41 -0
- package/template-ssr-react-streaming-ts/src/App.tsx +32 -0
- package/template-ssr-react-streaming-ts/src/Card.tsx +18 -0
- package/template-ssr-react-streaming-ts/src/assets/react.svg +1 -0
- package/template-ssr-react-streaming-ts/src/entry-client.tsx +11 -0
- package/template-ssr-react-streaming-ts/src/entry-server.tsx +12 -0
- package/template-ssr-react-streaming-ts/src/index.css +69 -0
- package/template-ssr-react-streaming-ts/src/vite-env.d.ts +1 -0
- package/template-ssr-react-streaming-ts/tsconfig.json +25 -0
- package/template-ssr-react-streaming-ts/tsconfig.node.json +11 -0
- package/template-ssr-react-streaming-ts/vite.config.ts +7 -0
- package/template-ssr-react-ts/package.json +6 -6
- package/template-ssr-solid/package.json +4 -4
- package/template-ssr-solid-ts/package.json +5 -5
- package/template-ssr-svelte/package.json +4 -4
- package/template-ssr-svelte-ts/package.json +8 -8
- package/template-ssr-transform/package.json +1 -1
- package/template-ssr-vanilla/package.json +2 -2
- package/template-ssr-vanilla-ts/package.json +4 -4
- package/template-ssr-vue/package.json +4 -4
- package/template-ssr-vue-streaming/package.json +4 -4
- package/template-ssr-vue-streaming-ts/package.json +7 -7
- package/template-ssr-vue-ts/package.json +7 -7
package/README.md
CHANGED
|
@@ -53,44 +53,48 @@ pnpm create vite-extra my-vue-app --template ssr-vue
|
|
|
53
53
|
deno run -A npm:create-vite-extra --template deno-vue
|
|
54
54
|
|
|
55
55
|
# Bun
|
|
56
|
-
bunx create-vite my-vue-app --template ssr-vue
|
|
56
|
+
bunx create-vite-extra my-vue-app --template ssr-vue
|
|
57
57
|
```
|
|
58
58
|
|
|
59
59
|
Currently supported template presets include:
|
|
60
60
|
|
|
61
|
-
| Template
|
|
62
|
-
|
|
|
63
|
-
| `ssr-vanilla`
|
|
64
|
-
| `ssr-vanilla-ts`
|
|
65
|
-
| `ssr-vue`
|
|
66
|
-
| `ssr-vue-ts`
|
|
67
|
-
| `ssr-vue-streaming`
|
|
68
|
-
| `ssr-vue-streaming-ts`
|
|
69
|
-
| `ssr-react`
|
|
70
|
-
| `ssr-react-ts`
|
|
71
|
-
| `ssr-react-
|
|
72
|
-
| `ssr-react-
|
|
73
|
-
| `ssr-
|
|
74
|
-
| `ssr-
|
|
75
|
-
| `ssr-
|
|
76
|
-
| `ssr-
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `deno-
|
|
82
|
-
| `deno-
|
|
83
|
-
| `deno-
|
|
84
|
-
| `deno-
|
|
85
|
-
| `deno-
|
|
86
|
-
| `deno-
|
|
87
|
-
| `deno-
|
|
88
|
-
| `deno-
|
|
89
|
-
| `deno-
|
|
90
|
-
| `deno-
|
|
91
|
-
| `
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
61
|
+
| Template | Try online |
|
|
62
|
+
| ---------------------------- | -------------------------------------------------------------------------------------------------------------------- |
|
|
63
|
+
| `ssr-vanilla` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vanilla) |
|
|
64
|
+
| `ssr-vanilla-ts` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vanilla-ts) |
|
|
65
|
+
| `ssr-vue` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vue) |
|
|
66
|
+
| `ssr-vue-ts` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vue-ts) |
|
|
67
|
+
| `ssr-vue-streaming` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vue-streaming) |
|
|
68
|
+
| `ssr-vue-streaming-ts` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-vue-streaming-ts) |
|
|
69
|
+
| `ssr-react` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-react) |
|
|
70
|
+
| `ssr-react-ts` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-react-ts) |
|
|
71
|
+
| `ssr-react-streaming` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-react-streaming) |
|
|
72
|
+
| `ssr-react-streaming-ts` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-react-streaming-ts) |
|
|
73
|
+
| `ssr-react-swc` | |
|
|
74
|
+
| `ssr-react-swc-ts` | |
|
|
75
|
+
| `ssr-react-swc-streaming` | |
|
|
76
|
+
| `ssr-react-swc-streaming-ts` | |
|
|
77
|
+
| `ssr-preact` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-preact) |
|
|
78
|
+
| `ssr-preact-ts` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-preact-ts) |
|
|
79
|
+
| `ssr-svelte` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-svelte) |
|
|
80
|
+
| `ssr-svelte-ts` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-svelte-ts) |
|
|
81
|
+
| `deno-vanilla` | |
|
|
82
|
+
| `deno-vanilla-ts` | |
|
|
83
|
+
| `deno-vue` | |
|
|
84
|
+
| `deno-vue-ts` | |
|
|
85
|
+
| `deno-react` | |
|
|
86
|
+
| `deno-react-ts` | |
|
|
87
|
+
| `deno-react-swc` | |
|
|
88
|
+
| `deno-react-swc-ts` | |
|
|
89
|
+
| `deno-preact` | |
|
|
90
|
+
| `deno-preact-ts` | |
|
|
91
|
+
| `deno-lit` | |
|
|
92
|
+
| `deno-lit-ts` | |
|
|
93
|
+
| `deno-svelte` | |
|
|
94
|
+
| `deno-svelte-ts` | |
|
|
95
|
+
| `library` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-library) |
|
|
96
|
+
| `library-ts` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-library-ts) |
|
|
97
|
+
| `ssr-transform` | [StackBlitz](https://stackblitz.com/fork/github/bluwy/create-vite-extra/tree/master/template-ssr-transform) |
|
|
94
98
|
|
|
95
99
|
You can use `.` for the project name to scaffold in the current directory.
|
|
96
100
|
|
package/index.js
CHANGED
|
@@ -86,24 +86,58 @@ const FRAMEWORKS = [
|
|
|
86
86
|
color: cyan,
|
|
87
87
|
variants: [
|
|
88
88
|
{
|
|
89
|
-
name: 'ssr-react',
|
|
90
|
-
display: '
|
|
91
|
-
color:
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
89
|
+
name: 'ssr-react-streaming',
|
|
90
|
+
display: 'Streaming',
|
|
91
|
+
color: cyan,
|
|
92
|
+
variants: [
|
|
93
|
+
{
|
|
94
|
+
name: 'ssr-react-streaming',
|
|
95
|
+
display: 'JavaScript',
|
|
96
|
+
color: yellow
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
name: 'ssr-react-streaming-ts',
|
|
100
|
+
display: 'TypeScript',
|
|
101
|
+
color: blue
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
name: 'ssr-react-swc-streaming',
|
|
105
|
+
display: 'JavaScript + SWC',
|
|
106
|
+
color: yellow
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
name: 'ssr-react-swc-streaming-ts',
|
|
110
|
+
display: 'TypeScript + SWC',
|
|
111
|
+
color: blue
|
|
112
|
+
}
|
|
113
|
+
]
|
|
102
114
|
},
|
|
103
115
|
{
|
|
104
|
-
name: 'ssr-react
|
|
105
|
-
display: '
|
|
106
|
-
color:
|
|
116
|
+
name: 'ssr-react',
|
|
117
|
+
display: 'Non-streaming',
|
|
118
|
+
color: cyan,
|
|
119
|
+
variants: [
|
|
120
|
+
{
|
|
121
|
+
name: 'ssr-react',
|
|
122
|
+
display: 'JavaScript',
|
|
123
|
+
color: yellow
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
name: 'ssr-react-ts',
|
|
127
|
+
display: 'TypeScript',
|
|
128
|
+
color: blue
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
name: 'ssr-react-swc',
|
|
132
|
+
display: 'JavaScript + SWC',
|
|
133
|
+
color: yellow
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
name: 'ssr-react-swc-ts',
|
|
137
|
+
display: 'TypeScript + SWC',
|
|
138
|
+
color: blue
|
|
139
|
+
}
|
|
140
|
+
]
|
|
107
141
|
}
|
|
108
142
|
]
|
|
109
143
|
},
|
package/package.json
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
|
-
import { defineConfig } from 'npm:vite@^5.
|
|
2
|
-
import preact from 'npm:@preact/preset-vite@^2.
|
|
1
|
+
import { defineConfig } from 'npm:vite@^5.2.10'
|
|
2
|
+
import preact from 'npm:@preact/preset-vite@^2.8.2'
|
|
3
3
|
|
|
4
|
-
import 'npm:preact@^10.
|
|
5
|
-
|
|
4
|
+
import 'npm:preact@^10.20.2'
|
|
5
|
+
|
|
6
|
+
// Workaround Preact babel plugin issue in Deno: https://github.com/bluwy/create-vite-extra/issues/34
|
|
7
|
+
import 'npm:@babel/plugin-transform-react-jsx-development@^7.22.5'
|
|
8
|
+
import 'npm:@babel/plugin-transform-react-jsx@^7.22.5'
|
|
9
|
+
import 'npm:babel-plugin-transform-hook-names@^1.0.2'
|
|
6
10
|
|
|
7
11
|
// https://vitejs.dev/config/
|
|
8
12
|
export default defineConfig({
|
|
@@ -1,8 +1,12 @@
|
|
|
1
|
-
import { defineConfig } from 'npm:vite@^5.
|
|
2
|
-
import preact from 'npm:@preact/preset-vite@^2.
|
|
1
|
+
import { defineConfig } from 'npm:vite@^5.2.10'
|
|
2
|
+
import preact from 'npm:@preact/preset-vite@^2.8.2'
|
|
3
3
|
|
|
4
|
-
import 'npm:preact@^10.
|
|
5
|
-
|
|
4
|
+
import 'npm:preact@^10.20.2'
|
|
5
|
+
|
|
6
|
+
// Workaround Preact babel plugin issue in Deno: https://github.com/bluwy/create-vite-extra/issues/34
|
|
7
|
+
import 'npm:@babel/plugin-transform-react-jsx-development@^7.22.5'
|
|
8
|
+
import 'npm:@babel/plugin-transform-react-jsx@^7.22.5'
|
|
9
|
+
import 'npm:babel-plugin-transform-hook-names@^1.0.2'
|
|
6
10
|
|
|
7
11
|
// https://vitejs.dev/config/
|
|
8
12
|
export default defineConfig({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineConfig } from 'npm:vite@^5.
|
|
2
|
-
import solid from 'npm:vite-plugin-solid@^2.
|
|
1
|
+
import { defineConfig } from 'npm:vite@^5.2.10'
|
|
2
|
+
import solid from 'npm:vite-plugin-solid@^2.10.2'
|
|
3
3
|
|
|
4
|
-
import 'npm:solid-js@^1.8.
|
|
4
|
+
import 'npm:solid-js@^1.8.16'
|
|
5
5
|
|
|
6
6
|
// https://vitejs.dev/config/
|
|
7
7
|
export default defineConfig({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineConfig } from 'npm:vite@^5.
|
|
2
|
-
import solid from 'npm:vite-plugin-solid@^2.
|
|
1
|
+
import { defineConfig } from 'npm:vite@^5.2.10'
|
|
2
|
+
import solid from 'npm:vite-plugin-solid@^2.10.2'
|
|
3
3
|
|
|
4
|
-
import 'npm:solid-js@^1.8.
|
|
4
|
+
import 'npm:solid-js@^1.8.16'
|
|
5
5
|
|
|
6
6
|
// https://vitejs.dev/config/
|
|
7
7
|
export default defineConfig({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineConfig } from 'npm:vite@^5.
|
|
2
|
-
import { svelte } from 'npm:@sveltejs/vite-plugin-svelte@^3.0
|
|
1
|
+
import { defineConfig } from 'npm:vite@^5.2.10'
|
|
2
|
+
import { svelte } from 'npm:@sveltejs/vite-plugin-svelte@^3.1.0'
|
|
3
3
|
|
|
4
|
-
import 'npm:svelte@^4.2.
|
|
4
|
+
import 'npm:svelte@^4.2.15'
|
|
5
5
|
|
|
6
6
|
// https://vitejs.dev/config/
|
|
7
7
|
export default defineConfig({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineConfig } from 'npm:vite@^5.
|
|
2
|
-
import { svelte } from 'npm:@sveltejs/vite-plugin-svelte@^3.0
|
|
1
|
+
import { defineConfig } from 'npm:vite@^5.2.10'
|
|
2
|
+
import { svelte } from 'npm:@sveltejs/vite-plugin-svelte@^3.1.0'
|
|
3
3
|
|
|
4
|
-
import 'npm:svelte@^4.2.
|
|
4
|
+
import 'npm:svelte@^4.2.15'
|
|
5
5
|
|
|
6
6
|
// https://vitejs.dev/config/
|
|
7
7
|
export default defineConfig({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineConfig } from 'npm:vite@^5.
|
|
2
|
-
import vue from 'npm:@vitejs/plugin-vue@^
|
|
1
|
+
import { defineConfig } from 'npm:vite@^5.2.10'
|
|
2
|
+
import vue from 'npm:@vitejs/plugin-vue@^5.0.4'
|
|
3
3
|
|
|
4
|
-
import 'npm:vue@^3.
|
|
4
|
+
import 'npm:vue@^3.4.23'
|
|
5
5
|
|
|
6
6
|
// https://vitejs.dev/config/
|
|
7
7
|
export default defineConfig({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineConfig } from 'npm:vite@^5.
|
|
2
|
-
import vue from 'npm:@vitejs/plugin-vue@^
|
|
1
|
+
import { defineConfig } from 'npm:vite@^5.2.10'
|
|
2
|
+
import vue from 'npm:@vitejs/plugin-vue@^5.0.4'
|
|
3
3
|
|
|
4
|
-
import 'npm:vue@^3.
|
|
4
|
+
import 'npm:vue@^3.4.23'
|
|
5
5
|
|
|
6
6
|
// https://vitejs.dev/config/
|
|
7
7
|
export default defineConfig({
|
|
@@ -12,14 +12,14 @@
|
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"compression": "^1.7.4",
|
|
15
|
-
"express": "^4.
|
|
16
|
-
"preact": "^10.
|
|
17
|
-
"preact-render-to-string": "^6.
|
|
15
|
+
"express": "^4.19.2",
|
|
16
|
+
"preact": "^10.20.2",
|
|
17
|
+
"preact-render-to-string": "^6.4.2",
|
|
18
18
|
"sirv": "^2.0.4"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@preact/preset-vite": "^2.
|
|
21
|
+
"@preact/preset-vite": "^2.8.2",
|
|
22
22
|
"cross-env": "^7.0.3",
|
|
23
|
-
"vite": "^5.
|
|
23
|
+
"vite": "^5.2.10"
|
|
24
24
|
}
|
|
25
25
|
}
|
|
@@ -12,17 +12,17 @@
|
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"compression": "^1.7.4",
|
|
15
|
-
"express": "^4.
|
|
16
|
-
"preact": "^10.
|
|
17
|
-
"preact-render-to-string": "^6.
|
|
15
|
+
"express": "^4.19.2",
|
|
16
|
+
"preact": "^10.20.2",
|
|
17
|
+
"preact-render-to-string": "^6.4.2",
|
|
18
18
|
"sirv": "^2.0.4"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@preact/preset-vite": "^2.
|
|
21
|
+
"@preact/preset-vite": "^2.8.2",
|
|
22
22
|
"@types/express": "^4.17.21",
|
|
23
|
-
"@types/node": "^20.
|
|
23
|
+
"@types/node": "^20.12.7",
|
|
24
24
|
"cross-env": "^7.0.3",
|
|
25
|
-
"typescript": "^5.
|
|
26
|
-
"vite": "^5.
|
|
25
|
+
"typescript": "^5.4.5",
|
|
26
|
+
"vite": "^5.2.10"
|
|
27
27
|
}
|
|
28
28
|
}
|
|
@@ -12,16 +12,16 @@
|
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"compression": "^1.7.4",
|
|
15
|
-
"express": "^4.
|
|
15
|
+
"express": "^4.19.2",
|
|
16
16
|
"react": "^18.2.0",
|
|
17
17
|
"react-dom": "^18.2.0",
|
|
18
18
|
"sirv": "^2.0.4"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@types/react": "^18.2.
|
|
22
|
-
"@types/react-dom": "^18.2.
|
|
21
|
+
"@types/react": "^18.2.79",
|
|
22
|
+
"@types/react-dom": "^18.2.25",
|
|
23
23
|
"@vitejs/plugin-react": "^4.2.1",
|
|
24
24
|
"cross-env": "^7.0.3",
|
|
25
|
-
"vite": "^5.
|
|
25
|
+
"vite": "^5.2.10"
|
|
26
26
|
}
|
|
27
27
|
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
# Logs
|
|
2
|
+
logs
|
|
3
|
+
*.log
|
|
4
|
+
npm-debug.log*
|
|
5
|
+
yarn-debug.log*
|
|
6
|
+
yarn-error.log*
|
|
7
|
+
pnpm-debug.log*
|
|
8
|
+
lerna-debug.log*
|
|
9
|
+
|
|
10
|
+
node_modules
|
|
11
|
+
dist
|
|
12
|
+
dist-ssr
|
|
13
|
+
*.local
|
|
14
|
+
|
|
15
|
+
# Editor directories and files
|
|
16
|
+
.vscode/*
|
|
17
|
+
!.vscode/extensions.json
|
|
18
|
+
.idea
|
|
19
|
+
.DS_Store
|
|
20
|
+
*.suo
|
|
21
|
+
*.ntvs*
|
|
22
|
+
*.njsproj
|
|
23
|
+
*.sln
|
|
24
|
+
*.sw?
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Vite + React</title>
|
|
8
|
+
<!--app-head-->
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="root"><!--app-html--></div>
|
|
12
|
+
<script type="module" src="/src/entry-client.jsx"></script>
|
|
13
|
+
</body>
|
|
14
|
+
</html>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "template-ssr-react-streaming",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "node server",
|
|
8
|
+
"build": "npm run build:client && npm run build:server",
|
|
9
|
+
"build:client": "vite build --ssrManifest --outDir dist/client",
|
|
10
|
+
"build:server": "vite build --ssr src/entry-server.jsx --outDir dist/server",
|
|
11
|
+
"preview": "cross-env NODE_ENV=production node server"
|
|
12
|
+
},
|
|
13
|
+
"dependencies": {
|
|
14
|
+
"compression": "^1.7.4",
|
|
15
|
+
"express": "^4.19.2",
|
|
16
|
+
"react": "^18.2.0",
|
|
17
|
+
"react-dom": "^18.2.0",
|
|
18
|
+
"sirv": "^2.0.4"
|
|
19
|
+
},
|
|
20
|
+
"devDependencies": {
|
|
21
|
+
"@vitejs/plugin-react": "^4.2.1",
|
|
22
|
+
"cross-env": "^7.0.3",
|
|
23
|
+
"vite": "^5.2.10"
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import fs from 'node:fs/promises'
|
|
2
|
+
import express from 'express'
|
|
3
|
+
import { Transform } from 'node:stream'
|
|
4
|
+
|
|
5
|
+
// Constants
|
|
6
|
+
const isProduction = process.env.NODE_ENV === 'production'
|
|
7
|
+
const port = process.env.PORT || 5173
|
|
8
|
+
const base = process.env.BASE || '/'
|
|
9
|
+
const ABORT_DELAY = 10000
|
|
10
|
+
|
|
11
|
+
// Cached production assets
|
|
12
|
+
const templateHtml = isProduction
|
|
13
|
+
? await fs.readFile('./dist/client/index.html', 'utf-8')
|
|
14
|
+
: ''
|
|
15
|
+
const ssrManifest = isProduction
|
|
16
|
+
? await fs.readFile('./dist/client/.vite/ssr-manifest.json', 'utf-8')
|
|
17
|
+
: undefined
|
|
18
|
+
|
|
19
|
+
// Create http server
|
|
20
|
+
const app = express()
|
|
21
|
+
|
|
22
|
+
// Add Vite or respective production middlewares
|
|
23
|
+
let vite
|
|
24
|
+
if (!isProduction) {
|
|
25
|
+
const { createServer } = await import('vite')
|
|
26
|
+
vite = await createServer({
|
|
27
|
+
server: { middlewareMode: true },
|
|
28
|
+
appType: 'custom',
|
|
29
|
+
base
|
|
30
|
+
})
|
|
31
|
+
app.use(vite.middlewares)
|
|
32
|
+
} else {
|
|
33
|
+
const compression = (await import('compression')).default
|
|
34
|
+
const sirv = (await import('sirv')).default
|
|
35
|
+
app.use(compression())
|
|
36
|
+
app.use(base, sirv('./dist/client', { extensions: [] }))
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// Serve HTML
|
|
40
|
+
app.use('*', async (req, res) => {
|
|
41
|
+
try {
|
|
42
|
+
const url = req.originalUrl.replace(base, '')
|
|
43
|
+
|
|
44
|
+
let template
|
|
45
|
+
let render
|
|
46
|
+
if (!isProduction) {
|
|
47
|
+
// Always read fresh template in development
|
|
48
|
+
template = await fs.readFile('./index.html', 'utf-8')
|
|
49
|
+
template = await vite.transformIndexHtml(url, template)
|
|
50
|
+
render = (await vite.ssrLoadModule('/src/entry-server.jsx')).render
|
|
51
|
+
} else {
|
|
52
|
+
template = templateHtml
|
|
53
|
+
render = (await import('./dist/server/entry-server.js')).render
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
let didError = false
|
|
57
|
+
|
|
58
|
+
const { pipe, abort } = render(url, ssrManifest, {
|
|
59
|
+
onShellError() {
|
|
60
|
+
res.status(500)
|
|
61
|
+
res.set({ 'Content-Type': 'text/html' })
|
|
62
|
+
res.send('<h1>Something went wrong</h1>')
|
|
63
|
+
},
|
|
64
|
+
onShellReady() {
|
|
65
|
+
res.status(didError ? 500 : 200)
|
|
66
|
+
res.set({ 'Content-Type': 'text/html' })
|
|
67
|
+
|
|
68
|
+
const transformStream = new Transform({
|
|
69
|
+
transform(chunk, encoding, callback) {
|
|
70
|
+
res.write(chunk, encoding)
|
|
71
|
+
callback()
|
|
72
|
+
}
|
|
73
|
+
})
|
|
74
|
+
|
|
75
|
+
const [htmlStart, htmlEnd] = template.split(`<!--app-html-->`)
|
|
76
|
+
|
|
77
|
+
res.write(htmlStart)
|
|
78
|
+
|
|
79
|
+
transformStream.on('finish', () => {
|
|
80
|
+
res.end(htmlEnd)
|
|
81
|
+
})
|
|
82
|
+
|
|
83
|
+
pipe(transformStream)
|
|
84
|
+
},
|
|
85
|
+
onError(error) {
|
|
86
|
+
didError = true
|
|
87
|
+
console.error(error)
|
|
88
|
+
}
|
|
89
|
+
})
|
|
90
|
+
|
|
91
|
+
setTimeout(() => {
|
|
92
|
+
abort()
|
|
93
|
+
}, ABORT_DELAY)
|
|
94
|
+
} catch (e) {
|
|
95
|
+
vite?.ssrFixStacktrace(e)
|
|
96
|
+
console.log(e.stack)
|
|
97
|
+
res.status(500).end(e.stack)
|
|
98
|
+
}
|
|
99
|
+
})
|
|
100
|
+
|
|
101
|
+
// Start http server
|
|
102
|
+
app.listen(port, () => {
|
|
103
|
+
console.log(`Server started at http://localhost:${port}`)
|
|
104
|
+
})
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
#root {
|
|
2
|
+
max-width: 1280px;
|
|
3
|
+
margin: 0 auto;
|
|
4
|
+
padding: 2rem;
|
|
5
|
+
text-align: center;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.logo {
|
|
9
|
+
height: 6em;
|
|
10
|
+
padding: 1.5em;
|
|
11
|
+
will-change: filter;
|
|
12
|
+
}
|
|
13
|
+
.logo:hover {
|
|
14
|
+
filter: drop-shadow(0 0 2em #646cffaa);
|
|
15
|
+
}
|
|
16
|
+
.logo.react:hover {
|
|
17
|
+
filter: drop-shadow(0 0 2em #61dafbaa);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@keyframes logo-spin {
|
|
21
|
+
from {
|
|
22
|
+
transform: rotate(0deg);
|
|
23
|
+
}
|
|
24
|
+
to {
|
|
25
|
+
transform: rotate(360deg);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
30
|
+
a:nth-of-type(2) .logo {
|
|
31
|
+
animation: logo-spin infinite 20s linear;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.card {
|
|
36
|
+
padding: 2em;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.read-the-docs {
|
|
40
|
+
color: #888;
|
|
41
|
+
}
|