💡 Introduction

This tutorial will create a full-stack to-do application using Dart and Flutter in a monorepo setup.

A monorepo is a version control repository containing multiple projects with common code.

This allows for easier management and collaboration on projects within a single repository. We will share a common code between the frontend and backend of our to-do application, like interfaces, data models e.t.c.

The application's backend will be built using dart_frog, while the front end will be developed using Flutter.

This tutorial teaches you how to:

• 🧰 Set up a monorepo

• 💻 Create a full-stack Dart Flutter application

• 🔗 Manage and share common code between front-end and back end

• 📝 Build a to-do application with CRUD functionality

• 🏁 Complete the tutorial with a functional to-do application

Let's Go! 🚀

Before we can build our full-stack to-do application, we must set up the necessary tools and dependencies. First, we will install melos.

Setup melos 🛠️

Melos is a library that will be used to set up and manage monorepo projects.

To install melos, open a terminal and run the following command:

dart pub global activate melos

This command will install Melos globally, allowing us to use it in any project.

Create a melos.yaml file and add the below content to set up our full-stack to-do application.

name: full_stack_todo_dart
packages:
  - /**/pubspec.yaml

The packages field defines the packages that are part of the monorepo. In this case, we are using the /**/pubspec.yaml pattern, which tells Melos to search for all pubspec.yaml files in the project and consider them as packages.

Hopping into backend with dart_frog 🐸

To handle the server-side logic of our full-stack to-do application, we will use a library called dart_frog.

dart_frog is a lightweight web framework for Dart that makes it easy to build server-side applications.

To install dart_frog, open a terminal and run the following command:

dart pub global activate dart_frog_cli

To create a new dart_frog project, open a terminal and navigate to the directory where you want to create the project. Then, run the following command:

dart_frog create backend

The command "dart_frog" creates a new project with necessary files and directories and adds the dependency "dart_frog" to the project's "pubspec.yaml" file.

Once you have created a new dart_frog project and set up the backend of your full-stack to-do application, you can add a Melos script to run the server. To do this, open the melos.yaml file in the root directory of your project and add the following content:

scripts:
  backend:dev:
    run: melos exec -c 1 --fail-fast -- "dart_frog dev"
    description: Starts the dev server for the backend
    select-package:
      flutter: false

Once these steps have been completed, you can run the backend:dev script by opening a terminal and navigating to the root directory of your project. Then, run the following command melos run backend:dev

This will start the dev server for the backend of your to-do application. You can then start building the server-side logic of your application using dart_frog.

✓ Running on http://localhost:8080 (0.1s)

If you see an output similar to the one above after running the melos run backend:dev command means that the dev server for the backend of your full-stack to-do application has been successfully started.

If you open http://localhost:8080, you should be greeted with Welcome to Dart Frog!

Stay tuned for part-2 ...