Skip to content

Commit 98312c9

Browse files
serhalpserhalp
committed
feat: add Netlify template
It's just the default React Router template from `npx create-react-router@latest`, with these changes: - removed all Docker stuff - installed Netlify plugin and added it to `vite.config.ts` - added temporary `netlify.toml` - updated the README
1 parent f3f38fc commit 98312c9

17 files changed

+5150
-0
lines changed

‎.gitignore

+6
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/

‎README.md

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# React Router Netlify Template
2+
3+
A modern, production-ready template for building full-stack React applications using React Router,
4+
deployed to Netlify.
5+
6+
## Features
7+
8+
- 🚀 Server-side rendering
9+
- ⚡️ Hot Module Replacement (HMR)
10+
- 📦 Asset bundling and optimization
11+
- 🔄 Data loading and mutations
12+
- 🔒 TypeScript by default
13+
- 🎉 TailwindCSS for styling
14+
- 📖 [React Router docs](https://reactrouter.com/)
15+
- 💻 Configured for deployment to Netlify
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+
This template is configured for deployment to Netlify.
48+
49+
See <https://docs.netlify.com/welcome/add-new-site/> to add this project as a site
50+
in your Netlify account.
51+
52+
## Styling
53+
54+
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.
55+
56+
---
57+
58+
Built with ❤️ using React Router.

‎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+
}

‎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+
}

‎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;

‎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+
}

‎app/welcome/logo-dark.svg

+23
Loading

‎app/welcome/logo-light.svg

+23
Loading

0 commit comments

Comments
 (0)