あなたのフロントエンドでThunderScriptのための雪パックでAzure静的ウェブアプリを使用すること


2020年には、私は自分自身のように私は自分の毎日のためにCを使用していると同じくらいのスクリプトを書いて見つけることです.私は自分自身を実験、マルチプレーヤーのブラウザベースのゲームを構築し、小さな自己完結型のPIEと他の“ほとんどのブラウザベースのもの”は、昨年かそこらです.
あなたがブラウザで、またはノードで実行しているときにちょうど受け入れるようにしなければならない最もイライラするものの1つは、ノードとJavaScriptツールチェーンの頻繁に完全に首尾一貫していない世界です.
JavaScriptの生態系のツールの多くは非常によく動作していない、あまり維持されていない、あまりにも、あまりにも多くの作業をしなければならないが、ほとんどすべての下に座っているwebpackやbabelのような絶対的に最も人気のあるツールのいくつかは、神秘的な肉の設定、およびかなり不透明なエラーメッセージに依存します.
時間と時間が再び私は彼らのソフトウェアがどのように構築されているかほとんどわからないフロントエンドチームに実行する理由があります.私は最後の年は、“生産性は本当にどのような生産”は、最初の開発環境では、継続的な繰り返しに取り組んできたし、多くのコントロールを提供したいツール間の健全な緊張を戦うが、自分の構成の手で死ぬ、ツール全体を開発スタック(反応アプリを作成し、友人)を作成します.

フロントエンド開発スタックから何が欲しいですか?


すべてのソフトウェア設計では、私はデフォルトで正しいと理想的にゼロの設定が必要なツールが大好きです.
私はホットリロードを期待しています、それはウェブの速いフィードバックサイクルです、そして、それが愚かなものである利益なしでブラウザーベースの開発の矛盾を受け入れるために.
私は、私が考える必要がないネイティブタイプの編集を望みます.私はそれを構成したくないです、私はちょうど常緑のブラウザーのv . currentのために働くことを望みます.
デフォルトではソースマップとデバッガのサポートが欲しい.
ネイティブのESモジュールを扱え、NPMから依存関係を消費することができます.
私はAzureの静的なWebアプリとしてホスティングのウェブサイトに多くの時間を入れているので、私はまた、私はその環境できれいに再生するために使用して任意のツールをしたいとトリーヴィジジャネイブのアクションからAzure静的なWebアプリケーションに展開可能です.

エンタースノーパック


Snowpack is a modern, lightweight toolchain for faster web
development.
 Traditional JavaScript build tools like webpack and Parcel need to rebuild & rebundle entire chunks of your application every time you save a single file. This rebundling step introduces lag between hitting save on your changes and seeing them reflected in the browser.


JavaScriptの生態系の中で「働くだけのツール」の状態について不平を言うとき、私は、それが私が探していたすべてのものをするようにしていたツールとして、スノーパックに導入されました.
そして正直に、それはかなり完全に動作します.

積雪を設定するAzure静的Webアプリで動作するように


先月私はどのように古いHTMLサイトのための静的なWebアプリを設定するチュートリアルのチュートリアルでAzure Static Web Apps are Awesomeについて書いて、私はきれいに展開し、入力スクリプトを使用してSnowpackを使用して新しいプロジェクトを構成する方法を示すために今日その上に構築したいと思います.

パッケージを作成します。JSON


まず、すべてのJavaScriptプロジェクトのように、パッケージを作成することから始めましょう.JSONファイル.
コマンドラインでこれを行うことができます
npm init
次に、依存関係の一握りを追加します.
npm install npm-run-all snowpack typescript --save-dev
パッケージを残しておくべきです.このように少し見えるJSON
{
    "name": "static-app",
    "version": "",
    "description": "",
    "repository": "http://tempuri.org",
    "license": "http://tempuri.org",
    "author": "",
    "dependencies": {},
    "devDependencies": {
        "npm-run-all": "^4.1.5",
        "snowpack": "^2.9.0",
        "typescript": "^4.0.2"
    }
}

ビルドタスクの追加


さあ、荷物を開けましょう.JSONファイルとタスクのカップルを追加します.
{
    ...
    "scripts": {
        "start": "run-p dev:api dev:server",
        "dev:api": "npm run start --prefix api",
        "dev:server": "npx snowpack dev",
        "build:azure": "npx snowpack build"
    },
    ...
}
ここで私たちが行っていることは、デフォルトのノードスタートタスクを満たすことです.NPM Run Allという名前のモジュールを使用して、すぐに2つのタスクを実行することができます.また、Azure関数APIを実行するタスク、およびSnowPack devサーバーを定義しています.

Webアプリケーションの作成


次に、appというディレクトリを作成して、
アプリ/インデックス.それにHTMLファイル.
<html>
<head>
    <title>Hello Snowpack TypeScript</title>
    <script src="/index.js" type="module"></script>
</head>

<body>
    Hello world.
</body>
</html>
そして、app/indexというタイプのファイルを作成します.TS
class Greeter {
    private _hasGreeted: boolean;

    constructor() {
        this._hasGreeted = false;
    }

    public sayHello(): void {
        console.log("Hello World");
        this._hasGreeted = true;
    }
}

const greeter = new Greeter();
greeter.sayHello();
タイプスクリプトの注釈を使用していることに気づくでしょう( Boolean , and :このコードのvoid , public access修飾子とともに).

我々のアプリディレクトリを見るためにsnowpackを構成すること


次に、リポジトリのルートに雪パック設定ファイルを追加します.我々はデフォルトでは、Snowpackは、リポジトリのルートから動作しますので、私たちは/アプリAzure静的なWebアプリケーションを正しくアプリをホストするために我々のアプリを入れているので、追加している.
Snowpackというファイルを作成します.設定.JSONのようになります.
{
    "mount": {
        "app": "/"
    },
    "proxy": {
        "/api": "http://127.0.0.1:7071/api"
    }
}
ここでは、我々は“アプリ”から“/”へのコンテンツをマウントし、実行中のazure関数APIにプロキシ“API/API”を戻すためにSnowpackを教えています.我々はそれに戻ってくるが、まず、我々が持っているものをテストしましょう.
npm run dev:server
ブラウザを開き、コンソールの両方と画面上で「Hello World」を参照してください.
Snowpackは、同じファイル名を持つJavaScriptファイルに静かにあなたのTypeScriptコードを転送しました.
ここでクールなことは、あなたがフロントエンドで働くことを期待していることです.TypeScriptを使用すると、フロントエンドコード内のNPMモジュールを参照できます.
あなたは様々なSnowpackプラグインを使用してこのプロセスを拡張することができます、そして、それはおそらくあなたがネイティブに使っているJavaScriptツールをサポートします

スノーパック。dev Azure関数APIを作成する


Azure Static Web AppsはAzure関数を理解しているので、あなたのリポジトリでAPIと呼ばれるサブディレクトリにいくつかのServerless APIを追加することができます、そしてAzure Oryxは自動的な展開の一部としてあなたのために検出し、自動ホストとスケールします.
ランニングによってインストールされている
npm install -g azure-functions-core-tools@3
今、私たちはAzure関数アプリを作成するためにいくつかのコマンドを実行するつもりです.
mkdir api  
cd api  
func init --worker-runtime=node --language=javascript
これは、デフォルトのJavaScript +ノード関数のアプリケーションを生成するAPIディレクトリでは、我々だけで呼び出すアプリケーションのための関数を作成する必要があります.コマンドラインに戻ると、(私たちの/APIディレクトリに)
func new --template "Http Trigger" --name HelloWorld
これはHelloWorldという新しい関数をAPIディレクトリに追加します.
ファイルAPI/パッケージで.JSONは次の2つのタスクが存在することを確認します.
  "scripts": {
    "prestart": "func extensions install",
    "start": "func start"
  },
我々が現在我々の倉庫とタイプのルートに戻るならば
npm run start
テキストの全体の多くがあなたのコンソールをスクロールし、雪パックライブdevのサーバーが起動し、一緒にAzureの機能アプリと一緒に私たちの新しい“HelloWorld”
関数で.
我々のアプリ/インデックスに少しのコードを加えましょう.これを呼び出すHTML
クールなものは、我々はちょうどアプリを実行して、これを行うことができますし、両方の機能ランタイム、およびSnowpackサーバーは、私たちが作るホットリロードの変更を監視します.

APIの呼び出し


我々はちょうどアプリケーション/インデックスにいくつかのコードを追加しようとしている.前のブログ記事から借りた私たちの関数を呼び出すts.我々のgreeterコードの下で、我々はフェッチコールを加えるつもりです

const greeter = new Greeter();
greeter.sayHello();

fetch("/api/HelloWorld")
    .then(response => response.text())
    .then(data => console.log(data));
ブラウザコンソールを見たら、テキストの行に気づくでしょう
このHTTPトリガ関数は正常に実行されます.クエリ文字列内の名前、または、個別化された応答のためにリクエスト本文で名前を渡します
ウィンドウに印刷されます.それは私たちの“HelloWorld”APIから返されたテキストです.

そして、それはそれの種類です!


本当に、それはそうです-あなたは現在、Servless APIで、TypesScript互換性のある、熱い再ロードしているdevサーバーを得ました.しかし、我々の最終的なトリックのために、我々は我々のアプリケーションをホストするためにAzure静的ウェブアプリを構成するつもりです.

静的Webアプリケーションの設定


最初に、私は一緒にここに置くAzure静的なWebアプリを設定するには、ガイドをスキム行く
あなたは、あなたの倉庫をGithub、GoとSignup/ログインをAzureポータルにプッシュし、Azure Static Web Appsに移動し、Createをクリックする必要があります.
一度作成するプロセスでは、再度必要がありますGithubと認証し、ドロップダウンから提供される新しいリポジトリを選択します.
あなたが展開している静的Webアプリケーションの種類を選択するように求められますし、カスタムを選択する必要があります.次に、ビルド詳細設定に直面します.ここで、次の手順に従ってください.

App Location: /  
API location: api  
App artifact location: build
我々が我々のルートで若干のNPMタスクを構成したとき、非常にスタートで覚えています?さて、OryXビルドサービスはタスクビルドを探しています.
私たちは“NPXスノーパックビルド”をビルドするタスクを積んだ-それはコンパイルされ、ビルドされ、ビルドされたフォルダを作成する雪パックのタスクで構築されてホストされる準備が整いました.
この設定では、Azureは最終的なファイルが生成されたビルドディレクトリで利用可能になることを知っています.
この作成フローを完了すると、AzureはあなたのリポジトリにGithubアクションをコミットし、ビルドをトリガーしてWebサイトを展開します.それはあなたがこれを設定した最初の時間は約2分かかります.

それです。


私は今、数週間の間、Snowpackを使っていました、そして、私はそれを構築して、束ねるか、展開することについて本当に心配することなく、私がNPMパッケージを使用しているtypescriptで豊かなフロントエンドを構築させることで素晴らしい時間を過ごしました.
これらは、私たちが低レベルのコントロールのニュアンスを削除し、純粋な生産性に置き換える時間を投資する必要がありますツールの一種です.
あなたの次のプロジェクトのために雪パックでAzure静的サイトを与えてください.