Solid, MUI(SUID), Biome, Cloudflare Pages な環境構築
usagigaDependencies
Web アプリをすぐ作るためのかんたんな構成。
JSX/TSX をミニマルにはじめたいならこういう感じになると思う。
- moonrepo/proto
- pnpm
- 現状 SolidJS は Bun に実装されていない Node.js の API に依存している ため、いったん pnpm を採用しておく
- TypeScript
- Solid / SolidStart
- Tailwind
- MUI (SUID)
- Biome
- Cloudflare Pages
導入のポイント
つまづきがちなポイントだけ書いておく。
Cloudflare Pages
まず、Cloudflare Pages のドキュメントを読みながら pnpm + SolidStart + TypeScript + Tailwind なプロジェクトを構築する。
次に、ビルド時に利用するランタイムバージョンを指定しておく。
基本的にはこの記事を見ればよい。
今回の構成では、Node.js / pnpm を指定したいので、以下のように wrangler.toml を編集しておく。
(もちろん Web コンソール上から Environment Variables を編集してもよい)
[env.preview.vars]
NODE_VERSION = "20.13.1"
PNPM_VERSION = "9.1.2"
[env.production.vars]
NODE_VERSION = "20.13.1"
PNPM_VERSION = "9.1.2"
なお、Cloudflare Pages のビルドシステム(v2)は GitHub Actions や proto のように package.json の engines などを読んでくれたりはしない。
次に、Biome をセットアップし、リンタやフォーマットをかけておく。
これで環境構築は一通り完了。
IntelliJ IDEA / WebStorm
Biome や Solid を扱えるようにしておく。
Solid
WebStorm 2023.2 で Solid などの JSX/TSX なライブラリのサポートが強力になった。
ということで、Solid に関しては何もする必要がない。
注意点として、WebStorm は JSX/TSX 編集時に import React from 'react' を挿入してこようとしてきがちということが挙げられる。これは手動でよしなに取り除くとよい。
Biome
このドキュメントに従ってプラグインを導入する。
保存時に Format や Lint をする設定を入れておくとよいだろう。
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="BiomeSettings">
<option name="applySafeFixesOnSave" value="true" />
<option name="formatOnSave" value="true" />
</component>
</project>
MUI (SUID)
React の MUI を Solid 向けにポートするプロジェクトが2022年から存在する。SUID だ。
$ pnpm add @suid/material @suid/icons-material
$ pnpm add --save-dev @suid/vite-plugin
SUID には vite の plugin があるので、よしなに設定しておく。
なお、SolidStart がデフォルトで利用する vinxi では現在 vite の plugin を設定する方法が ドキュメントに存在しない 。また、現状だと SUID のコンポーネントは SSR と相性が悪い 。そこで、以下のように app.config.ts を変更しておく。
import { defineConfig } from '@solidjs/start/config';
import suidPlugin from '@suid/vite-plugin';
export default defineConfig({
server: {
preset: 'cloudflare-pages-static',
rollupConfig: {
external: ['node:async_hooks'],
},
},
vite: {
plugins: [suidPlugin()],
build: {
target: 'esnext',
},
},
ssr: false,
});
これで MUI を利用することができるようになった。