Svelte & Firebase & Tailwindcss

Website

• Svelte
• Sveltekit
• Firebase
• Tailwindcss
• Vercel

Svelte設定

$ npx degit sveltejs/template <app-name>
$ cd <app-name>
$ npm i
$ npm i svelte-routing sveltestrap
$ npm i firebase
$ npm i -D tailwindcss@latest postcss@latest autoprefixer@latest
$ npx tailwindcss init

Tailwindcss設定

tailwind.config.js

const production = !process.env.ROLLUP_WATCH;

module.exports = {
  content: [
    './src/**/*.svelte',
    './src/**/*.html',
  ],
  enabled: production,
  theme: {
    extend: {},
  },
  plugins: [],
}

$ npm i svelte-preprocess

rollup.config.js

import sveltePreprocess from 'svelte-preprocess';

export default {
  plugins: [
    svelte({
      preprocess: sveltePreprocess({
        sourceMap: !production,
        postcss: {
          plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
          ],
        },
      }),

      ...
};

Firebase設定

1. プロジェクト作成
2. プロジェクトの設定 → SDK の設定と構成 → 構成を選択し → オブジェクトをコピー
3. App.svelte内のfirebaseConfigに貼り付け
4. AuthenticationからGoogleプロバイダーを追加

TODO: どうやらpublic/index.htmlに配置するらしい...でも適応されない...

Routing設定

App.svelte

<script>
    import { Router, Link, Route } from "svelte-routing";
    import Home from "./pages/Home.svelte";
    import About from "./pages/About.svelte";
</script>
  
<Router>
    <nav>
        <Link to="">home</Link>
        <Link to="about">about</Link>
    </nav>
    <main>
        <Route path="" component={Home} />
        <Route path="about">
        <About />
        </Route>
    </main>
</Router>

<style global lang="postcss">
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
</style>

Vercelデプロイ

Deploy Svelte with Vercel

Firebase → プロジェクト → Authentication → Sign-in method → 承認済みドメインにVercelのドメインを追加してください。

Firebaseデプロイ

$ firebase init hosting
 # setting
$ firebase deploy --only hosting

Hostingの選択にはスペースキーを使います。

デプロイ取り消し

$ firebase hosting:disable