Contentfulアプリケーションフレームワークでアプリケーションホスティング

私は、私のためにこの記事を転載していますColleague David Fateh . 上のポストをチェックアウトContentful Blog .
ときに使用してcontentfulのためのアプリケーションを開発するApp Framework , IFrame内で動作し、Contentful UIで表示される単一のページアプリケーションを作成します.以前は、アプリのフレームワークのアプリをホストするサードパーティ製のソリューションを介してのみ可能です.今日、我々はアプリケーションホスティングと呼ばれるあなたのアプリをホストする簡単な方法を発表している!
アプリケーションホスティングは、あなたのアプリケーションのホスティングプロバイダを見つけるの手間がかかります.我々は多くの偉大な開発機能を提供するバンドルに自分のアプリケーションをアップロードするツールを開発者を提供している.
Appバンドルは、あなたの1ページのアプリケーションディレクトリです.それぞれのバンドルには少なくともインデックスを含める必要があります.HTMLファイルは、ロードするアプリケーションのメインエントリポイントとして機能します.典型的なバンドルのファイルツリーは次のようになります.

build
├── index.html
└── static
    ├── css
    │   └── index.css
    └── js
        └── index.js

ビルドはルートディレクトリで、その中にインデックスがあります.HTMLファイルは、インデックスと一緒にロードされるCSSやJavaScriptなどの任意の資産と一緒に.HTMLファイル.
アプリを作成する多くの方法がありますが、我々はクイックスタートツールを提供するcreate-contentful-app , これはあなたのアプリケーションでジャンプスタートを得ることができます.あなたがアプリを構築することに慣れていないならば、私は我々の場所をチェックすることを提案しますstarter tutorial app .
さて、3つの簡単な手順を見てみましょう.

ステップ1

を使用してアプリケーションを構築する場合create-contentful-app or create-react-app , 簡単に実行できます

npm run build

あなたが別のツールを使用してアプリケーションを構築した場合、またはゼロから、あなたのディレクトリ構造はindex.html ファイルをrootで返します.
また、単純なアプリケーションディレクトリ構造は以下のようになります.

build
├── index.html
└── static
    ├── css
    │   └── index.css
    └── js
        └── index.js

ステップ2

あなたのアプリケーションのAppDefinition あなたの組織の設定で見つかりました.

ステップ3

“フロントエンド”の下に発見されたアプリケーションのホスティングオプションをトグルし、そのように強調表示された領域にビルドディレクトリをドラッグアンドドロップします.

それだ!あなたのアプリケーションは、現在contentful経由でホストされます.バンドルタブでは、複数のビルドバージョンをチェックアウトし、変更をロールバックする必要がある場合にアプリの古いバージョンに戻すことができます.

一方、アプリケーションをアップロードする簡単に、いくつかの一般的なエラーが発生する可能性があります:

あなたのアプリケーションのインデックスを持っていません.アップロードされた束のルートのHTMLファイル.

あなたは、直接コンテンツの代わりにルートディレクトリをカプセル化するZIPをアップロードしています.ほとんどの場合、一般的な修正プログラムは、ルートディレクトリに移動し、すべてのファイルを選択し、そのレベルでzipファイルです.

あなたのアップロードは成功しますが、アプリはロードしないか、UIに表示されません.これは、アプリケーションのインデックスのエラーに起因する可能性があります.HTMLまたはそれが実行するJavaScript.開発者コンソールで見てください.

アプリのホスティングの技術的な詳細については、頭をour documentation .
Contentfulの上でアプリケーションホスティングを起動することは、我々のプロジェクトと我々の内容をつなぐツールの拡張可能で粘着性のセットをつくる我々のビジョンのもう一つの前進です.あなたが何をしているかについてチャットしたいならば、私にpingしてくださいour community Slack 私たちは仲間の開発者と一緒に我々のアプリのフレームワークをよりアクセスし、汎用性を誰もがするように手順を取る.