Zenn
Open8

Vinxi + Svelte Vue React , full-Stack メモ

React
Vue.js
Svelte
Vite
vinxi
knaka Tech-Blogknaka Tech-Blog

Vinxi + Svelte React , full-Stack メモ

概要

  • 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設定後、デプロイ完了できました。
knaka Tech-Blogknaka Tech-Blog

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;
knaka Tech-Blogknaka Tech-Blog

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

knaka Tech-Blogknaka Tech-Blog

API 連携 + Svelte

  • API 連携 Svelteに、なります。

書いたコード

  • dev-start
npm run dev

関連

  • front
  • svelte_app/app/client/Test1.svelte
<script lang="ts">

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

      const postData = {id: 1, name: "name-post222"}
      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)}
 }

</script>

<div>
  <h1 class="text-3xl font-bold">Test1</h1>
  <hr class="my-2" />
  <button on:click={testProc}>[ Test ]</button>
</div>

<style>
</style>
  • api.ts : reactと、同様です。 POST GET通信
  • svelte_app/app/api.ts

https://github.com/kuc-arc-f/vinxi_4ex/blob/main/svelte_app/app/api.ts

knaka Tech-Blogknaka Tech-Blog

Vue + Vinxi

  • Vue + Vinxi構成に、なります。

書いたコード

  • dev-start
npm run dev
  • package.json
{
  "name": "example-vue",
  "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",
    "tailwindcss": "^3.3.3",
    "vinxi": "0.5.3",
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "@vue/tsconfig": "^0.7.0",
    "typescript": "~5.7.2",
    "vite": "^6.1.0",
    "vue-tsc": "^2.2.0"
  }
}
  • vue/app/App.vue

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

knaka Tech-Blogknaka Tech-Blog

ログイン認証　React + Vinxi + drizzle-orm

  • ログイン認証 Vinxi + drizzle-orm　の、メモになります。

書いたコード

  • dev-start
npm run dev
  • Login.tsx
  • react_auth_drizzle/app/client/Login.tsx

https://github.com/kuc-arc-f/vinxi_5ex/blob/main/react_auth_drizzle/app/client/Login.tsx

  • signup.tsx
  • react_auth_drizzle/app/client/signup.tsx

https://github.com/kuc-arc-f/vinxi_5ex/blob/main/react_auth_drizzle/app/client/signup.tsx

  • bcryptjsで、暗号化します。
  • login : Response headers Cookie に、ログイン判定値を送信します。
  • react_auth_drizzle/app/api/user.ts
knaka Tech-Blogknaka Tech-Blog

vinxi + React , cloudflare デプロイ

  • nitro の　デプロイ関連ページを参考に、vinxi デプロイするメモです。

https://nitro.build/deploy/providers/cloudflare#cloudflare-pages

  • wrangler.toml
  • 参考の. toml 設定
  • name: 適当なアプリ名に変更する。
name = "vinxi-react-app-1"
compatibility_date = "2024-09-19"
main = "./.output/server/index.mjs"

assets = { directory = "./.output/public/", binding = "ASSETS" }

[vars]
NITRO_HELLO_THERE="general"
SECRET="secret"

cloudflare対応の 手順

npm i wrangler
npx wrangler login
  • build
NITRO_PRESET=cloudflare_module npm run build
  • 画面 表示確認(確認しない場合、次に進む )
npx wrangler dev
  • deploy
  • 管理画面の、Workers一覧に、表示されます。
npx wrangler deploy