Web アプリをセットアップする

画面に "Hello, alier!" と表示するまでの流れを説明します。

alier_sys を入手します。
プロジェクトディレクトリを作成します。
```
mkdir /path/to/project
cd /path/to/project
```
Web 版 Alier のリンクを作成するか、入手した alier_sys フォルダをプロジェクトディレクトリ直下に置きます。

リンクの場合は以下のようになります。

Powershell

    New-Item -ItemType Junction -Path .\alier_sys -Target \path\to\for_web\alier_sys
    ```

Bash

    ln -s /path/to/for_web/alier_sys alier_sys
    ```

リンクではなくコピーでも問題ないですが、バージョン管理が大変になるためリンクの作成を紹介しています。

index.html と main.js を用意します。ここでは動作を確認するためファイルに丸ごとコピーしてください。コードの詳しい解説は Learn Alierに記載しています。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Alier Tutorial</title>
        <script type="module">
            import appStart from "/alier_sys/Alier.js";
            appStart("/app_res/main.js");
        </script>
    </head>
</html>

import * as AlierFramework from "/alier_sys/AlierFramework.js";
Object.assign(globalThis, AlierFramework);

export default async function main() {
    setupAlier();

    const vl = new (class Tutorial extends ViewLogic {
        #html = `
            <div id="tutorial">
                <h1>Hello, alier!</h1>
            </div>
        `;

        constructor() {
            super();
            this.loadContainer({ text: this.#html, id: "tutorial" });
        }
    })();

    Alier.View.attach(vl);
});

HTTP サーバを立ち上げます。

立ち上げには npx http-server や python -m http.server などを利用できます。ここでは npx http-server を利用します。
```
npx http-server
```

info

npx を実行するためには Node.js をインストールしてください。Node.js のインストールには nvm や fnm などのパッケージマネージャを利用することをおすすめします。

note

http-server のキャッシュ機能によってファイルの変更が反映されない場合、-c-1 フラグでキャッシュを無効化してください。キャッシュはデフォルトで有効になっています。

npx http-server -c-1

ブラウザから HTTP サーバにアクセスします。

ブラウザに "Hello, alier!" と表示されたら成功です！