JunglejsとGraphSQLによるJamstackサイトのビルド

この記事は、HASURAテクニカルライタープログラムの一部として書かれました.私たちのブログの上でHasuraまたはGraphqlについての記事を発表したいならばhere .

導入

Jamstackは、既に知っているかもしれませんが、JavaScript、API、およびマークアップを使用してWebサイトを構築するためのアプローチです.この記事では、我々は見てみましょうJungleJs そして、それはあなたがSvelteとGraphqlを使用して高速で軽量な静的サイトを構築するのに役立ちます.この記事の終わりには、Junglejs十分に何がそれを超素晴らしいに理解するために精通している必要があります.からの以前のポストをチェックしてくださいJAMStack シリーズ

Svelteって何？

あなたがすでにそれに精通していないと仮定して、Svelteは反応とVueに似ているが、重要な違いによるフロントエンドのJavaScriptフレームワークです.この違いは、それはあなたのコードを実行時に解釈する必要はありませんあなたのアプリは超高速動作します.
続きを読むBuild and Deploy Realtime Svelte 3 Apps using GraphQL

Junglejs作品

Junglejsは静的サイトジェネレータギャツビーやヒューゴに似ています.JunglejsはJSONまたはCSVファイルなどのソースからデータを取得することにより、任意のヘッドレスCMS、API、WordPress、ゴーストなどのようなAPIを使用してJunglejsで作業するときは、Svelteのコンポーネントを使用してアプリケーションのさまざまな部分を構成します.順番に、ジャングルはサイトを構築して、静的なHTML内容(あなたの選択のどんなウェブサーバの配備の準備でも)にそれをコンパイルします.

データ層

GraphSQLデータ層に入る前に、どのように動作しますか、GraphSQL自体を簡単に見てみましょう.公式文書によると

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. Learn more about GraphQL.

Graphicalデータ層は、ツールjunglejs開発で利用しており、それはあなたのJunglejsアプリにインポートされたデータの一時的なストレージとして機能します.データが我々のジャングルアプリにインポートされるとき、GraphSQLデータ層はそれを静的データに変換します.データがインポートされる場所からデータ層とソースの間にリアルタイム接続がないことに注意してください.これが意味するものは、最新のデータ更新を得るためにウェブサイトを再生成する必要があるということです.
JunglejsがGraphSQLデータ層を使用する方法の怠惰なスケッチ
Junglejsはビルド時に動作するため、以下の例に示すように、Svelteファイル内のデータにアクセスするクエリとQueryresを追加する必要があります.

<script>
const QUERY = `
        query {
                items {
                        property
                        another_property
                }
        }
`;
const QUERYRES = {};
...
</script>

次に、アクセスすることができますQUERYRES このようなコンポーネントでは:

{#each QUERYRES.items as item}
        <p> {item.property} </p>
{/each}

junglejsのインストール

新しいJunglejsプロジェクトを作成するには、まず、Degitを使用してスタータープロジェクトをクローンし、実行してファイルをダウンロードしたディレクトリに移動します.

npx degit junglejs/template jungle-app
cd jungle-app 

次に、実行して必要な依存関係をインストールする

npm install 

ジャングルアプリの実行

ジャングルアプリを実行するにはnpm run startこの記事を書くとき、ホットリロードはまだJunglejsで動作しません.あなたの変更を使用してアプリケーションをリロードするには、停止し、もう一度プロセスを実行する必要があります.コンパイルされた静的ファイルをどこにでも配備するビルドフォルダーを生成する場合は、実行してnpm run build

Junglejsアプリディレクトリ構造

あなたがsapper、nuxtと好きのようなフレームワークに慣れているならば、彼らのフォルダ構造はjunglejsのそれとかなり類似しています.しかし、特にJunglejsで初めて働くとき、心に留めておく若干のものはここにあります.

インストールされているスターターファイルのルートディレクトリを見ると、jungle.config.js . このファイルは、アプリケーションの構成が定義されている場所です.このファイルはdataSources ソースのGraphSQLデータ層を指定する配列は、データをプルします.これらのデータソースは、動的JSONソース、静的オブジェクト、またはマークダウンファイルからも可能です.既定のスターターテンプレートには、現在2つのサンプルデータソースが含まれています.

The /jungle/build/ いずれかを実行するときに生成されるフォルダnpm run start or npm run build Junglejsプロジェクトをホストするときにディレクトリが展開されます.

イメージのような静的ファイルを/static フォルダ.NPMはアプリのビルドフォルダーを生成するとき、Junglejsは我々のアプリケーションのコンテンツを挿入しますstatic フォルダをビルドフォルダーにします.

複数のルートで使用するコンポーネントはsrc/componentディレクトリに保存します.

The src/routes ディレクトリは、我々のアプリケーションのルートを保持します.

コンポーネント

任意のフロントエンド開発フレームワークのようなコンポーネントは、彼らが管理することができますので、小さな部品にあなたのアプリケーションを破ることができます.典型的なWebアプリケーションは、例えばNavbar、フッターなどのコンポーネントに分割することができます.デフォルトのジャングルのインストールは、NAVのコンポーネントを私たちを提示するので、これの良い感じを持って、我々のWebアプリのフッターコンポーネントを作成してみましょう.開始するには、フッターを作成します.src/componentフォルダ内のsvelteファイルを次のコードを追加します.

<div class="footer_area">
    <p>All rights reserved, Example developer &copy 2021</p>
</div>

マークアップが書き込まれると、コンポーネントはこの形式でアプリケーションの任意のセクションで使用できます.

<script> 
// First import the component in your script tag
    import Footer from "../components/Footer.svelte";
<script> 

<div>
// inject it anywhere suitable
<Footer/>
</div>

ページの作成とルートのリンク

ジャングルのアプリでページを設定するには、単に[ PageName ]を作成します.src/routeディレクトリのsvelteファイル.次に、通常のsvelteファイルでマークアップを書きます.たとえば、デフォルトのジャングルスターターコードのページを作成するには、約ファイル名を作成します.Svelteとあなたの好きなテキストエディタからのコンテンツを追加

//about.svelte
<script>
    import Nav from "../components/Nav.svelte";
// importing the Footer component we created earlier
    import Footer from "../components/Footer.svelte";
</script>
<svelte:head>
    <title>About Page</title>
</svelte:head>
<Nav page="/about"/>
<main>
    <h1>This is the About Page</h1>
    <p> JungleJS is Easy to use!</p>
</main>
<Footer/>

このようにNAVコンポーネントにルートを追加することができます

//src/components/Nav.svelte
...
 <a class={page == '/about/' ? 'active' : ''} href="/about/">About</a>
...

スタイリング

JunglejsはSvelteからそのスタイルの構文を継承し、そのように、あなたは<style> </style> タグ.私がジャングルに関してとても便利である1つのものは、svelteコンポーネントで定義されたスタイルがデフォルトでスコープされるということです.
コンパイル時に、Svelteは、要素のスタイルが互いに競合しないように、一意のクラス識別子を生成します.あなたはSvelteでスタイリングについての詳細を学ぶことができますhere .
この動作を確認するには、以前に作成したフッターコンポーネントにスタイルのビットを追加します.

// src/components/Footer.svelte
   ...
<style>
    .footer_area {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #4caf50;
        color: white;
        text-align: center;
    }
</style>
     ...

展開

一度実行するとnpm run build コマンドは、すべてを行う必要がある結果のジャングル/ビルドフォルダーを展開してお好みのホスティングサービスです.
たとえば、NetLifyにあなたのサイトを展開したいなら、あなたはNetlifyダッシュボードに向かうことができて、あなたのダッシュボードに速い手動展開のためにフォルダをドラッグ/ドロップすることができます.一方、あなたは、より組織化されたことをするのが好きであるならば、あなたはGithubリポジトリであなたのジャングルアプリをセットアップすることができて、「Gitからの新しいサイト」ボタンを打ちました.

次に、あなたのジャングルサイトを含むレポを選択し、それをクリックして続行します.

お好みのレポを選択したら、あなたの発行ディレクトリを修正してjungle/build フォルダーの下のスクリーンショットのように、最後に展開ボタンを押す前に.

概要

これまでのところ、JunglejsとGraphSQLを使用して簡単なサイトを構築する際の手順をカバーしています.我々はJunglejs足場を設定することによって、次に私たちは私たちのサイトに約ページを追加し、我々はフッターのコンポーネントを作成しながらどのようにスタイルのジャングルアプリを作成しました.最後に、我々は展開Junglejsアプリに関与するプロセスを見てみました.何か質問があれば、私に連絡してください.

著者について

ナイジェリアからの確立されたソフトウェア職人と技術的な著者です.