最近sveltekit,react+nextを勉強してシミュレータを作りたかったが、諸事情によりあきらめ。。
仕方なくSveltekit(static-adapter)+fastapi(embeddable)で作ろうと思う。
python embeddableを使うのはポータブルにするため。
※embeddableはpipの設定済みの前提です。
ディレクトリ構成
sveltekit構築前の構成は以下にしました。
sppj
┗py ※この下にpython.exeがあるイメージ
fastapiインストール
以下のコマンドで実行。
sppj\py> .\python.exe -m pip install fastapi
Collecting fastapi
Downloading fastapi-0.111.0-py3-none-any.whl.metadata (25 kB)
・・・以下省略・・・
sveltekitインストール
以下コマンドで実行。
sppj> npm create svelte@latest svlk
create-svelte version 6.3.3
T Welcome to SvelteKit!
|
o Which Svelte app template?
| Skeleton project
|
o Add type checking with TypeScript?
| Yes, using TypeScript syntax
|
o Select additional options (use arrow keys/space bar)
| none
|
— Your project is ready!
Install more integrations with:
npx svelte-add
Next steps:
1: cd svlk
2: npm install
3: git init && git add -A && git commit -m "Initial commit" (optional)
4: npm run dev -- --open
To close the dev server, hit Ctrl-C
Stuck? Visit us at https://svelte.dev/chat
sppj> cd .\svlk\
sppj\svlk> npm install
・・・以下省略・・・
static-adapterの設定
以下でインストールします。
sppj\svlk> npm install @sveltejs/adapter-static
added 1 package, and audited 97 packages in 5s
9 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
svelte.config.jsを以下に修正。
import adapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter({
pages: '../py/server_app/static',
assets: '../py/server_app/static',
fallback: 'index.html',
precompress: false,
strict: true
})
}
};
export default config;
fastapi側のソース
svelte.config.jsの設定で"../py/server_app/static"に出力するようにしたので、ディレクトリ作りましょう。
その後、sppj/py/server_app/main.pyを作る。
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
app = FastAPI()
app.mount("/",StaticFiles(directory="static",html=True),name="static")
svelte build
sppj\svlk> npm run build
> svlk@0.0.1 build
> vite build
vite v5.3.3 building SSR bundle for production...
✓ 79 modules transformed.
vite v5.3.3 building for production...
✓ 61 modules transformed.
.svelte-kit/output/client/_app/version.json 0.03 kB │ gzip: 0.05 kB
.svelte-kit/output/client/.vite/manifest.json 2.25 kB │ gzip: 0.44 kB
.svelte-kit/output/client/_app/immutable/entry/start.DrsbX861.js 0.07 kB │ gzip: 0.08 kB
.svelte-kit/output/client/_app/immutable/nodes/0.V07vbrzA.js 0.60 kB │ gzip: 0.39 kB
.svelte-kit/output/client/_app/immutable/nodes/2.DYBzjjm4.js 0.69 kB │ gzip: 0.45 kB
.svelte-kit/output/client/_app/immutable/nodes/1.Ds1SO08V.js 1.02 kB │ gzip: 0.59 kB
.svelte-kit/output/client/_app/immutable/chunks/scheduler.BvLojk_z.js 2.16 kB │ gzip: 1.02 kB
.svelte-kit/output/client/_app/immutable/chunks/index.DFTQtrJW.js 5.43 kB │ gzip: 2.30 kB
.svelte-kit/output/client/_app/immutable/entry/app.n2g8uvqo.js 6.02 kB │ gzip: 2.45 kB
.svelte-kit/output/client/_app/immutable/chunks/entry.gTD_-arJ.js 27.42 kB │ gzip: 10.83 kB
✓ built in 1.26s
.svelte-kit/output/server/.vite/manifest.json 1.64 kB
.svelte-kit/output/server/entries/fallbacks/layout.svelte.js 0.24 kB
.svelte-kit/output/server/internal.js 0.31 kB
.svelte-kit/output/server/entries/pages/_page.svelte.js 0.37 kB
.svelte-kit/output/server/entries/fallbacks/error.svelte.js 1.18 kB
.svelte-kit/output/server/chunks/ssr.js 3.34 kB
.svelte-kit/output/server/chunks/exports.js 5.94 kB
.svelte-kit/output/server/chunks/internal.js 6.00 kB
.svelte-kit/output/server/index.js 93.12 kB
✓ built in 3.46s
Run npm run preview to preview your production build locally.
> Using @sveltejs/adapter-static
Wrote site to "../py/server_app/static"
✔ done