Skip to content

Commit 5fdfe97

Browse files
fossamagnafossamagna
authored
feat: add Vite 7 support (#111)
1 parent 033dbf5 commit 5fdfe97

File tree

20 files changed

+568
-18
lines changed

20 files changed

+568
-18
lines changed

‎.changeset/mighty-parrots-kick.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"vite-plugin-react-router-amplify-hosting": minor
3+
---
4+
5+
feat: add Vite 7 support

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"homepage": "https://github.com/fossamagna/react-router-amplify/blob/main/README.md",
1616
"packageManager": "[email protected]",
1717
"engines": {
18-
"node": "^20.0.0 || >=22.0.0"
18+
"node": "^20.19.0 || >=22.12.0"
1919
},
2020
"scripts": {
2121
"build": "pnpm --if-present --recursive build",

‎packages/vite-plugin-react-router-amplify-hosting/integration/build.test.ts‎

Lines changed: 126 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import { afterEach, describe, expect, test } from "vitest";
22
import { join } from "node:path";
33
import { stat, rm } from "node:fs/promises";
44

5-
import { build, createProject, npmInstall, reactRouterConfig } from "./helpers/vite";
5+
import {
6+
build,
7+
createProject,
8+
npmInstall,
9+
reactRouterConfig,
10+
} from "./helpers/vite";
611

712
describe("build test", () => {
813
let cwd: string;
@@ -15,9 +20,23 @@ describe("build test", () => {
1520
cwd,
1621
});
1722
console.log(returns.stderr.toString());
18-
expect((await stat(join(cwd, ".amplify-hosting", "deploy-manifest.json"))).isFile()).toBe(true);
19-
expect((await stat(join(cwd, ".amplify-hosting", "compute", "default", "server.mjs"))).isFile()).toBe(true);
20-
expect((await stat(join(cwd, ".amplify-hosting", "static", "assets"))).isDirectory()).toBe(true);
23+
expect(
24+
(
25+
await stat(join(cwd, ".amplify-hosting", "deploy-manifest.json"))
26+
).isFile(),
27+
).toBe(true);
28+
expect(
29+
(
30+
await stat(
31+
join(cwd, ".amplify-hosting", "compute", "default", "server.mjs"),
32+
)
33+
).isFile(),
34+
).toBe(true);
35+
expect(
36+
(
37+
await stat(join(cwd, ".amplify-hosting", "static", "assets"))
38+
).isDirectory(),
39+
).toBe(true);
2140
});
2241

2342
test("vite 6", async () => {
@@ -27,30 +46,120 @@ describe("build test", () => {
2746
cwd,
2847
});
2948
console.log(returns.stderr.toString());
30-
expect((await stat(join(cwd, ".amplify-hosting", "deploy-manifest.json"))).isFile()).toBe(true);
31-
expect((await stat(join(cwd, ".amplify-hosting", "compute", "default", "server.mjs"))).isFile()).toBe(true);
32-
expect((await stat(join(cwd, ".amplify-hosting", "static", "assets"))).isDirectory()).toBe(true);
49+
expect(
50+
(
51+
await stat(join(cwd, ".amplify-hosting", "deploy-manifest.json"))
52+
).isFile(),
53+
).toBe(true);
54+
expect(
55+
(
56+
await stat(
57+
join(cwd, ".amplify-hosting", "compute", "default", "server.mjs"),
58+
)
59+
).isFile(),
60+
).toBe(true);
61+
expect(
62+
(
63+
await stat(join(cwd, ".amplify-hosting", "static", "assets"))
64+
).isDirectory(),
65+
).toBe(true);
3366
});
3467

3568
test("vite 6 with unstable_viteEnvironmentApi future flag", async () => {
36-
cwd = await createProject({
37-
"react-router.config.ts": reactRouterConfig({
38-
viteEnvironmentApi: true,
39-
ssr: true,
40-
}),
41-
}, "vite-6-template");
69+
cwd = await createProject(
70+
{
71+
"react-router.config.ts": reactRouterConfig({
72+
viteEnvironmentApi: true,
73+
ssr: true,
74+
}),
75+
},
76+
"vite-6-template",
77+
);
4278
await npmInstall({ cwd });
4379
const returns = await build({
4480
cwd,
4581
});
4682
console.log(returns.stderr.toString());
47-
expect((await stat(join(cwd, ".amplify-hosting", "deploy-manifest.json"))).isFile()).toBe(true);
48-
expect((await stat(join(cwd, ".amplify-hosting", "compute", "default", "server.mjs"))).isFile()).toBe(true);
49-
expect((await stat(join(cwd, ".amplify-hosting", "static", "assets"))).isDirectory()).toBe(true);
83+
expect(
84+
(
85+
await stat(join(cwd, ".amplify-hosting", "deploy-manifest.json"))
86+
).isFile(),
87+
).toBe(true);
88+
expect(
89+
(
90+
await stat(
91+
join(cwd, ".amplify-hosting", "compute", "default", "server.mjs"),
92+
)
93+
).isFile(),
94+
).toBe(true);
95+
expect(
96+
(
97+
await stat(join(cwd, ".amplify-hosting", "static", "assets"))
98+
).isDirectory(),
99+
).toBe(true);
100+
});
101+
102+
test("vite 7", async () => {
103+
cwd = await createProject({}, "vite-7-template");
104+
await npmInstall({ cwd });
105+
const returns = await build({
106+
cwd,
107+
});
108+
console.log(returns.stderr.toString());
109+
expect(
110+
(
111+
await stat(join(cwd, ".amplify-hosting", "deploy-manifest.json"))
112+
).isFile(),
113+
).toBe(true);
114+
expect(
115+
(
116+
await stat(
117+
join(cwd, ".amplify-hosting", "compute", "default", "server.mjs"),
118+
)
119+
).isFile(),
120+
).toBe(true);
121+
expect(
122+
(
123+
await stat(join(cwd, ".amplify-hosting", "static", "assets"))
124+
).isDirectory(),
125+
).toBe(true);
126+
});
127+
128+
test("vite 7 with unstable_viteEnvironmentApi future flag", async () => {
129+
cwd = await createProject(
130+
{
131+
"react-router.config.ts": reactRouterConfig({
132+
viteEnvironmentApi: true,
133+
ssr: true,
134+
}),
135+
},
136+
"vite-7-template",
137+
);
138+
await npmInstall({ cwd });
139+
const returns = await build({
140+
cwd,
141+
});
142+
console.log(returns.stderr.toString());
143+
expect(
144+
(
145+
await stat(join(cwd, ".amplify-hosting", "deploy-manifest.json"))
146+
).isFile(),
147+
).toBe(true);
148+
expect(
149+
(
150+
await stat(
151+
join(cwd, ".amplify-hosting", "compute", "default", "server.mjs"),
152+
)
153+
).isFile(),
154+
).toBe(true);
155+
expect(
156+
(
157+
await stat(join(cwd, ".amplify-hosting", "static", "assets"))
158+
).isDirectory(),
159+
).toBe(true);
50160
});
51161

52162
afterEach(async () => {
53163
await rm(cwd, { recursive: true, force: true });
54164
});
55165
});
56-

‎packages/vite-plugin-react-router-amplify-hosting/integration/helpers/vite-7-template/.dockerignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.react-router
2+
build
3+
node_modules
4+
README.md

‎packages/vite-plugin-react-router-amplify-hosting/integration/helpers/vite-7-template/.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.DS_Store
2+
/node_modules/
3+
4+
# React Router
5+
/.react-router/
6+
/build/

‎packages/vite-plugin-react-router-amplify-hosting/integration/helpers/vite-7-template/Dockerfile‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
FROM node:20-alpine AS development-dependencies-env
2+
COPY . /app
3+
WORKDIR /app
4+
RUN npm ci
5+
6+
FROM node:20-alpine AS production-dependencies-env
7+
COPY ./package.json package-lock.json /app/
8+
WORKDIR /app
9+
RUN npm ci --omit=dev
10+
11+
FROM node:20-alpine AS build-env
12+
COPY . /app/
13+
COPY --from=development-dependencies-env /app/node_modules /app/node_modules
14+
WORKDIR /app
15+
RUN npm run build
16+
17+
FROM node:20-alpine
18+
COPY ./package.json package-lock.json /app/
19+
COPY --from=production-dependencies-env /app/node_modules /app/node_modules
20+
COPY --from=build-env /app/build /app/build
21+
WORKDIR /app
22+
CMD ["npm", "run", "start"]

‎packages/vite-plugin-react-router-amplify-hosting/integration/helpers/vite-7-template/README.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
# Welcome to React Router!
2+
3+
A modern, production-ready template for building full-stack React applications using React Router.
4+
5+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
6+
7+
## Features
8+
9+
- 🚀 Server-side rendering
10+
- ⚡️ Hot Module Replacement (HMR)
11+
- 📦 Asset bundling and optimization
12+
- 🔄 Data loading and mutations
13+
- 🔒 TypeScript by default
14+
- 🎉 TailwindCSS for styling
15+
- 📖 [React Router docs](https://reactrouter.com/)
16+
17+
## Getting Started
18+
19+
### Installation
20+
21+
Install the dependencies:
22+
23+
```bash
24+
npm install
25+
```
26+
27+
### Development
28+
29+
Start the development server with HMR:
30+
31+
```bash
32+
npm run dev
33+
```
34+
35+
Your application will be available at `http://localhost:5173`.
36+
37+
## Building for Production
38+
39+
Create a production build:
40+
41+
```bash
42+
npm run build
43+
```
44+
45+
## Deployment
46+
47+
### Docker Deployment
48+
49+
To build and run using Docker:
50+
51+
```bash
52+
docker build -t my-app .
53+
54+
# Run the container
55+
docker run -p 3000:3000 my-app
56+
```
57+
58+
The containerized application can be deployed to any platform that supports Docker, including:
59+
60+
- AWS ECS
61+
- Google Cloud Run
62+
- Azure Container Apps
63+
- Digital Ocean App Platform
64+
- Fly.io
65+
- Railway
66+
67+
### DIY Deployment
68+
69+
If you're familiar with deploying Node applications, the built-in app server is production-ready.
70+
71+
Make sure to deploy the output of `npm run build`
72+
73+
```
74+
├── package.json
75+
├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
76+
├── build/
77+
│ ├── client/ # Static assets
78+
│ └── server/ # Server-side code
79+
```
80+
81+
## Styling
82+
83+
This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
84+
85+
---
86+
87+
Built with ❤️ using React Router.

‎packages/vite-plugin-react-router-amplify-hosting/integration/helpers/vite-7-template/app/app.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@import "tailwindcss";
2+
3+
@theme {
4+
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
5+
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
6+
}
7+
8+
html,
9+
body {
10+
@apply bg-white dark:bg-gray-950;
11+
12+
@media (prefers-color-scheme: dark) {
13+
color-scheme: dark;
14+
}
15+
}

0 commit comments

Comments
 (0)