🚀 Building a Fullstack App with dart_frog and Flutter in a Monorepo - Part 1
Tags: dart, flutter, fullstack, dartfrog
Published: 2022-12-21 11:11:33

---
title: 🚀 Building a Fullstack App with dart_frog and Flutter in a Monorepo - Part 1
published: true
date: 2022-12-19 15:45:37 UTC
tags: Dart, Flutter, Fullstack, dartfrog
series: 🚀 Building a Fullstack App with dart_frog and Flutter in a Monorepo
canonical_url: https://saileshdahal.com.np/building-a-fullstack-app-with-dartfrog-and-flutter-in-a-monorepo-part-1
---

# 💡 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](https://pub.dev/packages/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](https://pub.dev/packages/melos).

## Setup [melos](https://docs.page/invertase/melos) 🛠

> [Melos](https://docs.page/invertase/melos) is a library that will be used to set up and manage monorepo projects.

To install [melos](https://docs.page/invertase/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](https://pub.dev/packages/dart_frog) 🐸

To handle the server-side logic of our full-stack to-do application, we will use a library called [dart\_frog](https://pub.dev/packages/dart_frog).

> [dart\_frog](https://pub.dev/packages/dart_frog) is a lightweight web framework for Dart that makes it easy to build server-side applications.

To install [dart\_frog](https://pub.dev/packages/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 ...