💡 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 ...
Top comments (2)
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.
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?