Skip to content

Commit b5f60cd

Browse files
LekoArtsLekoArts
committed
init
0 parents  commit b5f60cd

15 files changed

+446
-0
lines changed

Diff for: ‎.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.env
2+
!.env.example
3+
.DS_Store
4+
.react-router
5+
build
6+
node_modules
7+
*.tsbuildinfo

Diff for: ‎README.md

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

Diff for: ‎app/app.css

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
html,
6+
body {
7+
@apply bg-white dark:bg-gray-950;
8+
9+
@media (prefers-color-scheme: dark) {
10+
color-scheme: dark;
11+
}
12+
}

Diff for: ‎app/root.tsx

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
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 stylesheet from "./app.css?url";
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+
{ rel: "stylesheet", href: stylesheet },
25+
];
26+
27+
export function Layout({ children }: { children: React.ReactNode }) {
28+
return (
29+
<html lang="en">
30+
<head>
31+
<meta charSet="utf-8" />
32+
<meta name="viewport" content="width=device-width, initial-scale=1" />
33+
<Meta />
34+
<Links />
35+
</head>
36+
<body>
37+
{children}
38+
<ScrollRestoration />
39+
<Scripts />
40+
</body>
41+
</html>
42+
);
43+
}
44+
45+
export default function App() {
46+
return <Outlet />;
47+
}
48+
49+
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
50+
let message = "Oops!";
51+
let details = "An unexpected error occurred.";
52+
let stack: string | undefined;
53+
54+
if (isRouteErrorResponse(error)) {
55+
message = error.status === 404 ? "404" : "Error";
56+
details =
57+
error.status === 404
58+
? "The requested page could not be found."
59+
: error.statusText || details;
60+
} else if (import.meta.env.DEV && error && error instanceof Error) {
61+
details = error.message;
62+
stack = error.stack;
63+
}
64+
65+
return (
66+
<main className="pt-16 p-4 container mx-auto">
67+
<h1>{message}</h1>
68+
<p>{details}</p>
69+
{stack && (
70+
<pre className="w-full p-4 overflow-x-auto">
71+
<code>{stack}</code>
72+
</pre>
73+
)}
74+
</main>
75+
);
76+
}

Diff for: ‎app/routes.ts

+3
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;

Diff for: ‎app/routes/home.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { Route } from "./+types/home";
2+
import { Welcome } from "../welcome/welcome";
3+
4+
export function meta({}: Route.MetaArgs) {
5+
return [
6+
{ title: "New React Router App" },
7+
{ name: "description", content: "Welcome to React Router!" },
8+
];
9+
}
10+
11+
export default function Home() {
12+
return <Welcome />;
13+
}

Diff for: ‎app/welcome/logo-dark.svg

+23
Loading

Diff for: ‎app/welcome/logo-light.svg

+23
Loading

0 commit comments

Comments
 (0)