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:

CODE: https://gist.github.com/velotiotech/bf9a2a958cdcca99c998f2ea75d618f7.js

• Now test the installation by running:

CODE: https://gist.github.com/velotiotech/fa91c8658a134902a5e0c87ee1cfcaf9.js 

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:

CODE:https://gist.github.com/velotiotech/6846c3854b705ad6530e7b48909040fe.js 

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:

CODE: https://gist.github.com/velotiotech/ab26876e0312a52bf116430b0b4050f8.js 

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: https://gist.github.com/velotiotech/c4e1a31270542037db983b5118b53efd.js 

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

CODE: https://gist.github.com/velotiotech/9de1e82797635220418a8626411ccc18.js 

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

CODE: https://gist.github.com/velotiotech/377040d40609dd92a7e551ad0c096c1b.js 

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

CODE: https://gist.github.com/velotiotech/d68b047f138c0d52fefad1a63cb7e156.js 

(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:

CODE: https://gist.github.com/velotiotech/d02ecbf9b8cacd1871d4772b24575b44.js 

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.

CODE: https://gist.github.com/velotiotech/452fdcd52818af4bcd7d70117b7f964b.js 

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:

CODE: https://gist.github.com/velotiotech/70ae4438d6cb6e44c484df2cb768077f.js 

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.

CODE: https://gist.github.com/velotiotech/54e32eb69aa9337c17b4bab031a1dd2d.js 

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":

CODE: https://gist.github.com/velotiotech/1854a8e1bc18d69731c56d0e6f68dd6a.js 

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

CODE: https://gist.github.com/velotiotech/116b29c9ccd23aac7f03e6a170e20890.js 

(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":

CODE: https://gist.github.com/velotiotech/b7ec010d51b5c2b4cb3c2edfe3fc55d5.js 

If "serverpod generate --watch" is already running, you can ignore this step 2.

Step 2: Run the command:

CODE: https://gist.github.com/velotiotech/83982299a033fd5f5394b9e8e1c97f57.js 

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.

CODE: https://gist.github.com/velotiotech/4adb81832b7525e0e7d504b13c0bb670.js 

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

CODE: https://gist.github.com/velotiotech/0b25d05403a3baeb25d61bff62b0a734.js 

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

‍