Skip to content

Commit e93d1a4

Browse files
ediazmediazm
authored
Feat/update blog starter to use vite (#149)
We are replacing vinxi with Vite. I verified that the app runs locally <img width="896" height="607" alt="Screenshot 2025-08-11 at 12 12 27 PM" src="https://github.com/user-attachments/assets/53f6baf6-6948-44b7-bcb2-72d0fce1c305" />
1 parent 157625f commit e93d1a4

File tree

10 files changed

+734
-243
lines changed

10 files changed

+734
-243
lines changed

‎examples/react-cra/blog-starter/.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,4 @@ dist
44
dist-ssr
55
*.local
66
.output
7-
.vinxi
87
.content-collections

‎examples/react-cra/blog-starter/app.config.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import contentCollections from "@content-collections/vinxi";
2-
import { defineConfig } from "@tanstack/react-start/config";
1+
import { defineConfig } from "@tanstack/start/config";
32
import viteTsConfigPaths from "vite-tsconfig-paths";
43
import tailwindcss from "@tailwindcss/vite";
4+
import contentCollections from "@content-collections/vite";
55

66
const config = defineConfig({
77
tsr: {

‎examples/react-cra/blog-starter/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Blog Starter</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

‎examples/react-cra/blog-starter/package.json

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
"private": true,
44
"type": "module",
55
"scripts": {
6-
"dev": "vinxi dev",
7-
"start": "vinxi start",
8-
"build": "vinxi build",
6+
"dev": "vite",
7+
"start": "vite",
8+
"build": "vite build",
99
"serve": "vite preview",
1010
"test": "vitest run"
1111
},
@@ -25,12 +25,13 @@
2525
"tailwind-merge": "^3.0.2",
2626
"tailwindcss": "^4.0.6",
2727
"tailwindcss-animate": "^1.0.7",
28-
"vinxi": "^0.5.3",
2928
"vite-tsconfig-paths": "^5.1.4"
3029
},
3130
"devDependencies": {
3231
"@content-collections/core": "^0.8.2",
33-
"@content-collections/vinxi": "^0.1.0",
32+
"@content-collections/vite": "^0.2.6",
33+
"@tanstack/router-generator": "1.120.20",
34+
"@tanstack/start": "^1.120.20",
3435
"@testing-library/dom": "^10.4.0",
3536
"@testing-library/react": "^16.2.0",
3637
"@types/react": "^19.0.8",

‎examples/react-cra/blog-starter/src/main.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import ReactDOM from 'react-dom/client'
2+
import { RouterProvider } from '@tanstack/react-router'
3+
import { createRouter } from './router'
4+
5+
const router = createRouter()
6+
7+
const rootEl = document.getElementById('root')!
8+
ReactDOM.createRoot(rootEl).render(<RouterProvider router={router} />)

‎examples/react-cra/blog-starter/src/routeTree.gen.ts

Lines changed: 38 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -8,82 +8,43 @@
88
// You should NOT make any changes in this file as it will be overwritten.
99
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
1010

11-
// Import Routes
11+
import { Route as rootRouteImport } from './routes/__root'
12+
import { Route as IndexRouteImport } from './routes/index'
13+
import { Route as PostsSlugRouteImport } from './routes/posts.$slug'
14+
import { Route as CategoryCategoryRouteImport } from './routes/category.$category'
1215

13-
import { Route as rootRoute } from './routes/__root'
14-
import { Route as IndexImport } from './routes/index'
15-
import { Route as PostsSlugImport } from './routes/posts.$slug'
16-
import { Route as CategoryCategoryImport } from './routes/category.$category'
17-
18-
// Create/Update Routes
19-
20-
const IndexRoute = IndexImport.update({
16+
const IndexRoute = IndexRouteImport.update({
2117
id: '/',
2218
path: '/',
23-
getParentRoute: () => rootRoute,
19+
getParentRoute: () => rootRouteImport,
2420
} as any)
25-
26-
const PostsSlugRoute = PostsSlugImport.update({
21+
const PostsSlugRoute = PostsSlugRouteImport.update({
2722
id: '/posts/$slug',
2823
path: '/posts/$slug',
29-
getParentRoute: () => rootRoute,
24+
getParentRoute: () => rootRouteImport,
3025
} as any)
31-
32-
const CategoryCategoryRoute = CategoryCategoryImport.update({
26+
const CategoryCategoryRoute = CategoryCategoryRouteImport.update({
3327
id: '/category/$category',
3428
path: '/category/$category',
35-
getParentRoute: () => rootRoute,
29+
getParentRoute: () => rootRouteImport,
3630
} as any)
3731

38-
// Populate the FileRoutesByPath interface
39-
40-
declare module '@tanstack/react-router' {
41-
interface FileRoutesByPath {
42-
'/': {
43-
id: '/'
44-
path: '/'
45-
fullPath: '/'
46-
preLoaderRoute: typeof IndexImport
47-
parentRoute: typeof rootRoute
48-
}
49-
'/category/$category': {
50-
id: '/category/$category'
51-
path: '/category/$category'
52-
fullPath: '/category/$category'
53-
preLoaderRoute: typeof CategoryCategoryImport
54-
parentRoute: typeof rootRoute
55-
}
56-
'/posts/$slug': {
57-
id: '/posts/$slug'
58-
path: '/posts/$slug'
59-
fullPath: '/posts/$slug'
60-
preLoaderRoute: typeof PostsSlugImport
61-
parentRoute: typeof rootRoute
62-
}
63-
}
64-
}
65-
66-
// Create and export the route tree
67-
6832
export interface FileRoutesByFullPath {
6933
'/': typeof IndexRoute
7034
'/category/$category': typeof CategoryCategoryRoute
7135
'/posts/$slug': typeof PostsSlugRoute
7236
}
73-
7437
export interface FileRoutesByTo {
7538
'/': typeof IndexRoute
7639
'/category/$category': typeof CategoryCategoryRoute
7740
'/posts/$slug': typeof PostsSlugRoute
7841
}
79-
8042
export interface FileRoutesById {
81-
__root__: typeof rootRoute
43+
__root__: typeof rootRouteImport
8244
'/': typeof IndexRoute
8345
'/category/$category': typeof CategoryCategoryRoute
8446
'/posts/$slug': typeof PostsSlugRoute
8547
}
86-
8748
export interface FileRouteTypes {
8849
fileRoutesByFullPath: FileRoutesByFullPath
8950
fullPaths: '/' | '/category/$category' | '/posts/$slug'
@@ -92,43 +53,43 @@ export interface FileRouteTypes {
9253
id: '__root__' | '/' | '/category/$category' | '/posts/$slug'
9354
fileRoutesById: FileRoutesById
9455
}
95-
9656
export interface RootRouteChildren {
9757
IndexRoute: typeof IndexRoute
9858
CategoryCategoryRoute: typeof CategoryCategoryRoute
9959
PostsSlugRoute: typeof PostsSlugRoute
10060
}
10161

62+
declare module '@tanstack/react-router' {
63+
interface FileRoutesByPath {
64+
'/': {
65+
id: '/'
66+
path: '/'
67+
fullPath: '/'
68+
preLoaderRoute: typeof IndexRouteImport
69+
parentRoute: typeof rootRouteImport
70+
}
71+
'/posts/$slug': {
72+
id: '/posts/$slug'
73+
path: '/posts/$slug'
74+
fullPath: '/posts/$slug'
75+
preLoaderRoute: typeof PostsSlugRouteImport
76+
parentRoute: typeof rootRouteImport
77+
}
78+
'/category/$category': {
79+
id: '/category/$category'
80+
path: '/category/$category'
81+
fullPath: '/category/$category'
82+
preLoaderRoute: typeof CategoryCategoryRouteImport
83+
parentRoute: typeof rootRouteImport
84+
}
85+
}
86+
}
87+
10288
const rootRouteChildren: RootRouteChildren = {
10389
IndexRoute: IndexRoute,
10490
CategoryCategoryRoute: CategoryCategoryRoute,
10591
PostsSlugRoute: PostsSlugRoute,
10692
}
107-
108-
export const routeTree = rootRoute
93+
export const routeTree = rootRouteImport
10994
._addFileChildren(rootRouteChildren)
11095
._addFileTypes<FileRouteTypes>()
111-
112-
/* ROUTE_MANIFEST_START
113-
{
114-
"routes": {
115-
"__root__": {
116-
"filePath": "__root.tsx",
117-
"children": [
118-
"/",
119-
"/category/$category",
120-
"/posts/$slug"
121-
]
122-
},
123-
"/": {
124-
"filePath": "index.tsx"
125-
},
126-
"/category/$category": {
127-
"filePath": "category.$category.tsx"
128-
},
129-
"/posts/$slug": {
130-
"filePath": "posts.$slug.tsx"
131-
}
132-
}
133-
}
134-
ROUTE_MANIFEST_END */

‎examples/react-cra/blog-starter/starter-info.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
},
1919
"devDependencies": {
2020
"@content-collections/core": "^0.8.2",
21-
"@content-collections/vinxi": "^0.1.0"
21+
"@content-collections/vite": "^0.2.6"
2222
}
2323
},
2424
"dependsOn": ["shadcn", "start"],

‎examples/react-cra/blog-starter/starter.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,15 @@
1919
},
2020
"devDependencies": {
2121
"@content-collections/core": "^0.8.2",
22-
"@content-collections/vinxi": "^0.1.0"
22+
"@content-collections/vite": "^0.2.6"
2323
}
2424
},
2525
"dependsOn": ["shadcn", "start"],
2626
"typescript": true,
2727
"tailwind": true,
2828
"files": {
29-
"./.gitignore": "node_modules\n.DS_Store\ndist\ndist-ssr\n*.local\n.output\n.vinxi\n.content-collections\n",
30-
"./app.config.ts": "import contentCollections from \"@content-collections/vinxi\";\nimport { defineConfig } from \"@tanstack/react-start/config\";\nimport viteTsConfigPaths from \"vite-tsconfig-paths\";\nimport tailwindcss from \"@tailwindcss/vite\";\n\nconst config = defineConfig({\n tsr: {\n appDirectory: \"src\",\n },\n vite: {\n plugins: [\n contentCollections(),\n viteTsConfigPaths({\n projects: [\"./tsconfig.json\"],\n }),\n tailwindcss(),\n ],\n },\n});\n\nexport default config;\n",
29+
"./.gitignore": "node_modules\n.DS_Store\ndist\ndist-ssr\n*.local\n.output\n.content-collections\n",
30+
"./app.config.ts": "import contentCollections from \"@content-collections/vite\";\nimport { defineConfig } from \"@tanstack/start/config\";\nimport viteTsConfigPaths from \"vite-tsconfig-paths\";\nimport tailwindcss from \"@tailwindcss/vite\";\n\nconst config = defineConfig({\n tsr: {\n appDirectory: \"src\",\n },\n vite: {\n plugins: [\n contentCollections(),\n viteTsConfigPaths({\n projects: [\"./tsconfig.json\"],\n }),\n tailwindcss(),\n ],\n },\n});\n\nexport default config;\n",
3131
"./content/posts/beach.md": "---\ndate: 2025-03-01\ntitle: \"Day At The Beach\"\nsummary: \"Had a great day at the beach in Hawaii\"\ncategories:\n - Relaxing\nimage: beach.jpg\n---\n\nThe morning sun painted the ocean in shimmering gold as I paddled out beyond the break, my surfboard gliding smoothly through the crystal-clear Hawaiian waters. The waves were perfect today - clean, consistent sets rolling in with just enough power to make things interesting without being intimidating. After catching several exhilarating rides, each one lasting what felt like an eternity, I found myself grinning from ear to ear, salt water dripping from my hair, and feeling completely in tune with the rhythm of the ocean.\n\nAfter my surf session, I found the perfect spot on the warm sand to soak in the midday sun. The gentle trade winds carried the sweet scent of plumeria, while palm trees swayed overhead providing occasional patches of shade. I alternated between reading my book, taking refreshing dips in the turquoise water, and simply watching the parade of beach life unfold around me - children building sandcastles, paddleboarders gliding by in the distance, and sea turtles occasionally popping their heads above the surface. It was one of those perfect Hawaiian days that remind you why these islands are called paradise.\n",
3232
"./content/posts/jungle.md": "---\ndate: 2025-03-02\ntitle: \"Hiking The Jungle\"\nsummary: \"Picking our way through the jungle in Hawaii\"\ncategories:\n - Hiking\nimage: jungle.jpg\n---\n\nThe ascent through the Hawaiian jungle was a feast for the senses. Massive tree ferns unfurled their prehistoric fronds overhead, creating a living canopy that filtered the morning sunlight into ethereal green beams. The air was thick with humidity and alive with sound – the melodic calls of 'apapane birds echoed through the forest, while the distinctive cry of the 'i'iwi punctuated the constant background chorus of buzzing insects and rustling leaves.\n\nAs we picked our way along the narrow trail, each step carefully placed on the rain-slicked earth, the dense jungle gradually began to thin. Through gaps in the vegetation, tantalizing glimpses of the valley below emerged, hinting at the spectacular vista that awaited us at the summit. The sweet scent of wild ginger mingled with the earthy aroma of damp soil, while delicate 'ōhi'a lehua blossoms dotted the path with splashes of crimson, their presence a hopeful sign of the forest's resilience against environmental challenges.\n",
3333
"./content/posts/mountains.md": "---\ndate: 2025-03-02\ntitle: \"Mountain Tops\"\nsummary: \"Ending our hike with mountain views\"\ncategories:\n - Hiking\nimage: mountains.jpg\n---\n\nThe day's journey took an unexpected turn when we stumbled upon a hidden waterfall cascading down moss-covered rocks. The thundering sound of water drew us off our planned trail, and we spent a magical hour exploring the crystal-clear pool at its base, watching rainbow-like mist dance in the afternoon sun. What started as a simple jungle trek transformed into an adventure of discovery, with exotic birds calling from the canopy above and vibrant butterflies fluttering between patches of filtered sunlight.\n\nAs dusk approached, we finally reached the summit, where jagged peaks pierced through a sea of clouds stretching endlessly toward the horizon. However, our triumph was short-lived as we realized we'd need to navigate the descent in fading light. Armed with only two headlamps between the four of us, we carefully picked our way down the rocky trail, our hearts racing with each uncertain step. The stars emerged one by one above us, and the distant lights of our hotel served as a welcome beacon, guiding us safely back just as true darkness settled over the mountains.\n",

‎examples/react-cra/blog-starter/vite.config.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { defineConfig } from 'vite'
2+
import react from '@vitejs/plugin-react'
3+
import tsconfigPaths from 'vite-tsconfig-paths'
4+
import { tanstackRouter } from '@tanstack/router-plugin/vite'
5+
import contentCollections from '@content-collections/vite'
6+
import tailwindcss from '@tailwindcss/vite'
7+
8+
// https://vitejs.dev/config/
9+
export default defineConfig({
10+
plugins: [
11+
// Router plugin should come before react
12+
tanstackRouter(),
13+
react(),
14+
tsconfigPaths(),
15+
contentCollections(),
16+
tailwindcss(),
17+
],
18+
})

0 commit comments

Comments
 (0)