Closed19日前にクローズ1

Svelte + vite + express, todo作成

Svelte

esbuild

Express

Vite

knaka Tech-Blog 2ヶ月前

概要

Svelte.js + express SSRで、todoのメモです

ほぼ、CSRになります。
API連携です。
テストは、vercelにデプロイする形です。
データは、　D1に保存

[ 公開: 2024/03/11 ]

環境

Svelte.js
vite: 5
express
vercel
d1
workers

作成したコード

https://github.com/kuc-arc-f/express_37svelte/tree/main/sample/todo

List
client/Todo.svelte

...


<main>
  <div class="container mx-auto my-2 px-8 bg-white">
    <Head />
    <h1 class="text-4xl font-bold mt-2">Todos</h1>
    <hr class="my-2" />
    <label class="text-3xl font-bold">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>
    <label class="text-3xl font-bold">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={`/todos/show?id=${item.id}`} >
          <button class="btn-outline-purple">Show</button>
        </a>
        <hr />
    </div>
    {/each}	    
  </div>
</main>

show
client/TodoShow.svelte

....

<main>
  <div class="container mx-auto my-2 px-8 bg-white">
    <Head />
    <h1 class="text-4xl font-bold">Show:</h1>
    <hr class="my-2" />
    <h1 class="text-4xl font-bold">{pageItem.title}</h1>
    <p>ID: {pageItem.id}</p>
    <hr class="my-1" />
    <pre>{pageItem.content}</pre>
    <hr class="my-1" />
    <button on:click={deleteItem} class="btn btn-red"
    >Delete</button>
  </div>
</main>

package.json

{
  "type": "module",
  "scripts": {
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "dev": "NODE_ENV=develop nodemon",
    "dev:test": "NODE_ENV=develop npx nodemon ./dist/index.js",
    "build": "npm run clean && node build.js && npx vite build --mode client && npm run build:css",
    "build:css": "npx tailwindcss -i ./src/main.css -o ./public/static/main.css",
    "build:test": "vite build && vite build --mode client",
    "clean": "rimraf dist && rimraf public/static",
    "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": {
    "axios": "^1.6.5",
    "cookie-parser": "^1.4.6",
    "cors": "^2.8.5",
    "dotenv": "^16.4.4",
    "esm": "^3.2.25",
    "express": "^4.18.2",
    "express-basic-auth": "^1.2.1",
    "express-session": "^1.17.2",
    "log4js": "^6.4.4",
    "pg": "^8.11.3",
    "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.17",
    "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"
  }
}

このスクラップは19日前にクローズされました

概要

環境

関連

作成したコード