Zenn
Closed1

Svelte SPA + Turso LibSQLのスタック試す。

Svelte
esbuild
Express
Vite
knaka Tech-Blogknaka Tech-Blog

概要

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

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

[ 公開: 2024/04/10 ]

環境

  • Turso　libSQL
  • express
  • Svelte
  • vercel

作成したコード

https://github.com/kuc-arc-f/express_33svelte/tree/main/sample/turso_todo

express実装

  • routes/tursoTodoRouter.ts: List
  • 接続URL等は、 .envから読みます。
tursoTodoRouter.ts
router.post('/get_list', async function(req: any, res: any) {
  try {
    const retObj = {ret: "NG", data: [], message: ""};
    if(req.body){
      const client = await LibTurso.getClient();
      const sql = `SELECT * FROM todos ORDER BY id DESC LIMIT 100;`;
console.log(sql);
      const resulte = await client.execute(sql);
      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);
  }
});

Svelte

  • client/TursoTodo.svelte

...
/**
 *
 * @param
 *
 * @return
 */
const getList = async function() {
  try{
//console.log("#Test4.getList");
    const item  = {
      "userId": 0,
    } 
    const json = await HttpCommon.post(item, "/api/turso_todo/get_list");     
    pageItems = json.data;
    console.log(json.data);
  } catch (e) {
      console.error(e);
  } 
}
getList();

/**
 *
 * @param
 *
 * @return
 */
const addProc = async function(){
  await CrudIndex.addItem(); 
  location.reload();
//    console.log("addProc");
}

</script>

<!-- -->
<main>
  <div class="container mx-auto my-2 px-8 bg-white">
    <Head />
    <h1 class="text-4xl font-bold">TestApi</h1>
    <hr class="my-2" />
    <label class="text-3xl">Title:
    <input type="text" id="title" 
    class="border border-gray-400 rounded-md px-3 py-2 w-full focus:outline-none focus:border-blue-500"
    />    
    </label>
    <hr class="my-2" />
    <label class="text-3xl">Content:
      <input type="text" id="content" 
      class="border border-gray-400 rounded-md px-3 py-2 w-full focus:outline-none focus:border-blue-500"
      />    
    </label>
    <hr class="my-2" />
    <button on:click={addProc} class="btn btn-primary">Save</button>
    <hr class="my-2" />
    {#each pageItems as item}
    <div>
        <h3 class="text-3xl font-bold my-2">{item.title}</h3>
        <span class="mx-2">ID : {item.id}, date: {item.createdAt}</span>
        <a href={`/tursotodoshow/${item.id}`} use:link >
          <button class="btn-outline-purple">Show</button>
        </a>
        <hr />
    </div>
    {/each}	    
  </div>
</main>
  • package.json
{
  "type": "module",
  "scripts": {
    "dev": "NODE_ENV=develop npx nodemon ./dist/index.js localhost 4000",
    "dev:test": "NODE_ENV=develop node ./dist/index.js",
    "build": "rimraf dist && node build.js && npx vite build --mode client",
    "build:css": "npx tailwindcss -i ./src/main.css -o ./public/static/main.css",
    "build:test": "vite build && vite build --mode client",
    "watch": "npx vite build --mode client --watch",
    "watch:css": "npx tailwindcss -i ./src/main.css -o ./public/static/main.css --watch",
    "test": "ts-node src/index.ts"
  },
  "dependencies": {
    "@libsql/client": "^0.6.0",
    "axios": "^1.6.5",
    "cookie-parser": "^1.4.6",
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "esm": "^3.2.25",
    "express": "^4.18.2",
    "express-session": "^1.17.2",
    "log4js": "^6.4.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^3.0.2",
    "@tsconfig/svelte": "^5.0.2",
    "@types/cors": "^2.8.13",
    "@types/express": "^4.17.17",
    "@types/node": "^18.14.6",
    "@types/react": "^18.2.23",
    "@types/react-dom": "^18.2.8",
    "autoprefixer": "^10.4.18",
    "nodemon": "^3.0.3",
    "postcss": "^8.4.35",
    "rimraf": "^3.0.2",
    "svelte": "^4.2.9",
    "svelte-check": "^3.6.3",
    "svelte-spa-router": "^4.0.1",
    "tailwindcss": "^3.4.1",
    "tslib": "^2.6.2",
    "typescript": "^5.3.3",
    "vite": "^5.0.12"
  }
}
このスクラップは2024/04/14にクローズされました