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

Note:

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

├── packages
├── @shared
├── client-app
├── desktop
└── web

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

3. Start Apps

Start React Native App

In messenger-apps directory run command

$ yarn start:client

And in terminal press i for run on iOS Simulator or press a for run on Android Emulator (make sure you are already running emulator) For launch with a production configuration see here. You can also use applications without an expo, more details here.

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 App

It's simple here. See more: https://docs.expo.io/versions/latest/distribution/building-standalone-apps/

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