Tutorial Project Setup

Tutorial: Project Setup

Warning

This section is under construction. Some of this information is out of date with the latest release of the template. Use with caution.

This guide walks through setting up your local development environment.

Initialize Project

1. Create and enter project directory:

mkdir exampleproj
cd exampleproj

2. Initialize project:

corepack enable
yarn init -2
yarn set version stable

Accept the defaults by pressing enter until finished.

Install Dependencies

1. Install Firebase tools locally:

yarn add --dev firebase-tools

2. Login to Firebase:

yarn firebase login

3. Enable web frameworks support:

yarn firebase experiments:enable webframeworks

4. Initialize Firebase project:

yarn firebase init

5. Select these options when prompted:

◉ Firestore: Configure security rules and indexes files for Firestore
◉ Hosting: Configure files for Firebase Hosting

6. Select "Use an existing project" and choose your project

7. Accept default file names

8. For web frameworks:

   • Say 'yes' to using a web framework
   • Use default folder for web application root
   • Select 'Vite'
   • Select 'TypeScript'
   • Choose your region
   • Say 'no' to automatic builds (for this tutorial)

Install Additional Dependencies

1. Enter the hosting directory:

cd hosting

2. Install essential dependencies:

yarn add --dev typescript vite
yarn add firebase

3. Install development packages:

yarn add --dev "@typescript-eslint/eslint-plugin" autoprefixer browserslist-to-esbuild eslint-plugin-import postcss tailwindcss vite-plugin-html

Next Steps

Continue to Tutorial/Adding Firebase to implement Firebase functionality.