Home
back

Vinxi + Svelte React , full-Stack 調査

id: 188, 2025-05-22

### 音声概要

・AIで生成された 音声概要になります。

### 概要

  • Vinxi full-Stack 入門メモになります。

[ 公開 2025/02/21 ]

### 構成

  • Vinxi
  • node 20
  • vite
  • Nitro

### 関連

### React

  • dev-start
npm run dev

### Vercel デプロイ Vinxi

vinxi build --preset vercel-edge
  • package.json , 参考
....
"scripts": {
    "dev": "vinxi dev",
    "build": "vinxi build --preset vercel-edge",
    "build:local": "vinxi build",
    "start": "vinxi start --preset vercel-edge",
    "start:local": "vinxi start"
},
....
  • node_modules/ 以外を pushすると、vercel設定後、デプロイ完了できました。

### API 連携 , POST GET 通信

### 関連

  • react_app/app.config.js
  • api 設定、handler 指定する。
....

{
  name: "api",
  type: "http",
  handler: "./app/api.ts",
  base: "/api",
},
  • api.ts : API実装
  • react_app/app/api.ts
  • getWebRequest: method など取得できる
  • getRequestURL: pathname など取得できる
import { eventHandler, readBody , getQuery } from "vinxi/http";
import { getWebRequest , getRequestURL } from "vinxi/http";

export default eventHandler (async (event) => {
  const request = getWebRequest(event); 
  const url = getRequestURL(event);
  console.log(request);
  console.log("method=", request.method);
  console.log("pathname=", url.pathname);
  if(request.method === "GET"){
    const query = getQuery(event); 
    console.log(query);
    const data = { message: query };
    return new Response(JSON.stringify(data), {
      headers: { "Content-Type": "application/json" },
    });
  }
  if(request.method === "POST"){
    const body = await readBody(event); 
    console.log(body);
    const data = { message: "Hello from POST" };
    return new Response(JSON.stringify(body), {
      headers: { "Content-Type": "application/json" },
    });
  }
  // データの取得や処理
  const data = { message: "Hello from Vinxi API!" };
  return new Response(JSON.stringify(data), {
    headers: { "Content-Type": "application/json" },
  });
});
  • front参考 , fetch で POST GET通信する例です。
  • react_app/app/client/test1.tsx
import Head from "../components/Head"

import React from "react";
import {useState, useEffect}  from "react";
import { Link } from "react-router-dom";

function Page() {

  const testProc = async function(){
    try{
      const response = await fetch(`/api/test1?id=1`);
      if (!response.ok) throw new Error("error, /api/test1");
      const data = await response.json();
      console.log(data);

      const postData = {id: 1, name: "name-post123"}
      const resPost = await fetch(`/api/test2`,
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(postData),
        }
      );
      if (!resPost.ok) throw new Error("error, /api/hello");
      const dataPost = await resPost.json();
      console.log(dataPost);
    }catch(e){console.error(e)}
 }

  return (
  <>
    <Head />
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">test1</h1>
      <hr className="my-2" />
      <button 
      className="btn"
      onClick={()=>testProc()}>[ Test ]</button>
    </div>  
  </>    
  )
}
export default Page;

### Svelte + Vinxi

  • Svelteの組み合わせになります。

### 書いたコード

  • dev-start
npm run dev
  • package.json
{
  "name": "example-svelte",
  "type": "module",
  "private": true,
  "version": null,
  "scripts": {
    "dev": "vinxi dev",
    "build": "vinxi build --preset vercel-edge",
    "build:local": "vinxi build",
    "start": "vinxi start --preset vercel-edge",
    "start:local": "vinxi start"
  },
  "dependencies": {
    "@picocss/pico": "^1.5.10",
    "autoprefixer": "^10.4.15",
    "svelte-spa-router": "^4.0.1",
    "tailwindcss": "^3.3.3",
    "vinxi": "0.5.3"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^5.0.3",
    "@tsconfig/svelte": "^5.0.4",
    "svelte": "^5.19.6",
    "svelte-check": "^4.1.4",
    "typescript": "~5.7.2",
    "vite": "^6.1.0"
  }
}
  • svelte/app/App.svelte

https://github.com/kuc-arc-f/vinxi_4ex/blob/main/svelte/app/App.svelte

  • svelte/app/routes.ts
  • ルーティング

https://github.com/kuc-arc-f/vinxi_4ex/blob/main/svelte/app/routes.ts