Skip to content

Porter-smith/astro-firebase-svelte-tailwind-starter

Repository files navigation

Screenshot of the Astro Firebase Svelte Tailwind starter's Banner showing a clean and responsive design sign in and a perfect google lighthouse scores with 100% in Performance, Accessibility, Best Practices, and SEO

Astro Firebase Starter

A starter pack for getting started with Tailwind, Astro, Firebase, and Svelte.

Try me!

Getting Started

To use this starter pack, follow these steps:

  1. Clone the repository:

    git clone https://github.com/Porter-smith/astro-firebase-svelte-tailwind-starter.git
  2. Navigate to the project directory:

    cd astro-firebase-svelte-tailwind-starter
  3. Install the dependencies:

    pnpm install
  4. Start the development server:

    pnpm run dev

Quickstart

Follow this guide to quickly set up Firebase for your project. For more in-depth instructions, see FIREBASE_SETUP.md.

Obtain Firebase Keys

Service Account Key

  1. Go to the Firebase Console.
  2. Navigate to Project settings > Service accounts.
  3. Click Generate new private key, then download and secure the JSON file.

Web App Configuration

  1. If you haven't added a web app to Firebase, click the web icon (</>) in Project settings > Your apps to create one.
  2. Find your web app and you should see your configuration
  3. Copy the configuration object.

Update Configuration Files

Place your keys in the appropriate files:

  • .env: Add service account key values from the downloaded JSON.
  • src/firebase/client.ts: Insert the web app configuration object.

Set up .env with Helper Script

To configure your environment variables quickly:

Save your service account creds as service-account.json in the project's root. Run

 node scripts/createEnvFromServiceAccount.js

A .env file with all Firebase variables will be generated. So you don't have to copy and paste one by one each key.

Note: After setting up the .env file, remember to remove the service-account.json from your project's root directory to protect your credentials.

Enable Authentication

Configure Auth Methods

  1. In Firebase Console, go to Authentication.
  2. Click Get started.
  3. Enable your desired sign-in methods and configure each according to Firebase's prompts.

Ready to Go

You should now be able to run your application and use Firebase's authentication services.

🚀 Happy coding!

About

A minimal and accessible template for getting started with Firebase, Tailwind, & Svelte

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published