How To Install Chat App

1. Backend launch

To start the backend you need to install docker and docker-compose How to install docker and How to install docker-compose

The entire backend is launched with a single command. Run the command in the root directory

$ docker-compose -f docker-compose.development.yml up --build

And then you need to wait until all the images are downloaded and build After executing this command, will run redis, mongodb, socker server and api server

After launch, you will have available services http://localhost:5000/graphql (api) http://localhost:4000 (socket server)

By executing this command you start all services with development configuration

For start with production configuration use command

$ docker-compose -f docker-compose.production.yml up --build

To run only redis and mongodb use command

$ docker-compose -f docker-compose.environment.yml up --build

In this case, you need to perform some actions:

  1. Go to messenger-api/src/config.ts and change development configuration.(replace mongoURI with mongodb://localhost:27017/messenger and redis.host with localhost)

  2. Go to messenger-socket/src/config.js and change development configuration. (replace redis.host with localhost)

  3. In messenger-api directory run command:

    1. $ yarn install

    2. $ yarn start

  4. In messenger-socket directory run command:

    1. $ yarn install

    2. $ yarn start

Before the deployment, make sure the data in the configuration files is correct, specify the correct hosts.

2. Install dependences for apps

In messenger-apps directory run command 

$ yarn install
$ yarn mobile:pod

Note:

messenger-appsis monorepo, inside there is a directory that contains packages

├── packages
  ├── @shared 
  ├── mobile
  ├── desktop
  └── web

@shared - Here is the code that is shared between platforms mobile - React Native App desktop - Electron web - React App

3. Start Apps

Start React Native App Metro

In messenger-apps directory run command 

$ yarn start:metro

Start iOS

$ yarn start:ios

Start Android

Before starting the project, you need to register in FireBase console

  • Open Project overview in the firebase console and click on the Android icon or + button to Add Firebase to your Android app.

  • Make sure that the Android package name is the same as the value of applicationId in your android/app/build.gradle.

  • Register the app & download the config file by clicking "Download google-services.json" to this location /android/app/google-services.json. See more

After you need to register the application in expo to be able to send push notifications. See More. In messenger-apps/packages/mobile run command and paste your FireBase Server Key

$ expo credentials:manager

And insert your experienceId in messenger-apps/packages/@shared/config.ts

export const PushExperienceId = '<your-experience-id>';

Next open the project messenger-apps/packages/mobile/android in android studio and compile

Start Web

$ yarn start:web

Start Desktop App

When you start desktop, make sure that you are running web

$ yarn start:web
$ yarn start:desktop

Note: If you run API Server in development configuration you can login and register with any phone number and with any code from SMS, in this mode the twilio does not work

Building

Before building, make sure that you have the correct hosts in the configuration file in the production section. Any building command uses a production section

Configuration file is located: messenger-apps/packages/@shared/config.ts

...
production: {
  graphqlHost: 'http://<api-host>:5000/graphql',
  socketHost: 'http://<socket-host>:4000'
}
...

Build web

$ yarn build:web

After executing this command, you will create a directory messenger-apps/packages/web/build

You can also use docker. Inside messenger-apps directory there Dockerfileand nginx.conf Docker himself will build web and will run nginx

Build Desktop

Before you build, make sure you specify the correct host in messenger-apps/packages/desktop/src/main.js

 const url =
    process.env.NODE_ENV && process.env.NODE_ENV === "development"
      ? "http://localhost:3000"
      : "<your-production-host>";

After that, run the command

$ yarn build:desktop

After executing this command, you will have desktop applications for mac, linux and windows. Path to created applications: messenger-apps/packages/desktop/dist See more: https://www.electronjs.org/

Build React Native Apps

You need to register your applications in expo to be able to send push notifications See more, Also insert yourexperienceIdin messenger-apps/packages/@shared/config.ts

export const PushExperienceId = '<your-experience-id>';

And you can compile projects as usual in android studio (messenger-apps/packages/mobile/android) and Xcode (messenger-apps/packages/mobile/ios)

4. Configure AWS S3 for upload photo

How to create bucket

Go to messenger-api/src/config.ts and put your AWS Account data

const AWS = {
  bucket: '',
  accessKey: '',
  secretKey: '',
  region: ''
};

You need add policy to your bucket. How to add Policy

Paste this policy

{
  "Version": "2012-10-17",
  "Id": "Policy1478209136055",
  "Statement": [
    {
      "Sid": "Stmt1478209120479",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:*",
      "Resource": "arn:aws:s3:::<your-bucket-name>/*"
    }
  ]
}

Replace <your-bucket-name>

5. Configure Twilio for send SMS Authentication

Go to messenger-api/src/config.ts and put your twilio data. See more

production: {
  ...
  twilio: {
    sid: '<sid>',
    token: '<token>',
    from: '<phone number>' // From which number will SMS be sent
  },
  ... 
},

SMS sending only works when API in production mode

Note

You can add addresses of STUN / TURN servers for calls in

messenger-apps/packages/@shared/config.ts

export const RTCConfig = {
  iceServers: [{ urls: 'stun:stun1.l.google.com:19302' }]
};

This configuration will work for all applications.

NextLocalization

Last updated

Was this helpful?