Setup the project

Let’s setup the project, but before make sure you have everything ready.

Prerequisites

ShipFlutter uses Flutter and Firebase. Before you start, make sure you have:

1. Download and Setup Flutter

2. Setup VS Code or other supported IDEs.

   Tip

   Consider also Copilot, IDX or Windsurf with Flutter plugins. They are an awesome companion for a starter-kit like ShipFlutter.

3. Setup Firebase CLI (more info)

   1. Install Firebase CLI

   2. Log into Firebase

      firebase login

   3. Install the FlutterFire CLI by running the following command from any directory:

      dart pub global activate flutterfire_cli

Initial setup

To setup the project and workspace follow these steps:

1. Download project

2. Unzip and extract contents to your workspace

3. Open with your IDE

4. Run the setup.sh script

   cd app && sh setup.sh

5. (Optional) Setup git and GitHub

   1. Create a new repository on GitHub

   2. Run the following command from the root of your project

      git init
      git add .
      git commit -m "Initial commit"
      git branch -M main
      git remote add origin <repository url>
      git push -u origin main

6. Setup Firebase (next section)

Firebase setup

In order to use Firebase in your project you will need to create or select a project, configure the app and the different services you need.

1. Setup Firebase for your app (from within the app folder). This will start the setup process.

   flutterfire config

2. When prompted, say yes to override the firebase_options.dart.

3. Select or create a Firebase Project

4. Select the platform you want to support.

5. A firebase_options.dart file will be created and all targets will be registered in your Firebase project.

6. Go back to the root and select the project you just created by running:

   # From the root of your project NOT the app folder
   firebase use --add

7. It will prompt for an alias. Just give it default

8. Complete the required services setup step below

After these setps, the firebase setup is ready and the app can run but some Firebase service might not work yet. Additionally, each module might require additional configuration to work.

Note

Some modules like AI and Functions requires the “Blaze” plan. Make sure to enable it for your project in the Firebase Dashboard.

Required services setup

The basic core features of the app require you to set up Firestore, Firebase Authentication, and App Check (for Flutter Web) first.

All other Firebase services are optional and can be setup later if needed.

Note

Unfortunately, Firebase does not provide a way to pre-configure these services, so you will need to do it manually.

Firebase Firestore

Enable and setup Firestore in your Firebase project.

1. Create the database from the Firebase console

   Tip

   Select a location close to your users and the same as Firebase Functions if you use them.

2. Open a terminal and run the following command from the root of the project:

   firebase init

   1. Select Firestore from the list of available Firebase services
   2. Select your project
   3. (Optional) Use the existing firestore.rules and firestore.indexes.json files

3. (Optional) Deploy the pre-configured rules and indexes:

   firebase deploy --only firestore

Firebase Authentication

Enable and setup Firebase Authentication in your Firebase project.

1. Open the associated Firebase Project dashboard.

2. Under Build > Authentication > Sign-in Method tab.

3. Enable Email/Password and Anonymous by adding them as providers

   (Optional) Enable social login.

4. Run the app and try to create a new user. It should work :)

Tip

If you target web, make sure to add your domain to the list of authorized domains (Settings > Authorised domains).

Firebase App Check

App Check protects your project from malicious requests. By default it’s unenforced for all services, but for Flutter Web, there is an issue that requires you to setup a debug token otherwise any Firebase request will be denied.

Follow these steps to enable App Check for Flutter Web:

1. Open the App Check - Apps tab in the Firebase Project dashboard.

2. Enable App Check (if not already enabled)

3. Click on the three dots menu in the Web app row.

4. Click on the “Manage debug tokens” button.

5. Click on the “Add debug token” button.

6. Input any name and generate a token (copy the token to your clipboard!).

7. Replace the token in the app/lib/web/index.html file:

   <script>
       self.FIREBASE_APPCHECK_DEBUG_TOKEN = "PASTE_YOUR_TOKEN_HERE";
   </script>

Tip

If you don’t target web, you can skip this step and setup App Check later following this guide.

Running the app

Run the app by running:

flutter run

You can also select a target or run the app via VSCode or Android Studio (more info).

Tip

For VSCode based IDEs you can use our pre-configured .vscode/launch.json configuration in the root of the project.