Svelte SSRモード

---

1.SvelteKitプロジェクトを作る

npm create svelte@latest sveltestudytanforssr
cd sveltestudytanforssr
npm i

---

2.FirebaseのWebフレームワーク自動感知機能をON

firebase experiments:enable webframeworks

---

3.Firebaseプロジェクトを初期化する

firebase init

Firebase Hostingを選択して、プロジェクトも選択してください。
その後、SvelteKitを自動感知できて、Enterを押してください。

---

4.firebase.jsonの内容を修正

{
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "asia-northeast1",
      "maxInstances": 1
    }
  }
}

---

5.使用するlibをインストール

npm i bootstrap
npm i firebase-admin
npm install @google-cloud/bigquery

---

6.FirebaseAdmin利用するため、サービスアカウント情報利用するための共通libを作成する

※Firebaseサービスアカウントは、「Firebaseプロジェクト」→「プロジェクト設定」→「サービスアカウント」の順で獲得できます。

/src/lib/firebase/myfirebaseadmin.js

// @ts-nocheck
import admin from 'firebase-admin';
import serviceAccount from '$lib/firebase/keys/pcom-azest-blog-firebase-adminsdk-6ootr-c3f8fa001f.json'

function initFirebase(){
    let firebaseadmin = null;

    // Firebase Admin SDKの初期化
    if (!admin.apps.length) {
        firebaseadmin = admin.initializeApp({
            credential: admin.credential.cert(serviceAccount)
        });
    }
    else{
        firebaseadmin = admin.apps[0];
    }
    console.log(`admin.apps.length:${admin.apps.length}`);

    return firebaseadmin;
}


export const firestore = initFirebase().firestore();

export const storage = initFirebase().storage();

---

例1：一覧画面

• バックエンド: /src/routes/blog/+page.server.js

// @ts-nocheck
import {firestore} from '$lib/firebase/myfirebaseadmin';

export async function load() {
    const snapshot = await firestore.collection('blog').get();
    const bloglist = snapshot.docs.map(doc=>{
        var doctemp = doc.data();
        doctemp.blogid = doc.id;
        return doctemp;
    });

    return {bloglist};
};

• フロントエンド: /src/routes/blog/+page.svelte

<script>
    // @ts-nocheck
    export let data;
</script>

<div class="py-4">
    <div class="container">
        <div class="d-flex flex-column">
            {#each data.bloglist as item}
                <a href={`/blog/${item.blogid}`} class="my-2">{item.title}</a>
            {/each}
        </div>
    </div>
</div>

---

例2：Blog詳細

• バックエンド: /src/routes/blog/[blogid]/+page.server.js

// @ts-nocheck
import {firestore} from '$lib/firebase/myfirebaseadmin';

export async function load({ params }) {
    // console.log(params)

    const snapshot = await firestore.collection('blog').doc(params.blogid).get();
    var bloginfo = snapshot.data();
    bloginfo.blogid = params.blogid;

    return {bloginfo};

};

• フロントエンド: /src/routes/blog/[blogid]/+page.svelte

<script>
  // @ts-nocheck
    export let data;
</script>

<div class="py-4">
    <div class="container">
        <div class="d-flex flex-column">
            <div class="">{data.bloginfo.title}</div>
            <div class="">{data.bloginfo.body}</div>
            <div class="">{data.bloginfo.blogid}</div>
        </div>
    </div>
</div>

{JSON.stringify(data)}

---

End.開発する時のTips

1. エディターエラーを止めたい時:「// @ts-nocheck」を記入してください。

<script>
  // @ts-nocheck
</script>

2.開発する時、バックエンドのconsole.logが表示したい時、
「firebase server」ではなく、下記のコマンドを使って開発してください。

npm run dev