Skip to content

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.

  3. Setup Firebase CLI (more info)

    1. Install Firebase CLI

    2. Log into Firebase

      Terminal window
      firebase login
    3. Install the FlutterFire CLI by running the following command from any directory:

      Terminal window
      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

    Terminal window
    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

      Terminal window
      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.

    Terminal window
    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:

    Terminal window
    # 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.

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.

Firebase Firestore

Enable and setup Firestore in your Firebase project.

  1. Create the database from the Firebase console

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

    Terminal window
    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:

    Terminal window
    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 :)

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>

Running the app

Run the app by running:

Terminal window
flutter run

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