switch to next.js
- init next app - add daisyUI
This commit is contained in:
Nathaniel Tampus
@@ -1,3 +1,3 @@
|
|||||||
{
|
{
|
||||||
"extends": ["@remix-run/eslint-config", "@remix-run/eslint-config/node", "prettier"]
|
"extends": ["next", "prettier"]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,8 +4,8 @@
|
|||||||
|
|
||||||
Online 2-player chess. Live demo at [ches.su](https://ches.su)
|
Online 2-player chess. Live demo at [ches.su](https://ches.su)
|
||||||
|
|
||||||
- React (Remix)
|
- React (Next.js)
|
||||||
- Tailwind CSS
|
- Tailwind CSS + daisyUI
|
||||||
- [react-chessboard](https://github.com/Clariity/react-chessboard)
|
- [react-chessboard](https://github.com/Clariity/react-chessboard)
|
||||||
- [chess.js](https://github.com/jhlywa/chess.js)
|
- [chess.js](https://github.com/jhlywa/chess.js)
|
||||||
- Express.js
|
- Express.js
|
||||||
|
|||||||
43
client/.gitignore
vendored
43
client/.gitignore
vendored
@@ -1,9 +1,36 @@
|
|||||||
.cache
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
.vercel
|
|
||||||
.output
|
|
||||||
|
|
||||||
/build/
|
# dependencies
|
||||||
/public/build
|
/node_modules
|
||||||
/api/index.js
|
/.pnp
|
||||||
/api/index.js.map
|
.pnp.js
|
||||||
/app/styles/app.css
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env*.local
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
|
|||||||
@@ -1,34 +0,0 @@
|
|||||||
# Welcome to Remix!
|
|
||||||
|
|
||||||
- [Remix Docs](https://remix.run/docs)
|
|
||||||
|
|
||||||
## Deployment
|
|
||||||
|
|
||||||
After having run the `create-remix` command and selected "Vercel" as a deployment target, you only need to [import your Git repository](https://vercel.com/new) into Vercel, and it will be deployed.
|
|
||||||
|
|
||||||
If you'd like to avoid using a Git repository, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli):
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm i -g vercel
|
|
||||||
vercel
|
|
||||||
```
|
|
||||||
|
|
||||||
It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its [Git Integration](https://vercel.com/docs/concepts/git).
|
|
||||||
|
|
||||||
## Development
|
|
||||||
|
|
||||||
To run your Remix app locally, make sure your project's local dependencies are installed:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
Afterwards, start the Remix development server like so:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm run dev
|
|
||||||
```
|
|
||||||
|
|
||||||
Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
|
|
||||||
|
|
||||||
If you're used to using the `vercel dev` command provided by [Vercel CLI](https://vercel.com/cli) instead, you can also use that, but it's not needed.
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
const Footer = () => {
|
|
||||||
return <div>Footer</div>;
|
|
||||||
};
|
|
||||||
export default Footer;
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
import { Link } from "@remix-run/react";
|
|
||||||
|
|
||||||
const Header = () => {
|
|
||||||
return (
|
|
||||||
<header className="relative flex flex-col items-start justify-between bg-slate-700 sm:flex-row sm:items-center">
|
|
||||||
<h1 className="z-10 m-2.5 text-2xl">chessu</h1>
|
|
||||||
<input className="peer" type="checkbox" id="menu" hidden />
|
|
||||||
<label
|
|
||||||
htmlFor="menu"
|
|
||||||
className="absolute right-0 p-5 sm:hidden peer-checked:[&_div:first-child]:translate-y-1.5 peer-checked:[&_div:first-child]:rotate-45 peer-checked:[&_div:last-child]:-translate-y-1 peer-checked:[&_div:last-child]:-rotate-45"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
aria-hidden="true"
|
|
||||||
className="m-auto h-0.5 w-6 rounded bg-blue-500 transition duration-300"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
aria-hidden="true"
|
|
||||||
className="m-auto mt-2 h-0.5 w-6 rounded bg-blue-500 transition duration-300"
|
|
||||||
></div>
|
|
||||||
</label>
|
|
||||||
<div className="fixed flex h-full w-[calc(100%-4rem)] translate-x-[-100%] flex-col items-center bg-inherit pt-16 shadow-lg transition duration-300 peer-checked:translate-x-0 sm:static sm:flex sm:w-auto sm:translate-x-0 sm:flex-row sm:bg-inherit sm:pt-0 [&_a]:block [&_a]:text-center hover:[&_a]:bg-blue-500">
|
|
||||||
<nav className="w-full sm:w-auto">
|
|
||||||
<ul className="flex flex-col sm:flex-row">
|
|
||||||
<li>
|
|
||||||
<Link className="p-5" to="/">
|
|
||||||
Play
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link className="p-5" to="/games">
|
|
||||||
Watch
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<div className="flex w-full items-center sm:w-auto">
|
|
||||||
<button className="w-full p-5 sm:w-auto">themebtn</button>
|
|
||||||
<button className="w-full p-5 sm:w-auto">Sign in</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export default Header;
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import { Chessboard } from "react-chessboard";
|
|
||||||
|
|
||||||
const Board = () => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Chessboard />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export default Board;
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import { RemixBrowser } from "@remix-run/react";
|
|
||||||
import { startTransition, StrictMode } from "react";
|
|
||||||
import { hydrateRoot } from "react-dom/client";
|
|
||||||
|
|
||||||
function hydrate() {
|
|
||||||
startTransition(() => {
|
|
||||||
hydrateRoot(
|
|
||||||
document,
|
|
||||||
<StrictMode>
|
|
||||||
<RemixBrowser />
|
|
||||||
</StrictMode>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof requestIdleCallback === "function") {
|
|
||||||
requestIdleCallback(hydrate);
|
|
||||||
} else {
|
|
||||||
// Safari doesn't support requestIdleCallback
|
|
||||||
// https://caniuse.com/requestidlecallback
|
|
||||||
setTimeout(hydrate, 1);
|
|
||||||
}
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
import type { EntryContext } from "@remix-run/node";
|
|
||||||
import { RemixServer } from "@remix-run/react";
|
|
||||||
import { renderToString } from "react-dom/server";
|
|
||||||
|
|
||||||
export default function handleRequest(
|
|
||||||
request: Request,
|
|
||||||
responseStatusCode: number,
|
|
||||||
responseHeaders: Headers,
|
|
||||||
remixContext: EntryContext
|
|
||||||
) {
|
|
||||||
const markup = renderToString(
|
|
||||||
<RemixServer context={remixContext} url={request.url} />
|
|
||||||
);
|
|
||||||
|
|
||||||
responseHeaders.set("Content-Type", "text/html");
|
|
||||||
|
|
||||||
return new Response("<!DOCTYPE html>" + markup, {
|
|
||||||
headers: responseHeaders,
|
|
||||||
status: responseStatusCode,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
import type { MetaFunction } from "@remix-run/node";
|
|
||||||
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
|
|
||||||
|
|
||||||
import Header from "./components/Header";
|
|
||||||
import Footer from "./components/Footer";
|
|
||||||
|
|
||||||
// Tailwind CSS
|
|
||||||
import styles from "./styles/app.css";
|
|
||||||
export const links = () => [{ rel: "stylesheet", href: styles }];
|
|
||||||
|
|
||||||
export const meta: MetaFunction = () => ({
|
|
||||||
charset: "utf-8",
|
|
||||||
title: "Chessu",
|
|
||||||
viewport: "width=device-width,initial-scale=1"
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function App() {
|
|
||||||
return (
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<Meta />
|
|
||||||
<Links />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<Header />
|
|
||||||
<Outlet />
|
|
||||||
<Footer />
|
|
||||||
<ScrollRestoration />
|
|
||||||
<Scripts />
|
|
||||||
<LiveReload />
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
export default function Index() {
|
|
||||||
return <div>Index</div>;
|
|
||||||
}
|
|
||||||
6
client/next.config.js
Normal file
6
client/next.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {
|
||||||
|
reactStrictMode: true
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = nextConfig;
|
||||||
@@ -1,33 +1,31 @@
|
|||||||
{
|
{
|
||||||
"name": "@chessu/client",
|
"name": "@chessu/client",
|
||||||
|
"version": "0.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"sideEffects": false,
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "npm run build:css && remix build",
|
"dev": "next dev",
|
||||||
"build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
|
"build": "next build",
|
||||||
"dev": "concurrently \"npm run dev:css\" \"remix dev\"",
|
"start": "next start",
|
||||||
"dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",
|
"lint": "next lint"
|
||||||
"typecheck": "tsc"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@remix-run/node": "^1.12.0",
|
"@next/font": "13.1.6",
|
||||||
"@remix-run/react": "^1.12.0",
|
|
||||||
"@remix-run/vercel": "^1.12.0",
|
|
||||||
"@vercel/node": "^2.9.0",
|
|
||||||
"chess.js": "^1.0.0-beta.3",
|
"chess.js": "^1.0.0-beta.3",
|
||||||
"react": "^18.2.0",
|
"next": "13.1.6",
|
||||||
|
"react": "18.2.0",
|
||||||
"react-chessboard": "^2.0.8",
|
"react-chessboard": "^2.0.8",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "18.2.0",
|
||||||
"remix-utils": "^6.0.0",
|
"socket.io-client": "^4.6.0"
|
||||||
"socket.io-client": "^4.5.4"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@chessu/types": "*",
|
"@chessu/types": "*",
|
||||||
"@remix-run/dev": "^1.12.0",
|
"@types/node": "18.13.0",
|
||||||
"@remix-run/serve": "^1.12.0",
|
"@types/react": "18.0.28",
|
||||||
"@types/react": "^18.0.27",
|
"@types/react-dom": "18.0.10",
|
||||||
"@types/react-dom": "^18.0.10",
|
"autoprefixer": "^10.4.13",
|
||||||
"tailwindcss": "^3.2.4",
|
"daisyui": "^2.50.0",
|
||||||
"typescript": "^4.9.5"
|
"postcss": "^8.4.21",
|
||||||
|
"tailwindcss": "^3.2.6",
|
||||||
|
"typescript": "4.9.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
6
client/postcss.config.js
Normal file
6
client/postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {}
|
||||||
|
}
|
||||||
|
};
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
@@ -1,13 +0,0 @@
|
|||||||
/** @type {import('@remix-run/dev').AppConfig} */
|
|
||||||
module.exports = {
|
|
||||||
serverBuildTarget: "vercel",
|
|
||||||
// When running locally in development mode, we use the built in remix
|
|
||||||
// server. This does not understand the vercel lambda module format,
|
|
||||||
// so we default back to the standard build output.
|
|
||||||
server: process.env.NODE_ENV === "development" ? undefined : "./server.js",
|
|
||||||
ignoredRouteFiles: ["**/.*"]
|
|
||||||
// appDirectory: "app",
|
|
||||||
// assetsBuildDirectory: "public/build",
|
|
||||||
// serverBuildPath: "api/index.js",
|
|
||||||
// publicPath: "/build/",
|
|
||||||
};
|
|
||||||
2
client/remix.env.d.ts
vendored
2
client/remix.env.d.ts
vendored
@@ -1,2 +0,0 @@
|
|||||||
/// <reference types="@remix-run/dev" />
|
|
||||||
/// <reference types="@remix-run/node" />
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
import { createRequestHandler } from "@remix-run/vercel";
|
|
||||||
import * as build from "@remix-run/dev/server-build";
|
|
||||||
|
|
||||||
export default createRequestHandler({ build, mode: process.env.NODE_ENV });
|
|
||||||
6
client/src/pages/_app.tsx
Normal file
6
client/src/pages/_app.tsx
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import "@/styles/globals.css";
|
||||||
|
import type { AppProps } from "next/app";
|
||||||
|
|
||||||
|
export default function App({ Component, pageProps }: AppProps) {
|
||||||
|
return <Component {...pageProps} />;
|
||||||
|
}
|
||||||
13
client/src/pages/_document.tsx
Normal file
13
client/src/pages/_document.tsx
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { Html, Head, Main, NextScript } from "next/document";
|
||||||
|
|
||||||
|
export default function Document() {
|
||||||
|
return (
|
||||||
|
<Html lang="en">
|
||||||
|
<Head />
|
||||||
|
<body>
|
||||||
|
<Main />
|
||||||
|
<NextScript />
|
||||||
|
</body>
|
||||||
|
</Html>
|
||||||
|
);
|
||||||
|
}
|
||||||
10
client/src/pages/api/hello.ts
Normal file
10
client/src/pages/api/hello.ts
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||||
|
import type { NextApiRequest, NextApiResponse } from "next";
|
||||||
|
|
||||||
|
type Data = {
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
|
||||||
|
res.status(200).json({ name: "John Doe" });
|
||||||
|
}
|
||||||
5
client/src/pages/index.tsx
Normal file
5
client/src/pages/index.tsx
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
const index = () => {
|
||||||
|
return <div>index</div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default index;
|
||||||
@@ -1,8 +1,12 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ["./app/**/*.{js,ts,jsx,tsx}"],
|
content: ["./src/**/*.{js,ts,jsx,tsx}"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {}
|
extend: {}
|
||||||
},
|
},
|
||||||
plugins: []
|
plugins: [require("daisyui")],
|
||||||
|
daisyui: {
|
||||||
|
themes: ["cmyk", "night"],
|
||||||
|
darkTheme: "night"
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,22 +1,24 @@
|
|||||||
{
|
{
|
||||||
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
|
"compilerOptions": {
|
||||||
"compilerOptions": {
|
"target": "es5",
|
||||||
"lib": ["DOM", "DOM.Iterable", "ES2019"],
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
"isolatedModules": true,
|
"allowJs": true,
|
||||||
"esModuleInterop": true,
|
"skipLibCheck": true,
|
||||||
"jsx": "react-jsx",
|
"strict": true,
|
||||||
"moduleResolution": "node",
|
"forceConsistentCasingInFileNames": true,
|
||||||
"resolveJsonModule": true,
|
"noEmit": true,
|
||||||
"target": "ES2019",
|
"esModuleInterop": true,
|
||||||
"strict": true,
|
"module": "esnext",
|
||||||
"allowJs": true,
|
"moduleResolution": "node",
|
||||||
"forceConsistentCasingInFileNames": true,
|
"resolveJsonModule": true,
|
||||||
"baseUrl": ".",
|
"isolatedModules": true,
|
||||||
"paths": {
|
"jsx": "preserve",
|
||||||
"~/*": ["./app/*"]
|
"incremental": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||||
// Remix takes care of building everything in `remix build`.
|
"exclude": ["node_modules"]
|
||||||
"noEmit": true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,11 +15,11 @@
|
|||||||
"format": "prettier --write ."
|
"format": "prettier --write ."
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@remix-run/eslint-config": "^1.12.0",
|
|
||||||
"concurrently": "^7.6.0",
|
"concurrently": "^7.6.0",
|
||||||
"eslint": "^8.33.0",
|
"eslint": "^8.34.0",
|
||||||
|
"eslint-config-next": "13.1.6",
|
||||||
"eslint-config-prettier": "^8.6.0",
|
"eslint-config-prettier": "^8.6.0",
|
||||||
"prettier": "^2.8.3",
|
"prettier": "^2.8.4",
|
||||||
"prettier-plugin-tailwindcss": "^0.2.2"
|
"prettier-plugin-tailwindcss": "^0.2.2"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
|
|||||||
Reference in New Issue
Block a user