Skip to content

Commit 965093f

Browse files
committed
add remix basic example
1 parent 3ebac0c commit 965093f

15 files changed

+1118
-150
lines changed

examples/remix/basic/.gitignore

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

examples/remix/basic/README.md

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Welcome to Remix!
2+
3+
- [Remix Docs](https://remix.run/docs)
4+
5+
## Development
6+
7+
From your terminal:
8+
9+
```sh
10+
npm run dev
11+
```
12+
13+
This starts your app in development mode, rebuilding assets on file changes.
14+
15+
## Deployment
16+
17+
First, build your app for production:
18+
19+
```sh
20+
npm run build
21+
```
22+
23+
Then run the app in production mode:
24+
25+
```sh
26+
npm start
27+
```
28+
29+
Now you'll need to pick a host to deploy it to.
30+
31+
### DIY
32+
33+
If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
34+
35+
Make sure to deploy the output of `remix build`
36+
37+
- `build/`
38+
- `public/build/`
39+
40+
### Using a Template
41+
42+
When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
43+
44+
```sh
45+
cd ..
46+
# create a new project, and pick a pre-configured host
47+
npx create-remix@latest
48+
cd my-new-remix-app
49+
# remove the new project's app (not the old one!)
50+
rm -rf app
51+
# copy your app over
52+
cp -R ../my-old-remix-app/app app
53+
```
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { hydrate } from 'react-dom';
2+
import { RemixBrowser } from 'remix';
3+
4+
hydrate(<RemixBrowser />, document);
+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { renderToString } from 'react-dom/server';
2+
import { RemixServer } from 'remix';
3+
import type { EntryContext } from 'remix';
4+
5+
export default function handleRequest(
6+
request: Request,
7+
responseStatusCode: number,
8+
responseHeaders: Headers,
9+
remixContext: EntryContext
10+
) {
11+
const markup = renderToString(<RemixServer context={remixContext} url={request.url} />);
12+
13+
responseHeaders.set('Content-Type', 'text/html');
14+
15+
return new Response('<!DOCTYPE html>' + markup, {
16+
status: responseStatusCode,
17+
headers: responseHeaders,
18+
});
19+
}

examples/remix/basic/app/root.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from 'remix';
2+
import type { MetaFunction } from 'remix';
3+
4+
export const meta: MetaFunction = () => {
5+
return { title: 'New Remix App' };
6+
};
7+
8+
export default function App() {
9+
return (
10+
<html lang="en">
11+
<head>
12+
<meta charSet="utf-8" />
13+
<meta name="viewport" content="width=device-width,initial-scale=1" />
14+
<Meta />
15+
<Links />
16+
</head>
17+
<body>
18+
<Outlet />
19+
<ScrollRestoration />
20+
<Scripts />
21+
{process.env.NODE_ENV === 'development' && <LiveReload />}
22+
</body>
23+
</html>
24+
);
25+
}
+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export default function Index() {
2+
return (
3+
<div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
4+
<h1>Welcome to Remix</h1>
5+
<ul>
6+
<li>
7+
<a target="_blank" href="https://remix.run/tutorials/blog" rel="noreferrer">
8+
15m Quickstart Blog Tutorial
9+
</a>
10+
</li>
11+
<li>
12+
<a target="_blank" href="https://remix.run/tutorials/jokes" rel="noreferrer">
13+
Deep Dive Jokes App Tutorial
14+
</a>
15+
</li>
16+
<li>
17+
<a target="_blank" href="https://remix.run/docs" rel="noreferrer">
18+
Remix Docs
19+
</a>
20+
</li>
21+
</ul>
22+
</div>
23+
);
24+
}

examples/remix/basic/package.json

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "example-basic-remix",
3+
"private": true,
4+
"sideEffects": false,
5+
"scripts": {
6+
"build": "remix build",
7+
"dev": "remix dev",
8+
"postinstall": "remix setup node",
9+
"start": "remix-serve build"
10+
},
11+
"dependencies": {
12+
"@graphql-ez/remix": "workspace:^0.0.1",
13+
"@remix-run/node": "^1.1.3",
14+
"@remix-run/react": "^1.1.3",
15+
"@remix-run/serve": "^1.1.3",
16+
"graphql-ez": "workspace:^0.14.0",
17+
"react": "^17.0.2",
18+
"react-dom": "^17.0.2",
19+
"remix": "^1.1.3"
20+
},
21+
"devDependencies": {
22+
"@remix-run/dev": "^1.1.3",
23+
"@types/react": "^17.0.24",
24+
"@types/react-dom": "^17.0.9",
25+
"typescript": "^4.1.2"
26+
},
27+
"engines": {
28+
"node": ">=14"
29+
}
30+
}
16.6 KB
Binary file not shown.

examples/remix/basic/remix.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* @type {import('@remix-run/dev/config').AppConfig}
3+
*/
4+
module.exports = {
5+
appDirectory: 'app',
6+
assetsBuildDirectory: 'public/build',
7+
publicPath: '/build/',
8+
serverBuildDirectory: 'build',
9+
devServerPort: 8002,
10+
ignoredRouteFiles: ['.*'],
11+
};

examples/remix/basic/remix.env.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference types="@remix-run/dev" />
2+
/// <reference types="@remix-run/node/globals" />

examples/remix/basic/tsconfig.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
3+
"compilerOptions": {
4+
"lib": ["DOM", "DOM.Iterable", "ES2019"],
5+
"isolatedModules": true,
6+
"esModuleInterop": true,
7+
"jsx": "react-jsx",
8+
"moduleResolution": "node",
9+
"resolveJsonModule": true,
10+
"target": "ES2019",
11+
"strict": true,
12+
"baseUrl": ".",
13+
"paths": {
14+
"~/*": ["./app/*"]
15+
},
16+
17+
// Remix takes care of building everything in `remix build`.
18+
"noEmit": true
19+
}
20+
}

packages/remix/main/package.json

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "@graphql-ez/remix",
3+
"version": "0.0.1",
4+
"private": true,
5+
"repository": {
6+
"type": "git",
7+
"url": "https://github.com/PabloSzx/graphql-ez",
8+
"directory": "packages/remix"
9+
},
10+
"license": "MIT",
11+
"author": "PabloSz <[email protected]>",
12+
"sideEffects": false,
13+
"exports": {
14+
".": {
15+
"require": "./dist/index.js",
16+
"import": "./dist/index.mjs"
17+
},
18+
"./*": {
19+
"require": "./dist/*.js",
20+
"import": "./dist/*.mjs"
21+
}
22+
},
23+
"main": "dist/index.js",
24+
"module": "dist/index.mjs",
25+
"types": "dist/index.d.ts",
26+
"scripts": {
27+
"dev": "bob-esbuild watch",
28+
"prepack": "bob-esbuild build",
29+
"postpublish": "gh-release"
30+
},
31+
"engines": {
32+
"node": "^12.20.0 || >=14.13.0"
33+
},
34+
"publishConfig": {
35+
"directory": "dist"
36+
}
37+
}

packages/remix/main/src/index.ts

Whitespace-only changes.

packages/remix/testing/package.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "@graphql-ez/remix-testing",
3+
"version": "0.0.1",
4+
"private": true
5+
}

0 commit comments

Comments
 (0)