🧊
Deploy a SolidJS App to Cloudflare.
Deploy a SolidJS App to Cloudflare.
このメモは、SolidJS/SolidStart で Web Application を実装した時にまとめたものです。
SolidJS で SSR を試します。
Topic は以下のとおりです。
- SolidJS
- SolidStart
- TypeScript
- Cloudflare Pages
さらに詳しく見たい方は読み続けてください。
2023年9月3回目です。
この数ヶ月、Svelte、Remix、Qwik、VanJS、Astro を検証してきました。
これらの Framework を触った感触が鮮明なうちに SolidJS を検証します。
今回作成したコードはこちらです。
環境構築
- VS Code の devcontainer で構築しています。
- Version 情報
- Node.js:
v20.5.0 - SolidJS:
1.7.11
- Node.js:
npm init solid@latest
yamamoto_daisuke@instance-1:~/solidjs$ sudo npm init solid@latest
create-solid version 0.2.31
Welcome to the SolidStart setup wizard!
There are definitely bugs and some feature might not work yet.
If you encounter an issue, have a look at https://github.com/solidjs/solid-start/issues and open a new one, if it is not already tracked.
✔ Where do you want to create the app? … my-portfolio-solidjs-ts
✔ Which template do you want to use? › bare
✔ Server Side Rendering? … yes
✔ Use TypeScript? … yes
found matching commit hash: fced756050aece04e7e7260802a25164ed6de7ae
/root/.degit/github/solidjs/solid-start/fced756050aece04e7e7260802a25164ed6de7ae.tar.gz already exists locally
extracting /examples/bare from /root/.degit/github/solidjs/solid-start/fced756050aece04e7e7260802a25164ed6de7ae.tar.gz to /home/yamamoto_daisuke/solidjs/my-portfolio-solidjs-ts/.solid-start
cloned solidjs/solid-start#main to /home/yamamoto_daisuke/solidjs/my-portfolio-solidjs-ts/.solid-start
✔ Copied project files
Next steps:
1: cd my-portfolio-solidjs-ts
2: npm install
3: npm run dev -- --open
To close the dev server, hit Ctrl-C
yamamoto_daisuke@instance-1:~/solidjs$
- 開発サーバーを起動します。
- あとで述べる Adapter は、外した状態です。
npm run dev
node ➜ /workspaces/my-portfolio-solidjs-ts (main) $ npm run dev
> dev
> solid-start dev
solid-start dev
version 0.3.5
adapter node
VITE v4.4.9 ready in 7349 ms
➜ Local: http://localhost:3000/
➜ Network: use --host to expose
➜ Inspect: http://localhost:3000/__inspect/
➜ press h to show help
➜ Page Routes:
┌─ http://localhost:3000/*404
└─ http://localhost:3000/
➜ API Routes:
None! 👻
Project 構成
Project Structure
.
├── package.json
├── package-lock.json
├── public
│ └── favicon.ico # edit
├── README.md
├── src
│ ├── components # add
│ │ ├── Articles.tsx # add
│ │ ├── Experience.tsx # add
│ │ ├── Footer.tsx # add
│ │ ├── Introduction.tsx # add
│ │ └── Repositories.tsx # add
│ ├── entry-client.tsx
│ ├── entry-server.tsx
│ ├── global.d.ts
│ ├── root.css # edit
│ ├── root.tsx
│ ├── routes
│ │ ├── [...404].tsx
│ │ └── index.tsx # edit
│ ├── types.ts # add
│ └── utils # add
│ ├── articles.server.tsx # add
│ ├── experience.server.tsx # add
│ └── repositories.server.tsx # add
├── tsconfig.json
└── vite.config.ts # edit
Framework 間の比較
環境変数
- SolidJS
- Vite の
import.meta.envオブジェクトから取得します。
- Vite の
- Remix
- Remix の
context経由で取得します。
- Remix の
Component 間での受け渡し
- SolidJS
- 子
Componentで props をラップして受け取ります。React 似ています。この例では、interfaceを用いています。
- 子
- Remix
- 親 Component から props で受け取ります。
サーバ上でのデータ取得
- SolidJS
-
routeData()関数を使用します。routeData()関数で取得したデータを Component で使用できます。
-
- Remix
-
loader()関数を使用します。useLoaderData()関数で取り出すことができます。Component の描画のタイミングで取り出し、画面の描画に利用できます。
-
Deploy a SolidJS site
- この環境では、Adapter を install したまま起動することができません。原因を確認中です。
- 公式の Docsの通り、
vite.config.tsファイルに Adapter を追加します。
Summary
- SolidJS について書きました。
- 他の Framework と比較すると、Knowledge は少ない印象です。ググってもあまり出てきません。
- Cloudflare Adapter でのローカル環境での
npm run devが失敗する件は、別途調べたいと思います。 - SolidStart は、Major Version ではないため、もう少し様子を見る必要があると思いました。
この投稿をみて何か得られた方は、いいね ❤️ をお願いします。
それでは、また別の話でお会いしましょう。👋
Discussion