Category: Software Engineering

Join us on this exhilarating journey, where we bridge the gap between frontend and backend development with the seamless integration of Serverpod and Flutter.

Gone are the days of relying on different programming languages for frontend and backend development. With Flutter’s versatile framework, you can effortlessly create stunning user interfaces for a myriad of platforms. However, the missing piece has always been the ability to build the backend in Dart as well—until now.

Introducing Serverpod, the missing link that completes the Flutter ecosystem. Now, with Serverpod, you can develop your entire application, from frontend to backend, all within the familiar and elegant Dart language. This synergy enables a seamless exchange of data and functions between the client and the server, reducing development complexities and boosting productivity.

1. What is Serverpod?

As a developer or tech enthusiast, we recognize the critical role backend services play in the success of any application. Whether you’re building a web, mobile, or desktop project, a robust backend infrastructure is the backbone that ensures seamless functionality and scalability.

That’s where “Serverpod” comes into the picture—an innovative backend solution developed entirely in Dart, just like your Flutter projects. With Serverpod at your disposal, you can harness the full power of Dart on both the frontend and backend, creating a harmonious development environment that streamlines your workflow.

The biggest advantage of using Serverpod is that it automates protocol and client-side code generation by analyzing your server, making remote endpoint calls as simple as local method calls.

1.1. Current market status

The top 10 programming languages for backend development in 2023 are as follows: 

[Note: The results presented here are not absolute and are based on a combination of surveys conducted in 2023, including ‘Stack Overflow Developer Survey – 2023,’ ‘State of the Developer Ecosystem Survey,’ ‘New Stack Developer Survey,’ and more.]

• Node.js – ~32%
• Python (Django, Flask) – ~28%
• Java (Spring Boot, Java EE) – ~18%
• Ruby (Ruby on Rails) – ~7%
• PHP (Laravel, Symfony) – ~6%
• Go (Golang) – ~3%
• .NET (C#) – ~2%
• Rust – Approximately 1%
• Kotlin (Spring Boot with Kotlin) – ~1%
• Express.js (for Node.js) – ~1%

Figure 01 provides a comprehensive overview of the current usage of backend development technologies, showcasing a plethora of options with diverse features and capabilities. However, the landscape takes a different turn when it comes to frontend development. While the backend technologies offer a wealth of choices, most of these languages lack native multiplatform support for frontend applications.

As a result, developers find themselves in a situation where they must choose between two sets of languages or technologies for backend and frontend business logic development.

1.2. New solution

As the demand for multiplatform applications continues to grow, developers are actively exploring new frameworks and languages that bridge the gap between backend and frontend development. Recently, a groundbreaking solution has emerged in the form of Serverpod. With Serverpod, developers can now accomplish server development in Dart, filling the crucial gap that was previously missing in the Flutter ecosystem.

Flutter has already demonstrated its remarkable support for a wide range of platforms. The absence of server development capabilities was a notable limitation that has now been triumphantly addressed with the introduction of Serverpod. This remarkable achievement enables developers to harness the power of Dart to build both frontend and backend components, creating unified applications with a shared codebase.

2. Configurations 

Prior to proceeding with the code implementation, it is essential to set up and install the necessary tools.

[Note: Given Serverpod’s initial stage, encountering errors without readily available online solutions is plausible. In such instances, seeking assistance from the Flutter community forum is highly recommended. Drawing from my experience, I suggest running the application on Flutter web first, particularly for Serverpod version 1.1.1, to ensure a smoother development process and gain insights into potential challenges.]

2.1. Initial setup

2.1.1 Install Docker

Docker serves a crucial role in Serverpod, facilitating:

• Containerization: Applications are packaged and shipped as containers, enabling seamless deployment and execution across diverse infrastructures.
• Isolation: Applications are isolated from one another, enhancing both security and performance aspects, safeguarding against potential vulnerabilities, and optimizing system efficiency.

Download & Install Docker from here.

2.1.2 Install Serverpod CLI 

• Run the following command:

dart pub global activate serverpod_cli

dart pub global activate serverpod_cli

• Now test the installation by running:

serverpod

serverpod

With proper configuration, the Serverpod command displays help information.

2.2. Project creation

To initiate serverpod commands, the Docker application must be launched first. Ensuring an active Docker instance in the backend environment is imperative to execute Serverpod commands successfully.

• Create a new project with the command:

serverpod create <your_project_name>

serverpod create <your_project_name>

Upon execution, a new directory will be generated with the specified project name, comprising three Dart packages:

<your_project_name>_server: This package is designated for server-side code, encompassing essential components such as business logic, API endpoints, DB connections, and more.
<your_project_name>_client: Within this package, the code responsible for server communication is auto-generated. Manual editing of files in this package is typically avoided.
<your_project_name>_flutter: Representing the Flutter app, it comes pre-configured to seamlessly connect with your local server, ensuring seamless communication between frontend and backend elements.

2.3. Project execution

Step 1: Navigate to the server package with the following command:

cd <your_project_name>/<your_project_name>_server

cd <your_project_name>/<your_project_name>_server

Step 2: (Optional) Open the project in the VS Code IDE using the command:

(Note: You can use any IDE you prefer, but for our purposes, we’ll use VS Code, which also simplifies DB connection later.)

code .

code .

Step 3: Once the project is open in the IDE, stop any existing Docker containers with this command:

.setup-tables.cmd

.setup-tables.cmd

Step 4: Before starting the server, initiate new Docker containers with the following command:

docker-compose up --build --detach

docker-compose up --build --detach

Step 5: The command above will start PostgreSQL and Redis containers, and you should receive the output:

~> docker-compose up --build --detach
	[+] Running 2/2
 	✔ Container <your_project_name>_server-redis-1     Started                                                                                                
 	✔ Container <your_project_name>_server-postgres-1  Started

~> docker-compose up --build --detach
	[+] Running 2/2
 	✔ Container <your_project_name>_server-redis-1     Started                                                                                                
 	✔ Container <your_project_name>_server-postgres-1  Started

(Note: If the output doesn’t match, refer to this Stack Overflow link for missing commands in the official documentation.)

Step 6: Proceed to start the server with this command:

dart bin/main.dart

dart bin/main.dart

Step 7: Upon successful execution, you will receive the following output, where the “Server Default listening on port” value is crucial. Please take note of this value.

~> dart bin/main.dart
 	SERVERPOD version: 1.1.1, dart: 3.0.5 (stable) (Mon Jun 12 18:31:49 2023 +0000) on "windows_x64", time: 2023-07-19 15:24:27.704037Z
 	mode: development, role: monolith, logging: normal, serverId: default
 	Insights listening on port 8081
 	Server default listening on port 8080
 	Webserver listening on port 8082
 	CPU and memory usage metrics are not supported on this platform.

~> dart bin/main.dart
 	SERVERPOD version: 1.1.1, dart: 3.0.5 (stable) (Mon Jun 12 18:31:49 2023 +0000) on "windows_x64", time: 2023-07-19 15:24:27.704037Z
 	mode: development, role: monolith, logging: normal, serverId: default
 	Insights listening on port 8081
 	Server default listening on port 8080
 	Webserver listening on port 8082
 	CPU and memory usage metrics are not supported on this platform.

Step 8: Use the “Server Default listening on port” value after “localhost,” i.e., “127.0.0.1,” and load this URL in your browser. Accessing “localhost:8080” will display the desired output, indicating that your server is running and ready to process requests.

Step 9: Now, as the containers reach the “Started” state, you can establish a connection with the database. We have opted for PostgreSQL as our DB choice, and the rationale behind this selection lies in the “docker-compose.yaml” file at the server project’s root. In the “service” section, PostgreSQL is already added, making it an ideal choice as the required setup is readily available. 

For the database setup, we need key information, such as Host, Port, Username, and Password. You can find all this vital information in the “config” directory’s “development.yaml” and “passwords.yaml” files. If you encounter difficulties locating these details, please refer to Figure 04.

‍Step 10: To establish the connection, you can install an application similar to Postico or, alternatively, I recommend using the MySQL extension, which can be installed in your VS Code with just one click.

‍Step 11: Follow these next steps:

1. Select the “Database” option.
2. Click on “Create Connection.”
3. Choose the “PostgreSQL” option.
4. Add a name for your Connection.
5. Fill in the information collected in the last step.
6. Finally, select the “Connect” option.

7. Upon success, you will receive a “Connect Success!” message, and the new connection will be added to the Explorer Tab.

Step 12: Now, we shift our focus to the Flutter project (Frontend):

Thus far, we have been working on the server project. Let us open a new VS Code instance for a separate Flutter project while keeping the current VS Code instance active, serving as the server.‍

Step 13: Execute the following command to run the Flutter project on Chrome:

flutter run -d chrome

flutter run -d chrome

With this, the default project will generate the following output:

Step 14: When you are finished, you can shut down Serverpod with “Ctrl-C.”

Step 15: Then stop Postgres and Redis.

docker compose stop

docker compose stop

3. Sample Project

So far, we have successfully created and executed the project, identifying three distinct components. The server project caters to server/backend development, while the Flutter project handles application/frontend development. The client project, automatically generated, serves as the vital intermediary, bridging the gap between the frontend and backend.

However, merely acknowledging the projects’ existence is insufficient. To maximize our proficiency, it is crucial to grasp the code and file structure comprehensively. To achieve this, we will embark on a practical journey, constructing a small project to gain hands-on experience and unlock deeper insights into all three components. This approach empowers us with a well-rounded understanding, further enhancing our capabilities in building remarkable applications.

3.1. What are we building?

In this blog, we will construct a sample project with basic Login and SignUp functionality. The SignUp process will collect user information such as Email, Password, Username, and age. Users can subsequently log in using their email and password, leading to the display of user details on the dashboard screen. With the initial system setup complete and the newly created project up and running, it’s time to commence coding. 

3.1.1 Create custom models for API endpoints

Step1: Create a new file in the “lib >> src >> protocol” directory named “users.yaml”:

class: Users
table: users
fields:
  username: String
  email: String
  password: String
  age: int

class: Users
table: users
fields:
  username: String
  email: String
  password: String
  age: int

Step 2: Save the file and run the following command to generate essential data classes and table creation queries:

serverpod generate

serverpod generate

(Note: Add “–watch” after the command for continuous code generation). 

Successful execution of the above command will generate a new file named “users.dart” in the “lib >> src >> generated” folder. Additionally, the “tables.pgsql” file now contains SQL queries for creating the “users” table. The same command updates the auto-generated code in the client project. 

3.1.2 Create Tables in DB for the generated model 

Step 1: Copy the queries written in the “generated >> tables.pgsql” file.

In the MySQL Extension’s Database section, select the created database >> [project_name] >> public >> Tables >> + (Create New Table).

Step 2: Paste the queries into the newly created .sql file and click “Execute” above both queries.

Step 3: After execution, you will obtain an empty table with the “id” as the Primary key.

If you found multiple tables already present in your database like shown in the next figure, you can ignore those. These tables are created by the system with queries present in the “generated >> tables-serverpod.pgsql” file.

3.1.3 Create an API endpoint

Step 1: Generate a new file in the “lib >> src >> endpoints” directory named “session_endpoints.dart”:

class SessionEndpoint extends Endpoint {
  Future<Users?> login(Session session, String email, String password) async {
    List<Users> userList = await Users.find(session,
        where: (p0) =>
            (p0.email.equals(email)) & (p0.password.equals(password)));
    return userList.isEmpty ? null : userList[0];
  }
  Future<bool> signUp(Session session, Users newUser) async {
    try {
      await Users.insert(session, newUser);
      return true;
    } catch (e) {
      print(e.toString());
      return false;
    }
  }
}

class SessionEndpoint extends Endpoint {
  Future<Users?> login(Session session, String email, String password) async {
    List<Users> userList = await Users.find(session,
        where: (p0) =>
            (p0.email.equals(email)) & (p0.password.equals(password)));
    return userList.isEmpty ? null : userList[0];
  }


  Future<bool> signUp(Session session, Users newUser) async {
    try {
      await Users.insert(session, newUser);
      return true;
    } catch (e) {
      print(e.toString());
      return false;
    }
  }
}

If “serverpod generate –watch” is already running, you can ignore this step 2.

Step 2: Run the command:

serverpod generate

serverpod generate

Step 3: Start the server.
[For help, check out Step 1 – Step 6 mentioned in Project Execution part.]

3.1.3 Create three screens

Login Screen:

SignUp Screen:

Dashboard Screen:

3.1.4 Setup Flutter code

Step 1: Add the code provided to the SignUp button in the SignUp screen to handle user signups.

try {
        final result = await client.session.signUp(
          Users(
            email: _emailEditingController.text.trim(),
            username: _usernameEditingController.text.trim(),
            password: _passwordEditingController.text.trim(),
            age: int.parse(_ageEditingController.text.trim()),
          ),
        );
        if (result) {
          Navigator.pop(context);
        } else {
          _errorText = 'Something went wrong, Try again.';
        }
      } catch (e) {
        debugPrint(e.toString());
        _errorText = e.toString();
      }

try {
        final result = await client.session.signUp(
          Users(
            email: _emailEditingController.text.trim(),
            username: _usernameEditingController.text.trim(),
            password: _passwordEditingController.text.trim(),
            age: int.parse(_ageEditingController.text.trim()),
          ),
        );
        if (result) {
          Navigator.pop(context);
        } else {
          _errorText = 'Something went wrong, Try again.';
        }
      } catch (e) {
        debugPrint(e.toString());
        _errorText = e.toString();
      }

Step 2: Add the code provided to the Login button in the Login screen to handle user logins.

try {
        final result = await client.session.login(
          _emailEditingController.text.trim(),
          _passwordEditingController.text.trim(),
        );
        if (result != null) {
          _emailEditingController.text = '';
          _passwordEditingController.text = '';
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => DashboardPage(user: result),
            ),
          );
        } else {
          _errorText = 'Something went wrong, Try again.';
        }
      } catch (e) {
        debugPrint(e.toString());
        _errorText = e.toString();
      }

try {
        final result = await client.session.login(
          _emailEditingController.text.trim(),
          _passwordEditingController.text.trim(),
        );
        if (result != null) {
          _emailEditingController.text = '';
          _passwordEditingController.text = '';
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => DashboardPage(user: result),
            ),
          );
        } else {
          _errorText = 'Something went wrong, Try again.';
        }
      } catch (e) {
        debugPrint(e.toString());
        _errorText = e.toString();
      }

Step 3: Implement logic to display user data on the dashboard screen.

With these steps completed, our Flutter app becomes a fully functional project, showcasing the power of this new technology. Armed with Dart knowledge, every Flutter developer can transform into a proficient full-stack developer.

4. Result

To facilitate your exploration, the entire project code is conveniently available in this code repository. Feel free to refer to this repository for an in-depth understanding of the implementation details and access to the complete source code, enabling you to delve deeper into the project’s intricacies and leverage its functionalities effectively.

5. Conclusion

In conclusion, we have provided a comprehensive walkthrough of the step-by-step setup process for running Serverpod seamlessly. We explored creating data models, integrating the database with our server project, defining tables, executing data operations, and establishing accessible API endpoints for Flutter applications.

Hopefully, this blog post has kindled your curiosity to delve deeper into Serverpod’s immense potential for elevating your Flutter applications. Embracing Serverpod unlocks a world of boundless possibilities, empowering you to achieve remarkable feats in your development endeavors.

Thank you for investing your time in reading this informative blog!

6. References

1. https://docs.flutter.dev/
2. https://pub.dev/packages/serverpod/
3. https://serverpod.dev/
4. https://docs.docker.com/get-docker/
5. https://medium.com/serverpod/introducing-serverpod-a-complete-backend-for-flutter-written-in-dart-f348de228e19
6. https://medium.com/serverpod/serverpod-our-vision-for-a-seamless-scalable-backend-for-the-flutter-community-24ba311b306b
7. https://stackoverflow.com/questions/76180598/serverpod-sql-error-when-starting-a-clean-project
8. https://www.youtube.com/watch?v=3Q2vKGacfh0
9. https://www.youtube.com/watch?v=8sCxWBWhm2Y

‍