dsb/react-starter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
cloud0x42
2026-03-01 02:08:17 +01:00
commit 356cc94bee
20 changed files with 4781 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.dockerignore Normal file
View File

@@ -0,0 +1,4 @@
.react-router
build
node_modules
README.md

7
.gitignore vendored Normal file
View File

@@ -0,0 +1,7 @@
.DS_Store
.env
/node_modules/
# React Router
/.react-router/
/build/

22
Dockerfile Normal file
View File

@@ -0,0 +1,22 @@
FROM node:24-alpine AS development-dependencies-env
COPY . /app
WORKDIR /app
RUN npm ci
FROM node:24-alpine AS production-dependencies-env
COPY ./package.json package-lock.json /app/
WORKDIR /app
RUN npm ci --omit=dev
FROM node:24-alpine AS build-env
COPY . /app/
COPY --from=development-dependencies-env /app/node_modules /app/node_modules
WORKDIR /app
RUN npm run build
FROM node:24-alpine
COPY ./package.json package-lock.json /app/
COPY --from=production-dependencies-env /app/node_modules /app/node_modules
COPY --from=build-env /app/build /app/build
WORKDIR /app
CMD ["npm", "run", "start"]

32
README.md Normal file
View File

@@ -0,0 +1,32 @@
# Welcome to React!
This example code features a modern, production-ready template for building full-stack React applications.
## Features
- 🚀 Server-side rendering
- ⚡️ Hot Module Replacement (HMR)
- 📦 Asset bundling and optimization
- 🔄 Data loading and mutations
- 🔒 TypeScript by default
- 🎉 TailwindCSS for styling
## Getting Started
### Installation
Install the dependencies:
```bash
npm install
```
### Development
Start the development server:
```bash
npm run dev
```

6
app/app.css Normal file
View File

@@ -0,0 +1,6 @@
@import "tailwindcss";
@theme {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

7
app/components/error/ErrorView.tsx Normal file
View File

@@ -0,0 +1,7 @@
export function ErrorView() {
return (
<div>
<p>Ups, an unexpected error occurred.</p>
</div>
);
}

7
app/components/loading/LoadingView.tsx Normal file
View File

@@ -0,0 +1,7 @@
export function LoadingView() {
return (
<div className="flex justify-center items-center">
<p className="sr-only">Loading...</p>
</div>
);
}

7
app/lib/fetch.ts Normal file
View File

@@ -0,0 +1,7 @@
export const fetchApi = async <T = any>(url: string): Promise<T> => {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
};

11
app/pages/home/HomePage.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { Link } from "react-router";
export function HomePage() {
return (
<div className="flex flex-col items-center justify-center min-h-[90vh]">
<p>Hello React!</p>
<Link to="/person/John" className="text-blue-500 mt-10">Go to Person</Link>
</div>
);
}

13
app/pages/person/PersonPage.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { Link, useParams } from "react-router";
export function PersonPage() {
const { id } = useParams();
return (
<div className="flex flex-col items-center justify-center min-h-[90vh]">
<p>Person Page: {id}</p>
<p>(Retrieved from the URL params)</p>
<Link to="/" className="text-blue-500 mt-10">Go to Home</Link>
</div>
);
}

86
app/root.tsx Normal file
View File

@@ -0,0 +1,86 @@
import {
isRouteErrorResponse,
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "react-router";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient();
import type { Route } from "./+types/root";
import "./app.css";
export const links: Route.LinksFunction = () => [
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
crossOrigin: "anonymous",
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
},
];
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<div className="container mx-auto">
<main className="pt-10 pb-4">
{children}
</main>
</div>
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Outlet />
</QueryClientProvider>
);
}
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
let message = "Oops!";
let details = "An unexpected error occurred.";
let stack: string | undefined;
if (isRouteErrorResponse(error)) {
message = error.status === 404 ? "404" : "Error";
details =
error.status === 404
? "The requested page could not be found."
: error.statusText || details;
} else if (import.meta.env.DEV && error && error instanceof Error) {
details = error.message;
stack = error.stack;
}
return (
<main className="pt-16 p-4 container mx-auto">
<h1>{message}</h1>
<p>{details}</p>
{stack && (
<pre className="w-full p-4 overflow-x-auto">
<code>{stack}</code>
</pre>
)}
</main>
);
}

6
app/routes.ts Normal file
View File

@@ -0,0 +1,6 @@
import { type RouteConfig, index, route } from "@react-router/dev/routes";
export default [
index("routes/home.tsx"),
route("person/:id", "routes/person.tsx"),
] satisfies RouteConfig;

12
app/routes/home.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { HomePage } from "../pages/home/HomePage";
export function meta() {
return [
{ title: "React Starter" },
{ name: "description", content: "Welcome to React!" },
];
}
export default function Home() {
return <HomePage />;
}

6
app/routes/person.tsx Normal file
View File

@@ -0,0 +1,6 @@
import { PersonPage } from "../pages/person/PersonPage";
export default function Person() {
return <PersonPage />;
}

4478
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

34
package.json Normal file
View File

@@ -0,0 +1,34 @@
{
"name": "react-starter",
"private": true,
"type": "module",
"scripts": {
"build": "react-router build",
"dev": "react-router dev",
"start": "react-router-serve ./build/server/index.js",
"typecheck": "react-router typegen && tsc"
},
"dependencies": {
"@react-router/node": "7.12.0",
"@react-router/serve": "7.12.0",
"@tanstack/react-query": "^5.90.21",
"clsx": "^2.1.1",
"isbot": "^5.1.31",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"react-is": "^19.2.4",
"react-router": "7.12.0",
"recharts": "^3.7.0"
},
"devDependencies": {
"@react-router/dev": "7.12.0",
"@tailwindcss/vite": "^4.1.13",
"@types/node": "^22",
"@types/react": "^19.2.7",
"@types/react-dom": "^19.2.3",
"tailwindcss": "^4.1.13",
"typescript": "^5.9.2",
"vite": "^7.1.7",
"vite-tsconfig-paths": "^5.1.4"
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

7
react-router.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import type { Config } from "@react-router/dev/config";
export default {
// Config options...
// Server-side render by default, to enable SPA mode set this to `false`
ssr: true,
} satisfies Config;

28
tsconfig.json Normal file
View File

@@ -0,0 +1,28 @@
{
"include": [
"**/*",
"**/.server/**/*",
"**/.client/**/*",
".react-router/types/**/*"
],
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"types": ["node", "vite/client"],
"target": "ES2022",
"module": "ES2022",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"rootDirs": [".", "./.react-router/types"],
"baseUrl": ".",
"paths": {
"~/*": ["./app/*"]
},
"esModuleInterop": true,
"verbatimModuleSyntax": true,
"noEmit": true,
"noImplicitAny": false,
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": true
}
}

8
vite.config.ts Normal file
View File

@@ -0,0 +1,8 @@
import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
});