Skip to content

Commit d370cc7

Browse files
rfoelrfoel
committed
fix: lock the overlay SVG width and height
1 parent 99d479b commit d370cc7

35 files changed

+5592
-3
lines changed

‎examples/ssr/.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

‎examples/ssr/.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/

‎examples/ssr/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"]

‎examples/ssr/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.

example/src/index.css renamed to examples/ssr/app/app.css

File renamed without changes.

example/src/assets/react.svg renamed to examples/ssr/app/assets/react.svg

File renamed without changes.

example/src/assets/vite.png renamed to examples/ssr/app/assets/vite.png

File renamed without changes.

‎examples/ssr/app/root.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import {
2+
isRouteErrorResponse,
3+
Links,
4+
Meta,
5+
Outlet,
6+
Scripts,
7+
ScrollRestoration,
8+
} from "react-router";
9+
10+
import type { Route } from "./+types/root";
11+
import "./app.css";
12+
13+
export const links: Route.LinksFunction = () => [
14+
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
15+
{
16+
rel: "preconnect",
17+
href: "https://fonts.gstatic.com",
18+
crossOrigin: "anonymous",
19+
},
20+
{
21+
rel: "stylesheet",
22+
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
23+
},
24+
];
25+
26+
export function Layout({ children }: { children: React.ReactNode }) {
27+
return (
28+
<html lang="en">
29+
<head>
30+
<meta charSet="utf-8" />
31+
<meta name="viewport" content="width=device-width, initial-scale=1" />
32+
<Meta />
33+
<Links />
34+
</head>
35+
<body>
36+
{children}
37+
<ScrollRestoration />
38+
<Scripts />
39+
</body>
40+
</html>
41+
);
42+
}
43+
44+
export default function App() {
45+
return <Outlet />;
46+
}
47+
48+
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
49+
let message = "Oops!";
50+
let details = "An unexpected error occurred.";
51+
let stack: string | undefined;
52+
53+
if (isRouteErrorResponse(error)) {
54+
message = error.status === 404 ? "404" : "Error";
55+
details =
56+
error.status === 404
57+
? "The requested page could not be found."
58+
: error.statusText || details;
59+
} else if (import.meta.env.DEV && error && error instanceof Error) {
60+
details = error.message;
61+
stack = error.stack;
62+
}
63+
64+
return (
65+
<main className="pt-16 p-4 container mx-auto">
66+
<h1>{message}</h1>
67+
<p>{details}</p>
68+
{stack && (
69+
<pre className="w-full p-4 overflow-x-auto">
70+
<code>{stack}</code>
71+
</pre>
72+
)}
73+
</main>
74+
);
75+
}

‎examples/ssr/app/routes.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { type RouteConfig, index } from "@react-router/dev/routes";
2+
3+
export default [index("routes/home.tsx")] satisfies RouteConfig;

‎examples/ssr/app/routes/home.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import type { Route } from "./+types/home";
2+
3+
export function meta({}: Route.MetaArgs) {
4+
return [
5+
{ title: "New React Router App" },
6+
{ name: "description", content: "Welcome to React Router!" },
7+
];
8+
}
9+
10+
import { useRef } from "react";
11+
import { ReactQR } from "../../../../src/ReactQR";
12+
import ReactLogo from "../assets/react.svg?react";
13+
import ViteLogo from "../assets/vite.png?inline";
14+
15+
export default function Home() {
16+
const qrRef = useRef<SVGSVGElement>(null);
17+
18+
return (
19+
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
20+
<ReactQR value="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
21+
22+
<ReactQR ref={qrRef} value="https://react.dev" errorCorrectionLevel="M">
23+
<ReactLogo width={32} height={32} />
24+
</ReactQR>
25+
26+
<ReactQR value="https://vite.dev" errorCorrectionLevel="M">
27+
<image href={ViteLogo} width={32} height={32} />
28+
</ReactQR>
29+
</div>
30+
);
31+
}

0 commit comments

Comments
 (0)