๐ Building a Fullstack App with dart_frog and Flutter in a Monorepo - Part 1
Creating a Full-Stack application with dart_frog and Flutter in a Monorepo Setup: 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
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 ...