DEV Community

Sailesh Dahal
Sailesh Dahal

Posted on • Originally published at saileshdahal.com.np on

🚀 Building a Fullstack App with dart_frog 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, 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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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)

Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
premedios profile image
Pedro Remedios • Edited

The melos command doesn't work.

Edit: Actually it does work but you didn't say to put the melos.yaml file in the "backend" project! I now have a melos.yaml on the full_stack project and on the backend project. Not sure if I should only have the melos.yaml on the backend project or both but it's working now.

Collapse
 
saileshbro profile image
Sailesh Dahal

Hey Hey, Thanks for the reply. You don't have to add it to the backend project.
Can you show what you are getting with you run melos command?
Have you tried melos clean && melos bootstrap?