Part 1: Setting Up the Development Environment

Patrick WaweruPatrick Waweru
3 min read

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:

  1. Node.js and npm: Node.js is a JavaScript runtime used for building the backend, and npm is the package manager for Node.js.

  2. Flutter: Flutter is our framework for building the cross-platform mobile application.

  3. PostgreSQL: PostgreSQL will be our database.

  4. Docker: Docker will help us containerize our application.

  5. Kubernetes (k8s): Kubernetes will manage the deployment of our containers.

  6. 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:

  1. Create a new NestJS project:

     npm i -g @nestjs/cli
     nest new backend
    
  2. Navigate to the project directory:

     cd backend
    
  3. Install the necessary dependencies:

     npm install @nestjs/typeorm typeorm pg
    
  4. 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:

  1. Create a new Flutter project:

     flutter create frontend
    
  2. Navigate to the project directory:

     cd frontend
    
  3. Open the project in your preferred IDE (VS Code, Android Studio, etc.).

Step 4: Configuring PostgreSQL

  1. Start the PostgreSQL server and create a new database for our application:

     psql -U postgres -p *****
     CREATE DATABASE chat-production;
    
  2. 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

  1. Start the NestJS backend server:

     npm run start:dev
    
  2. 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.

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