Zenn
Closed2

Turso libSQL + express + React, 何か作る。

React
Vercel
Express
#
turso
#
libsql
knaka Tech-Blogknaka Tech-Blog

概要

Turso libSQL、express + React SPA で使うメモになります。

  • 前の、Turso記事の続編になります。
  • テストは、vercelに設置する例です。
  • vercel.json 使います。

[ 公開: 2024/03/16 ]

環境

  • Turso
  • libSQL
  • express
  • React
  • vercel

作成したコード

https://github.com/kuc-arc-f/express_31react/tree/main/sample/turso_test

express実装

  • routes/torsoRouter.ts: List
torsoRouter.ts
router.post('/get_list', async function(req: any, res: any) {
  try {
    const retObj = {ret: "NG", data: [], message: ""};
    if(req.body){
      const resulte = await client.execute("SELECT * FROM test ORDER BY id DESC LIMIT 100;");
//console.log(resulte.rows);
      retObj.ret = "OK";
      //@ts-ignore
      retObj.data = resulte.rows;
      return res.json(retObj);
    }
    return res.json(retObj);
  } catch (error) {
    console.error(error);
    res.sendStatus(500);
  }
});

React

  • client/TestTorso.tsx
TestTorso.tsx
function Page(){
  const [updatetime, setUpdatetime] = useState<string>("");
  //
  useEffect(() => {
    (async () => {
        getList();
    })()
  }, []);
  //
  const testProc = async function(){
    console.log("testProc" + new Date().toString() );
  }
  /**
   *
   * @param
   *
   * @return
   */
  const addProc = async function(){
    await CrudIndex.addItem(); 
    location.reload();
//    console.log("addProc");
  }
  /**
   *
   * @param
   *
   * @return
   */
  const getList = async function() {
    try{
console.log("#Test4.getList");
      const item  = {
        "userId": 0,
      }      
      const json = await HttpCommon.post(item, "/api/torso/get_list");
      pageItems = json.data;
      console.log(json.data);
      setUpdatetime(new Date().toString());
    } catch (e) {
        console.error(e);
    } 
  }
  //
  return(
  <div  className="container mx-auto my-2 px-8 bg-white">
    <Head />
    <hr />
    <h1 className="text-4xl font-bold my-2">TestTorso.tsx</h1>
    <hr className="my-2" />
    <label>Title:</label>
    <input type="text" id="title" 
    className="border border-gray-400 rounded-md px-3 py-2 w-full focus:outline-none focus:border-blue-500"
    />    
    <hr className="my-2" />
    <button className="btn-purple" onClick={()=>addProc()}>Save
    </button>    
    <hr className="my-1" />
    {pageItems.map((item: any ,index: number) => {
    return (
    <div key={index}>
        <h3 className="text-3xl font-bold">{item.title}</h3>
        <span>ID: {item.id}, {item.createdAt}</span>
        <hr />
    </div>
    )
    })}    
  </div>
  );
}
export default Page;
  • package.json
{
  "type": "module",
  "scripts": {
    "dev": "NODE_ENV=develop nodemon",
    "build": "npm run clean && node build.js && npm run build:js && npm run build:css",
    "build:js": "npx esbuild --bundle ./src/client.tsx --format=esm --minify --outfile=./public/static/client.js",
    "build:css": "npx tailwindcss -i ./src/main.css -o ./public/static/main.css",
    "clean": "rimraf dist && rimraf public/static",
    "test": "ts-node src/index.ts"
  },
  "dependencies": {
    "@libsql/client": "^0.5.6",
    "axios": "^1.6.5",
    "cookie-parser": "^1.4.6",
    "dotenv": "^16.4.5",
    "express": "^4.18.2",
    "express-basic-auth": "^1.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.17",
    "@types/node": "^18.14.6",
    "@types/react": "^18.2.23",
    "@types/react-dom": "^18.2.8",
    "autoprefixer": "^10.4.17",
    "nodemon": "^3.1.0",
    "postcss": "^8.4.33",
    "rimraf": "^5.0.5",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.4.2",
    "vite": "^5.0.12"
  }
}
このスクラップは19日前にクローズされました