Aleph.jsに触れてみた

Deno製のReactフレームワークAleph.jsに触れみたのでそのメモ。

Deno製のフレームワークということで、Denoの環境構築も行なった。そのメモはこちら。

使用したDenoのバージョンはこちら。

Terminal

$ deno --version

deno 1.12.1 (release, aarch64-apple-darwin)
v8 9.2.230.14
typescript 4.3.5

参考

taichi fukumoto

Aleph.jsをインストール

公式ドキュメントを見ながらAleph.jsのインストールをし、動かしたのだが何故かエラー。
どうやら、公式ドキュメントのバージョンは最新ではないらしい。

GitHubのリリースノートを確認し、最新のバージョンをインストールする。2021年7月現在の最新版はα版だった。

Terminal

deno install --unstable -A -f -n aleph https://deno.land/x/aleph@v0.3.0-alpha.33/cli.ts

インストールが完了したら、Alephが動くか確認。

Terminal

$ aleph --version

aleph.js 0.3.0-alpha.33
deno 1.12.1
v8 9.2.230.14
typescript 4.3.5

taichi fukumoto

プロジェクトを作成する

aleph init YOUR-PROJECT-NAMEでプロジェクトを作成することができる。
早速プロジェクトを作成。

path/to/your/dir

$ aleph init aleph-js

Add recommended workspace settings of VS Code? [y/n] y ⏎
Downloading template...
Saving template...
Done
---
Aleph.js is ready to go!
$ cd aleph-js
$ aleph dev     # start the app in `development` mode
$ aleph start   # start the app in `production` mode
$ aleph build   # build the app to a static site (SSG)
---

Add recommended workspace settings of VS Code? [y/n]と聞かれるので、yで進める。VSCodeのワークスペースの設定ファイルをあらかじめ用意してくれる。

生成されたプロジェクトディレクトリに移動しておく。

path/to/your/dir

$ cd aleph-js

taichi fukumoto

Aleph.jsのコマンド

initした際に表示されたコマンドで開発を行う。基本はaleph devの開発モードを使う。

$ aleph dev     # start the app in `development` mode
$ aleph start   # start the app in `production` mode
$ aleph build   # build the app to a static site (SSG)

無事ビルドされたので、microCMS使ってブログでも作ってみたい。