> For the complete documentation index, see [llms.txt](https://weeego.gitbook.io/chat-app-monorepo/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://weeego.gitbook.io/chat-app-monorepo/master.md).

# How To Install Chat App

{% embed url="<https://www.youtube.com/watch?v=kDGwM6BnVBc>" %}

## 1. Backend launch

To start the backend you need to install `docker` and `docker-compose` \
[How to install docker](https://docs.docker.com/v17.09/engine/installation/) and [How to install docker-compose](https://docs.docker.com/compose/install/)&#x20;

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

```bash
$ 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) \
&#x20;<http://localhost:4000> (socket server)

{% hint style="info" %}
By executing this command you start all services with development configuration
{% endhint %}

#### For start with production configuration use command

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

#### To run only `redis` and `mongodb` use command

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

{% hint style="info" %}
In this case, you need to perform some actions:&#x20;
{% endhint %}

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`&#x20;
   2. `$ yarn start`
4. In `messenger-socket` directory run command:
   1. `$ yarn install`&#x20;
   2. `$ yarn start`

{% hint style="info" %}
Before the deployment, make sure the data in the configuration files is correct, specify the correct hosts.
{% endhint %}

## 2. Install dependences for apps

In `messenger-apps` directory run command&#x20;

```bash
$ yarn install
$ yarn mobile:pod
```

### Note:&#x20;

{% hint style="info" %}
`messenger-apps`is monorepo, inside there is a directory that contains packages
{% endhint %}

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

@shared - Here is the code that is shared between platforms\
mobile - React Native App\
desktop - Electron\
web - React App&#x20;

## 3. Start Apps

### Start React Native App Metro

In `messenger-apps` directory run command&#x20;

```bash
$ yarn start:metro
```

### Start iOS

```bash
$ 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](https://docs.expo.io/guides/setup-native-firebase/#bare-workflow-setup)

After you need to register the application in expo to be able to send push notifications. \
[See More](https://github.com/expo/expo/tree/master/packages/expo-notifications#add-your-projects-credentials-to-expo-server-optional). In `messenger-apps/packages/mobile` run command and paste your FireBase Server Key

```bash
$ expo credentials:manager
```

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

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

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

### Start Web

```bash
$ yarn start:web
```

### Start Desktop App&#x20;

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

```bash
$ 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

{% hint style="info" %}
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

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

{% endhint %}

### Build web

```bash
$ 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 `Dockerfile`and `nginx.conf`\
> Docker himself will build web and will run nginx

### Build Desktop

{% hint style="info" %}
Before you build, make sure you specify the correct host in `messenger-apps/packages/desktop/src/main.js`

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

{% endhint %}

After that, run the command

```bash
$ 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

{% hint style="info" %}
You need to register your applications in expo to be able to send push notifications\
[See more](https://github.com/expo/expo/tree/master/packages/expo-notifications#add-your-projects-credentials-to-expo-server-optional), Also insert your`experienceId`in `messenger-apps/packages/@shared/config.ts`

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

{% endhint %}

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 ](<https://medium.com/@shamnad.p.s/how-to-create-an-s3-bucket-and-aws-access-key-id-and-secret-access-key-for-accessing-it-5653b6e54337 >)

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

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

{% hint style="info" %}
You need add policy to your bucket. [How to add Policy](https://docs.aws.amazon.com/en_us/AmazonS3/latest/user-guide/add-bucket-policy.html)&#x20;
{% endhint %}

Paste this policy

```bash
{
  "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](https://www.twilio.com/docs/sms/quickstart/node)

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

{% hint style="info" %}
SMS sending only works when API in production mode
{% endhint %}

## Note

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

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

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

This configuration will work for all applications.