Zenn
🧬

SolidJS & Vite 構成のコトハジメ

2022/06/24に公開
yarn
tsx
Vite
SolidJS
tech

Overview

オハコンバンニチハ、kiiiyoです。
SolidJS を使用したWebページを作ることがあったので簡単なビルドができるところまでの内容をまとめてみました。

SolidJS公式サイトでちょっと試したい方向けの構成もあるので、Viteを利用されない方は以下からためしてみてください。

実行環境

今回私がコトハジメした実行環境は以下になっています。

  • OS: mac OS Monterey
  • Node Version: 16.14.0
  • Yarn: 1.22.19

パッケージ

今回利用したパッケージは以下になります。

  • solid-js
    • SolidJSのメインパッケージ
  • solid-meta
    • SolidJS版のReact Helmet的な用途で使うパッケージみたい。
  • solid-utils
    • SolidJSのユティリティ関連のパッケージ
  • vite
    • SolidJSの実行環境を構築するツール
  • vite-plugin-solid
    • ViteでSolidJSをビルドするためのパッケージ

各パッケージをインストール

バンドルするメインパッケージをインストール

$ yarn add solid-js solid-meta solid-utils

開発ツール関連のパッケージをインストール

$ yarn add -D vite vite-plugin-solid

package.json に実行コマンドを記述

vite を実行するスクリプトを記述します。

package.json
...
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
...

実行用のindex.htmlを追加

プロジェクトのルートディレクトリに index.html を作成し以下の記述をしました。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sample App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

実行するTypeScriptを追加

実際に実行する .tsx ファイル追加します。

src/main.tsx
import { createApp } from 'solid-utils'
import { MetaProvider } from 'solid-meta'

import { App } from './App'

createApp(App).use(MetaProvider).mount('#root')
src/App.tsx
export const App = () => {
  return <div>Sample App</div>
}

実行確認

$ yarn dev

上記コマンドを実行し、ブラウザ上にSample Appのテキストが表示されれば実行するところまではできたと思います。

Discussion