はじめに
最近svelteにドはまりしていましたが、
SolidJSも触ってみたいな～と思い、話題のViteで環境を作った時のメモです。
実行環境
- docker
- 20.10.14
- docker-compose
- 1.29.2
docker-compose.yml
imageにはnode、commandにはviteの実行コマンドにしておきました。
version: '3'
services:
app:
image: node:18-alpine3.15
working_dir: /app
ports:
- "8080:8080"
volumes:
- "./src:/app"
tty: true
command: npm run dev
いざ環境構築
コンテナ内へ～
$ docker-compose build
$ docker-compose run app sh
以降コンテナ内操作です
SolidJS・TypeScript・Vite・Viteプラグインをインストールする
# npm
/app # npm install solid-js
/app # npm install -D typescript vite vite-plugin-solid
package.jsonの修正
tscを実行できるように
{
"scripts": { // 追加
"tsc": "tsc", // 追加
}, // 追加
"dependencies": {
"solid-js": "^1.6.4"
},
"devDependencies": {
"typescript": "^4.9.4",
"vite": "^4.0.0",
"vite-plugin-solid": "^2.5.0"
}
}
TypeScriptの初期設定
/app # npm run tsc -- --init
tsconfig.jsonが作られたはずなので、↓をコピペ
{
"compilerOptions": {
"baseUrl": ".",
"target": "es5",
"module": "ESNext",
"lib": ["ESNext", "DOM", "DOM.Iterable"],
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"moduleResolution": "node",
"newLine": "lf",
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"resolveJsonModule": true,
"types": ["vite/client"],
"skipLibCheck": true,
"strict": true
},
"include": ["**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
jsx、jsxImportSource以外の個所は自分好みに調整してください
Vite初期設定
プロジェクトルートにvite.config.tsを作成
/app # touch vite.config.ts
以下をコピペ
import { defineConfig } from 'vite'
import solidPlugin from 'vite-plugin-solid'
export default defineConfig({
plugins: [solidPlugin()],
server: {
host: true,
port: 8080
}
})
※ portを変えたいときはdocker-compose.ymlのportも一緒に変えてね！
index.htmlの作成
こちらもプロジェクトルートにindex.htmlを作成
/app # touch index.html
そして以下をコピペ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<title>Solid App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/src/main.tsx" type="module"></script>
</body>
</html>
src/main.tsxを作成
/app # mkdir src
/app # touch src/main/tsx
そして以下をコピペ
// main.tsx
import { createSignal } from 'solid-js'
import { render } from 'solid-js/web'
const CountingComponent = () => {
const createDate = (date: Date) => {
const Year = date.getFullYear();
const Month = date.getMonth()+1;
const Date = date.getDate();
const Hour = date.getHours();
const Min = date.getMinutes();
const Sec = date.getSeconds();
return `${Year}年${Month}月${Date}日 ${Hour}:${Min}:${Sec}`
}
const [time, setCount] = createSignal(createDate(new Date()))
setInterval(() => setCount(() => {
return createDate(new Date())
}), 1000)
return (
<div>Time is {time()}</div>
)
}
render(() => <CountingComponent />, document.getElementById('root'))
サーバー起動！
/app # npm run dev
localhost:8080で開けたら成功
