Project structure

The structure of a Gazelle full-stack project is not so different from a standard Flutter project. The main difference is the presence of a directory called backend.

The backend directory

This directory holds everything that's related to Gazelle. It has 3 sub-directories:

client
models
server

The client directory

Here, you'll find the strongly-typed client for your Flutter application. We won't look at it very much, as it gets generated by the CLI.

The models directory

This directory is used to define your entities for the application. It has 2 sub-directories:

entities
models

We will put our custom entities inside the entities directory, the models directory is handled by the CLI, it holds the serialization and deserialization logic, and it is shared between the server and the client directories.

The server directory

We will spend most of our time here, creating routes, hooks, registering plugins and creating the business logic for our amazing application.

The folder structure is pretty straight forward, you have your main file wich is server.dart and your routes under the routes directory.

Flutter setup

The Flutter application gets set up for you when you create a new full-stack project. If you look closely at your pubspec.yaml you should notice that you have a dependency to your backend client.

dependencies:
  flutter:
    sdk: flutter

  client:
    path: backend/client

The main.dart file of the Flutter app is also different. It contains the most basic code to initialize the client and use it.

Next steps

In the next part of this guide, we will try to add a custom entity to our project and use it to create a new route for our application.

Introduction