-
-
Notifications
You must be signed in to change notification settings - Fork 10.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add basic v7 template #12029
Add basic v7 template #12029
Changes from all commits
1bfae78
5723d6f
baf07cf
f89e18c
5af9634
f5d3d6e
ba4be6b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,6 +15,7 @@ | |
- alany411 | ||
- alberto | ||
- alexandernanberg | ||
- alexanderson1993 | ||
- alexlbr | ||
- AmRo045 | ||
- amsal | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
package-lock.json | ||
yarn.lock | ||
pnpm-lock.yaml | ||
pnpm-lock.yml |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
node_modules | ||
|
||
/.cache | ||
/build | ||
.env |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
# Welcome to React Router! | ||
|
||
- 📖 [React Router docs](https://reactrouter.com/dev) | ||
|
||
## Development | ||
|
||
Run the dev server: | ||
|
||
```shellscript | ||
npm run dev | ||
``` | ||
|
||
## Deployment | ||
|
||
First, build your app for production: | ||
|
||
```sh | ||
npm run build | ||
``` | ||
|
||
Then run the app in production mode: | ||
|
||
```sh | ||
npm start | ||
``` | ||
|
||
Now you'll need to pick a host to deploy it to. | ||
|
||
### DIY | ||
|
||
If you're familiar with deploying Node applications, the built-in app server is production-ready. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is there a way to deploy to CF already? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah, I think we ported over the CF packages, so I haven't messed with it yet and I don't know if we have any documentation, however I'm not sure what if any breaking changes there are |
||
|
||
Make sure to deploy the output of `npm run build` | ||
|
||
- `build/server` | ||
- `build/client` | ||
|
||
## Styling | ||
|
||
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. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
@import "tailwindcss"; | ||
|
||
@theme { | ||
--font-family-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; | ||
} | ||
|
||
html, | ||
body { | ||
@apply bg-white dark:bg-gray-950; | ||
|
||
@media (prefers-color-scheme: dark) { | ||
color-scheme: dark; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router"; | ||
import type { LinksFunction } from "react-router"; | ||
|
||
import "./app.css"; | ||
|
||
export const links: 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> | ||
{children} | ||
<ScrollRestoration /> | ||
<Scripts /> | ||
</body> | ||
</html> | ||
); | ||
} | ||
|
||
export default function App() { | ||
return <Outlet />; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
import type { RouteConfig } from "@react-router/dev/routes"; | ||
import { index } from "@react-router/dev/routes"; | ||
|
||
export const routes: RouteConfig = [index("routes/home.tsx")]; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
import type { MetaFunction } from "react-router"; | ||
|
||
export const meta: MetaFunction = () => { | ||
return [ | ||
{ title: "New Remix App" }, | ||
{ name: "description", content: "Welcome to Remix!" }, | ||
]; | ||
}; | ||
|
||
export default function Index() { | ||
return ( | ||
<div className="flex h-screen items-center justify-center"> | ||
<div className="flex flex-col items-center gap-16"> | ||
<header className="flex flex-col items-center gap-9"> | ||
<h1 className="leading text-2xl font-bold text-gray-800 dark:text-gray-100"> | ||
Welcome to <span className="sr-only">React Router</span> | ||
</h1> | ||
<div className="w-2xl max-w-[100vw] p-4 aspect-[920/96]"> | ||
<img | ||
src="/logo-light.png" | ||
alt="Remix" | ||
className="block w-full dark:hidden" | ||
/> | ||
<img | ||
src="/logo-dark.png" | ||
alt="Remix" | ||
className="hidden w-full dark:block" | ||
/> | ||
</div> | ||
</header> | ||
<nav className="flex flex-col items-center justify-center gap-4 rounded-3xl border border-gray-200 p-6 dark:border-gray-700"> | ||
<p className="leading-6 text-gray-700 dark:text-gray-200"> | ||
What's next? | ||
</p> | ||
<ul> | ||
{resources.map(({ href, text, icon }) => ( | ||
<li key={href}> | ||
<a | ||
className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline dark:text-blue-500" | ||
href={href} | ||
target="_blank" | ||
rel="noreferrer" | ||
> | ||
{icon} | ||
{text} | ||
</a> | ||
</li> | ||
))} | ||
</ul> | ||
</nav> | ||
</div> | ||
</div> | ||
); | ||
} | ||
|
||
const resources = [ | ||
{ | ||
href: "https://reactrouter.com/dev", | ||
text: "React Router Docs", | ||
icon: ( | ||
<svg | ||
xmlns="http://www.w3.org/2000/svg" | ||
width="24" | ||
height="20" | ||
viewBox="0 0 20 20" | ||
fill="none" | ||
className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300" | ||
> | ||
<path | ||
d="M9.99981 10.0751V9.99992M17.4688 17.4688C15.889 19.0485 11.2645 16.9853 7.13958 12.8604C3.01467 8.73546 0.951405 4.11091 2.53116 2.53116C4.11091 0.951405 8.73546 3.01467 12.8604 7.13958C16.9853 11.2645 19.0485 15.889 17.4688 17.4688ZM2.53132 17.4688C0.951566 15.8891 3.01483 11.2645 7.13974 7.13963C11.2647 3.01471 15.8892 0.951453 17.469 2.53121C19.0487 4.11096 16.9854 8.73551 12.8605 12.8604C8.73562 16.9853 4.11107 19.0486 2.53132 17.4688Z" | ||
strokeWidth="1.5" | ||
strokeLinecap="round" | ||
/> | ||
</svg> | ||
), | ||
}, | ||
{ | ||
href: "https://rmx.as/discord", | ||
text: "Join Discord", | ||
icon: ( | ||
<svg | ||
xmlns="http://www.w3.org/2000/svg" | ||
width="24" | ||
height="20" | ||
viewBox="0 0 24 20" | ||
fill="none" | ||
className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300" | ||
> | ||
<path | ||
d="M15.0686 1.25995L14.5477 1.17423L14.2913 1.63578C14.1754 1.84439 14.0545 2.08275 13.9422 2.31963C12.6461 2.16488 11.3406 2.16505 10.0445 2.32014C9.92822 2.08178 9.80478 1.84975 9.67412 1.62413L9.41449 1.17584L8.90333 1.25995C7.33547 1.51794 5.80717 1.99419 4.37748 2.66939L4.19 2.75793L4.07461 2.93019C1.23864 7.16437 0.46302 11.3053 0.838165 15.3924L0.868838 15.7266L1.13844 15.9264C2.81818 17.1714 4.68053 18.1233 6.68582 18.719L7.18892 18.8684L7.50166 18.4469C7.96179 17.8268 8.36504 17.1824 8.709 16.4944L8.71099 16.4904C10.8645 17.0471 13.128 17.0485 15.2821 16.4947C15.6261 17.1826 16.0293 17.8269 16.4892 18.4469L16.805 18.8725L17.3116 18.717C19.3056 18.105 21.1876 17.1751 22.8559 15.9238L23.1224 15.724L23.1528 15.3923C23.5873 10.6524 22.3579 6.53306 19.8947 2.90714L19.7759 2.73227L19.5833 2.64518C18.1437 1.99439 16.6386 1.51826 15.0686 1.25995ZM16.6074 10.7755L16.6074 10.7756C16.5934 11.6409 16.0212 12.1444 15.4783 12.1444C14.9297 12.1444 14.3493 11.6173 14.3493 10.7877C14.3493 9.94885 14.9378 9.41192 15.4783 9.41192C16.0471 9.41192 16.6209 9.93851 16.6074 10.7755ZM8.49373 12.1444C7.94513 12.1444 7.36471 11.6173 7.36471 10.7877C7.36471 9.94885 7.95323 9.41192 8.49373 9.41192C9.06038 9.41192 9.63892 9.93712 9.6417 10.7815C9.62517 11.6239 9.05462 12.1444 8.49373 12.1444Z" | ||
strokeWidth="1.5" | ||
/> | ||
</svg> | ||
), | ||
}, | ||
]; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
{ | ||
"private": true, | ||
"sideEffects": false, | ||
"type": "module", | ||
"scripts": { | ||
"dev": "react-router dev", | ||
"build": "react-router build", | ||
"start": "react-router-serve ./build/server/index.js", | ||
"typecheck": "tsc" | ||
}, | ||
"dependencies": { | ||
"@react-router/node": "0.0.0-nightly-8f12ed19a-20240924", | ||
"@react-router/serve": "0.0.0-nightly-8f12ed19a-20240924", | ||
"@tailwindcss/vite": "^4.0.0-alpha.24", | ||
"isbot": "^5.1.17", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I removed a bunch of dependencies (like eslint). I don't know if Also moved to tailwind alpha since it removes a bunch of files and I imagine it'll be released before we release v7 official. If that's no the case that's fine, I'll just switch back There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. isbot is used on the entry.server on Remix apps, I don't see that file here, is it removed? Or just hidden? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Thank you. 🙏 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Yeah, I removed We may add them back as default visible, I was just trying to make this super simple |
||
"react": "^18.3.1", | ||
"react-dom": "^18.3.1", | ||
"react-router": "0.0.0-nightly-8f12ed19a-20240924" | ||
}, | ||
"devDependencies": { | ||
"@react-router/dev": "0.0.0-nightly-8f12ed19a-20240924", | ||
"@types/react": "^18.3.9", | ||
"@types/react-dom": "^18.3.0", | ||
"tailwindcss": "^4.0.0-alpha.24", | ||
"typescript": "^5.6.2", | ||
"vite": "^5.4.7", | ||
"vite-tsconfig-paths": "^5.0.1" | ||
}, | ||
"engines": { | ||
"node": ">=20.0.0" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
{ | ||
"include": [ | ||
"**/*.ts", | ||
"**/*.tsx", | ||
"**/.server/**/*.ts", | ||
"**/.server/**/*.tsx", | ||
"**/.client/**/*.ts", | ||
"**/.client/**/*.tsx" | ||
], | ||
"compilerOptions": { | ||
"lib": ["DOM", "DOM.Iterable", "ES2022"], | ||
"types": ["@react-router/node", "vite/client"], | ||
"isolatedModules": true, | ||
"esModuleInterop": true, | ||
"jsx": "react-jsx", | ||
"module": "ESNext", | ||
"moduleResolution": "Bundler", | ||
"resolveJsonModule": true, | ||
"target": "ES2022", | ||
"strict": true, | ||
"allowJs": true, | ||
"skipLibCheck": true, | ||
"forceConsistentCasingInFileNames": true, | ||
"baseUrl": ".", | ||
"paths": { | ||
"~/*": ["./app/*"] | ||
}, | ||
"noEmit": true | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import tailwindcss from "@tailwindcss/vite"; | ||
import { reactRouter } from "@react-router/dev/vite"; | ||
import tsconfigPaths from "vite-tsconfig-paths"; | ||
import { defineConfig } from "vite"; | ||
|
||
export default defineConfig({ | ||
optimizeDeps: { | ||
include: ["react", "react-dom"], | ||
}, | ||
plugins: [tailwindcss(), reactRouter(), tsconfigPaths()], | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Right now I have everything pointing to
/dev
since this is all in the pre-release. We'll of course need to clean this up before the final releaseThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That link doesn't work, https://reactrouter.com/en/dev that one does it
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks Sergio! Yeah, the links are anticipating some changes to the react-router site. I'm planning to go through them all again before we release the prerelease