Astro4の現状の開発環境を作成してみました。

はじめに

実務でも Astro を使用する機会があり、開発環境を作成しました。
このフレームワークはぱっと導入できる・参入障壁が低いように個人的に感じています。

開発の効率化や技術に興味がある方は、是非覗いてみてください！

動作環境

node: 18.17.1
npm: 9.6.7

Astro4 の使用には、Node.js のバージョンが 18 以上である必要がありまあす。

このテンプレートではVoltaで管理しています。
お使いの PC にVoltaがインストールされていれば、npm iの実行のみで問題ないです。
Volta についても今後ご紹介できればと思っています。

リポジトリ

https://github.com/koukikki/Astro4-Template/tree/main

事前準備

基本的な npm コマンドを実行してください。

npm i

npm run dev

フォルダ構成

src
|-components
| |-elements
| | |-card
| |-layouts
| | |-article
| | |-footer
| | |-header
|-layouts
|-pages
|-styles

src/components

各コンポーネントを格納します。
layoutsには、header や footer などのレイアウトを作成するコンポーネントを作成します。
基本的にはLayout.astroに import する前提になります。

それ以外のコンポーネントはelementsに格納します。

プロジェクトが大きくなればお好みでフォルダを増やしても良いかも知れません。

src/layouts

Layout.astroを格納しています。
header と footer をcomponentsから import するようになっています。
main の中身を slot にしており、pagesフォルダの中の各ファイルの中身を表示します。

src/pages

ここは Astro のデフォルトのままです。

src/styles

このテンプレートでは scss を使用しており、global.scssと mixin を設定するファイルを格納しています。
global.scssにはプロジェクト全体への共通のスタイルを追加します。
mixin はastro.config.mjsでプロジェクト全体に読み込んでいます。

import 用のパスの設定

全てのファイルで等しい記法で import するための設定を行なっています。

tsconfig

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/components/*"],
      "@layouts/*": ["src/layouts/*"],
      "@styles/*": ["src/styles/*"]
    }
  }
}

上記を設定することで全てのディレクトリのファイル内の import の記述でパスの先頭を@componentsのように統一できます。

import Header from '@components/layouts/header/Header.astro';

Linter・Formatter

Linter はESLint・Formatter はPrettierを採用しています。
prettier:watchのコマンドを実行することで、ファイル保存時に Prettier が自動で実行されます。