Remixを触ってみる

Could not locate @remix-run/serve. Please verify you have it installed to use the dev command.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! remix-app-template@ dev: `remix dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the remix-app-template@ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

import {useLoaderData} from "remix";

// json格納(バックエンドの代わり)
export let loader = ()=>{
    return[
        {
            slug:"my-first-post",
            title:'My First Post'
        },
        {
            slug:"90s-mixtape",
            title:'A Mixtape I Made Just For You'
        }
    ]
}

export default function Posts(){
　// フロント側でjson受け取り
    let posts = useLoaderData()
    console.log(useLoaderData())
    return(
        <div>
            <h1>Posts</h1>
        </div>
    );
}

import { PrismaClient } from "@prisma/client";
const db = new PrismaClient();

async function seed() {
    await Promise.all(
        getJokes().map(joke => {
            return db.joke.create({ data: joke });
        })
    );
}

seed();

function getJokes() {
    // shout-out to https://icanhazdadjoke.com/

    return [
        {
            name: "Road worker",
            content: `I never wanted to believe that my Dad was stealing from his job as a road worker. But when I got home, all the signs were there.`
        },
        {
            name: "Frisbee",
            content: `I was wondering why the frisbee was getting bigger, then it hit me.`
        },
        {
            name: "Trees",
            content: `Why do trees seem suspicious on sunny days? Dunno, they're just a bit shady.`
        },
        {
            name: "Skeletons",
            content: `Why don't skeletons ride roller coasters? They don't have the stomach for it.`
        },
        {
            name: "Hippos",
            content: `Why don't you find hippopotamuses hiding in trees? They're really good at it.`
        },
        {
            name: "Dinner",
            content: `What did one plate say to the other plate? Dinner is on me!`
        },
        {
            name: "Elevator",
            content: `My first time using an elevator was an uplifting experience. The second time let me down.`
        }
    ];
}

import type {LoaderFunction} from "remix";
import {Link, useLoaderData} from "remix";
import type {Joke} from "@prisma/client";
import {db} from "~/utils/db.server";

type LoaderData = { joke: Joke };


export const loader: LoaderFunction = async ({
                                                 params
                                             }) => {
    const joke = await db.joke.findUnique({
        where: {id: params.jokeId}
    })
    if (!joke) throw new Error("Joke not found");
    const data: LoaderData = {joke};
    return data
}


export default function JokeRoute() {
    const data = useLoaderData<LoaderData>()
    return (
        <div>
            <p>Here's your hilarious joke:</p>
            <p>{data.joke.content}</p>
            <Link to=".">{data.joke.name} Permalink</Link>
        </div>
    )
}

import { redirect, json, Form, useActionData } from "remix";

// ②
export function action({ request }) {
  let form = await request.formData();
  let email = form.get("email");
  let password = form.get("password");
  let errors = {};
  
  if (typeof email !== "string" || !email.includes("@")) {
    errors.email =
            "That doesn't look like an email address";
  }

  if (typeof password !== "string" || password.length < 6) {
    errors.password = "Password must be > 6 characters";
  }
  
  if (Object.keys(errors).length) {
    return json(errors, { status: 422 });
  }
  
  // ④
  await createUser(body);
  return redirect("/dashboard");
}

export default function Signup() {
    // ③
  let data = useActionData();
  return (
          <>
            <h1>Signup</h1>
            // ①
            <Form method="post">
              <p>
                <input type="text" name="email" />
                {errors?.email && <span>{errors.email}</span>}
              </p>
              <p>
                <input type="text" name="password" />
                {errors?.password && (
                        <span>{errors.password}</span>
                )}
              </p>
              <p>
                <button type="submit">Sign up</button>
              </p>
            </Form>
          </>
  );
}

export const loader: LoaderFunction = async () => {
  const data: LoaderData = {
    jokeListItems: await db.joke.findMany({
      take: 5,
      select: { id: true, name: true },
      orderBy: { createdAt: "desc" },
    }),
  };
  return data;
};

//urlとidが一致するjokesを取得
export const loader: LoaderFunction = async ({ params }) => {
  const joke = await db.joke.findUnique({ where: { id: params.jokeid } });
  if (!joke) throw new Error("joke not found");
  const data: LoaderData = { joke };
  return data;
};

export const action: ActionFunction = async ({ request }) => {
  const form = await request.formData();
  const content = form.get("content");
  const name = form.get("name");

  // バリデーション
  if (typeof name !== "string" || typeof content !== "string") {
    throw new Error("Form not submit correctly");
  }

  const fields = { content, name };
  const joke = await db.joke.create({ data: fields });
  return redirect(`/jokes/${joke.id}`);
};

model User {
  id           String   @id @default(uuid())
  createdAt    DateTime @default(now())
  updatedAt    DateTime @updatedAt
  userName     String   @unique
  passwardHash String
  jokes        Joke[]
}

model Joke {
  id         String   @id @default(uuid())
  jokesterId String
  jokester   User     @relation(fields: [jokesterId], references: [id], onDelete: Cascade)
  createdAt  DateTime @default(now())
  updatedAt  DateTime @updatedAt
  name       String
  content    String
}

export async function getUser(request: Request) {
  //userId取得
  const userId = await getUserId(request);
  if (typeof userId !== "string") return null;
  try {
    // userIdからuserデータを取得
    const user = await db.user.findUnique({
      where: { id: userId },
    });
    return user;
  } catch {
    //userが取得出来なければlogout
    throw logout(request);
  }
}

export async function logout(request: Request) {
  // requestからcookie経由でsessionを取得
  const session = await storage.getSession(request.headers.get("cookie"));
  // sessionを破棄してlogin画面に遷移
  return redirect("/login", {
    headers: {
      "Set-Cookie": await storage.destroySession(session),
    },
  });
}

import type { ActionFunction, LoaderFunction } from "remix";
import { redirect } from "remix";
import { logout } from "~/utils/session.server";

// logoutする
export const action: ActionFunction = async ({ request }) => {
  return logout(request);
};

//home画面にredirect
export const loader: LoaderFunction = async () => {
  return redirect("/");
};

export async function register({ username, password }: LoginForm) {
  // passwordをhash化する
  const passwordHash = await bcrypt.hash(password, 10);
  return db.user.create({
    data: {
      username,
      passwordHash,
    },
  });
}

switch (loginType) {
    case "login": {
      const user = await login({ username, password });
      if (!user) {
        return {
          fields,
          formError: `Username/Password combination is incorrect`,
        };
      }
      return createUserSession(user.id, redirectTo);
    }

    case "register": {
      const userExists = await db.user.findFirst({
        where: { username },
      });
      if (userExists) {
        return badRequest({
          fields,
          formError: `User with username ${username} already exists`,
        });
      }
      const user = await register({ username, password });
      if (!user) {
        return badRequest({
          fields,
          formError: `Something went wrong trying to create a new user`,
        });
      }
    }

    default: {
      return badRequest({
        fields,
        formError: `Login type invalid`,
      });
    }
  }
};

export const meta: MetaFunction = () => {
  const description = `Learn Remix and laugh at the same time!`;
  return {
    description,
    keywords: "Remix,jokes",
    "twitter:image": "https://remix-jokes.lol/social.png",
    "twitter:card": "summary_large_image",
    "twitter:creator": "@remix_run",
    "twitter:site": "@remix_run",
    "twitter:title": "Remix Jokes",
    "twitter:description": description,
  };
};

flyctl auth signup

You must be authenticated to view this.