Part 1: Setting Up the Development Environment
In this first part of our series, we'll set up the development environment necessary to build our mini Whatsapp application. We'll be installing and configuring the essential tools and frameworks required for both the back end and the front end of our application.
Step 1: Installing Necessary Tools
Before we dive into coding, we need to install the following tools:
Node.js and npm: Node.js is a JavaScript runtime used for building the backend, and npm is the package manager for Node.js.
Flutter: Flutter is our framework for building the cross-platform mobile application.
PostgreSQL: PostgreSQL will be our database.
Docker: Docker will help us containerize our application.
Kubernetes (k8s): Kubernetes will manage the deployment of our containers.
Terraform: Terraform will handle our infrastructure as code.
Installing Node.js and npm
Download and install Node.js from the official website. This will also install npm.
To verify the installation, run:
node -v
npm -v
Installing Flutter
Follow the instructions on the Flutter installation guide to set up Flutter on your machine. After installation, verify by running:
flutter doctor
Installing PostgreSQL
Download and install PostgreSQL from the official website. Follow the instructions for your operating system.
Installing Docker
Download and install Docker from the official website. After installation, verify by running:
docker --version
Installing Kubernetes (k8s)
For local development, we can use Minikube to run Kubernetes on our local machine. Follow the installation guide for your operating system.
Installing Terraform
Download and install Terraform from the official website. Verify the installation by running:
terraform -v
Step 2: Setting Up NestJS for the Backend
NestJS is a powerful backend framework for building scalable server-side applications. Let's set it up:
Create a new NestJS project:
npm i -g @nestjs/cli nest new backend
Navigate to the project directory:
cd backend
Install the necessary dependencies:
npm install @nestjs/typeorm typeorm pg
Create a new module for our authentication system:
nest generate module auth nest generate module chat nest generate module contact nest generate module user
Step 3: Initializing a Flutter Project for the Frontend
Flutter will be used for building our cross-platform mobile application. Let's initialize a new Flutter project:
Create a new Flutter project:
flutter create frontend
Navigate to the project directory:
cd frontend
Open the project in your preferred IDE (VS Code, Android Studio, etc.).
Step 4: Configuring PostgreSQL
Start the PostgreSQL server and create a new database for our application:
psql -U postgres -p ***** CREATE DATABASE chat-production;
Update the NestJS project to connect to the PostgreSQL database. Edit the
app.module.ts
file:/// data source export function getAppDataSource( configService: PsqlConfigService, ): PostgresConnectionOptions { const config = configService.getConfig(); return { type: 'postgres', host: config.host, port: config.port, username: config.user, password: config.password, database: config.database, entities: [User], synchronize: true, ssl: ['production'].includes(config.appEnv) && { rejectUnauthorized: false, }, migrationsRun: true, logging: true, // logger: 'file', migrations: [__dirname + '/migrations/**/*{.ts,.js}'], }; } // app.module.ts import { Module } from '@nestjs/common'; import { TypeOrmModule } from '@nestjs/typeorm'; import { AuthModule } from './auth/auth.module'; @Module({ imports: [ TypeOrmModule.forRootAsync({ imports: [ConfigModule], useFactory: (configService: PsqlConfigService) => { return getAppDataSource(configService); }, inject: [PsqlConfigService], }), AuthModule, ChatModule, ContactModule, PresenceModule, ConfigModule, ], controllers: [], providers: [], }) export class AppModule {}
Step 5: Running the Application
Start the NestJS backend server:
npm run start:dev
Run the Flutter application:
flutter run
At this point, we have set up our development environment, including the necessary tools, the NestJS backend, and the Flutter front end. In the next part, we'll dive into building the authentication system for our mini Whatsapp application.
Stay tuned for Part 2: Building the Authentication System.
Subscribe to my newsletter
Read articles from Patrick Waweru directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Patrick Waweru
Patrick Waweru
git commit -m "always keep learning"