Morphでは、マークダウンを使用してフロントエンドを構築します。マークダウンファイルにコンポーネントを配置することで、WebアプリケーションのUIを構築することができます。

開発の流れ

Morphでのバックエンド開発の手順は以下の通りです。

1

.mdxファイルを作成する

src/pages ディレクトリに、 .mdx ファイルを作成することで、Webアプリケーションのページを作成します。ファイル名がURLのパスになります。

touch src/pages/new-page-1.mdx
2

ページのタイトルを追加する

.mdx ファイルに、ページのタイトルを追加します。ページの最初の見出しがタイトルとして扱われます。

# 新しいページ
3

コンポーネントを配置する

コンポーネントリファレンスを参照しながら、あなたのデータアプリに適したコンポーネントを配置してください。

# 新しいページ

スプレッドシートのデータを表示します👇

<DataFrame name="data_google_sheet" height={500} />
4

開発サーバーを起動する

開発サーバーを起動することで、Webアプリケーションをローカルで確認することができます。

morph serve