Skip to content

Commit 068194a

Browse files
chaancechaance
committed
init
0 parents  commit 068194a

File tree

1,311 files changed

+39196
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

1,311 files changed

+39196
-0
lines changed

‎.gitignore

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.DS_Store
2+
node_modules
3+
yarn-error.log
4+
.eslintcache
5+
.tmp
6+
package-lock.json
7+
yarn.lock
8+
pnpm-lock.yaml
9+
pnpm-lock.yml

‎README.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Remix Examples
2+
3+
Welcome to `@remix-run/examples`!
4+
5+
If you have an example you'd like to share, please submit a pull request!
6+
7+
**This is a community-driven repository.**. Here you'll find various examples of using Remix to accomplish certain tasks. Each example is a complete application including a build and even a button to preview a live instance of the app so you can play with it.
8+
9+
Also, remember to check out the `README` for each example before getting started.
10+
11+
You can also initialize a new project with any of these examples using the `--template` flag of the `create-remix` CLI. For example:
12+
13+
```
14+
npx create-remix@latest --template https://github.com/remix-run/examples/tree/main/<example-dir>
15+
```
16+
17+
Enjoy!
18+
19+
## Contributing
20+
21+
Thanks for your willingness to contribute an example to Remix. Examples are incredibly helpful to people like you who are trying to figure out how to use Remix to solve certain problems and integrate with other tools.
22+
23+
What makes a good example is focus. There's certainly room for examples that show off a whole app experience and we do have some examples like that. But the vast majority of useful examples are focused on a specific use-case. Otherwise it's hard for people to know what to look for in the code.
24+
25+
This means you should avoid adding stuff that isn't absolutely necessary for the example. Start with bare bones and add only what you need.
26+
27+
Most examples should:
28+
29+
- Not use a database
30+
- Have no more than one or two routes (some may not even need any routes)
31+
- Have only necessary deps
32+
- Not use complex validation
33+
- Be as practical as reasonable (balanced with the focus). Just, no `foo`/`bar` please.
34+
35+
To create an example, simply copy/paste the [`_template`](_template) directory into a new one with a sensible name, make the changes you need for your example, update the `README.md` and open a PR.

‎_template/.eslintrc.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
3+
};

‎_template/.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
3+
/.cache
4+
/build
5+
/public/build
6+
.env

‎_template/README.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# TODO: Title of Example
2+
3+
TODO: Describe the use case here
4+
5+
## Preview
6+
7+
Open this example on [CodeSandbox](https://codesandbox.com):
8+
9+
<!-- TODO: update this link to the path for your example: -->
10+
11+
[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/remix/tree/main/examples/template)
12+
13+
## Example
14+
15+
Describe the example and how it demonstrates solving the problem. Reference any relevant files/dependencies if needed.
16+
17+
## Related Links
18+
19+
Link to documentation or other related examples.

‎_template/app/entry.client.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { RemixBrowser } from "@remix-run/react";
2+
import { hydrate } from "react-dom";
3+
4+
hydrate(<RemixBrowser />, document);

‎_template/app/entry.server.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import type { EntryContext } from "@remix-run/node";
2+
import { RemixServer } from "@remix-run/react";
3+
import { renderToString } from "react-dom/server";
4+
5+
export default function handleRequest(
6+
request: Request,
7+
responseStatusCode: number,
8+
responseHeaders: Headers,
9+
remixContext: EntryContext
10+
) {
11+
const markup = renderToString(
12+
<RemixServer context={remixContext} url={request.url} />
13+
);
14+
15+
responseHeaders.set("Content-Type", "text/html");
16+
17+
return new Response("<!DOCTYPE html>" + markup, {
18+
status: responseStatusCode,
19+
headers: responseHeaders,
20+
});
21+
}

‎_template/app/root.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import type { MetaFunction } from "@remix-run/node";
2+
import {
3+
Links,
4+
LiveReload,
5+
Meta,
6+
Outlet,
7+
Scripts,
8+
ScrollRestoration,
9+
} from "@remix-run/react";
10+
11+
export const meta: MetaFunction = () => ({
12+
charset: "utf-8",
13+
title: "New Remix App",
14+
viewport: "width=device-width,initial-scale=1",
15+
});
16+
17+
export default function App() {
18+
return (
19+
<html lang="en">
20+
<head>
21+
<Meta />
22+
<Links />
23+
</head>
24+
<body>
25+
<Outlet />
26+
<ScrollRestoration />
27+
<Scripts />
28+
<LiveReload />
29+
</body>
30+
</html>
31+
);
32+
}

‎_template/package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"private": true,
3+
"sideEffects": false,
4+
"scripts": {
5+
"build": "remix build",
6+
"dev": "remix dev",
7+
"start": "remix-serve build"
8+
},
9+
"dependencies": {
10+
"@remix-run/node": "*",
11+
"@remix-run/react": "*",
12+
"@remix-run/serve": "*",
13+
"react": "^17.0.2",
14+
"react-dom": "^17.0.2"
15+
},
16+
"devDependencies": {
17+
"@remix-run/dev": "*",
18+
"@remix-run/eslint-config": "*",
19+
"@types/react": "^17.0.39",
20+
"@types/react-dom": "^17.0.13",
21+
"eslint": "^8.10.0",
22+
"typescript": "^4.7.4"
23+
},
24+
"engines": {
25+
"node": ">=14"
26+
}
27+
}

‎_template/public/favicon.ico

16.6 KB
Binary file not shown.

0 commit comments

Comments
 (0)