Installation Documentation - xTalk
- Steve Smith
- 1 I. Server Requirements
- 2 II. Software Requirements
- 2.1 Testing
- 2.1.1 1. NodeJS
- 2.1.2 2. MongoDB
- 2.1.3 3. Redis Server
- 2.1.4 4. FFMPEG
- 2.1.5 5. NGINX
- 2.1.6 6. Graphicsmagick
- 2.1.7 7. Pm2
- 2.1.8 8. Yarn
- 2.1 Testing
- 3 III. Setup and Test It Locally
- 3.1.1 1. API
- 3.1.2 2. Frontend Web
- 3.1.3 3. Admin Web
- 3.2 IV. Setup Production Environment with NGINX
- 3.2.1 1. API
- 3.2.2 2. Frontend Web
- 3.2.3 3. Admin Web
- 3.2.4 4. Setup NGINX
- 3.2.5 5. Check applications are running under pm2
- 3.2.6 6. Set up NGINX with HTTPS
- 3.2.7 7. Migration
I. Server Requirements
xChat supports all platforms: Windows, MacOS, Linux.
xChat needs a VPS server with at least:
2GB of RAM - recommend 4GB
40GB of HDD
1 CPU core - recommend 2 cores at least
3 domains / sub domains
api.[your-domain]and point to server IP addressadmin.[your-domain]and point to server IP address[your-domain]and point to server IP address
II. Software Requirements
MongoDB >= v4.2 - To install please download mongoDB
Redis server >=v5.x - To install please download and setup Redis
Nginx
v1.3with http_auth_module is enabledPM2 is a daemon process manager that will help you manage and keep your application online 24/7
Yarn or npm to manage nodeJS package
Typescript 4.2.3 or higher - To install run
npm install typscript@latest
Ensure all softwares above are running before setup source code
Testing
From command line / terminal please run these commands to check
1. NodeJS
$ node -v
v14.16.02. MongoDB
$ mongo --version
MongoDB shell version v4.0.7
git version: 1b82c812a9c0bbf6dc79d5400de9ea99e6ffa025
allocator: system
modules: none
build environment:
distarch: x86_64
target_arch: x86_643. Redis Server
$ redis-server --version
Redis server v=5.0.4 sha=00000000:0 malloc=libc bits=64 build=d4ba11298acbb3664. FFMPEG
$ ffmpeg -version
fmpeg version 2.8.15-0ubuntu0.16.04.1 Copyright (c) 2000-2018 the FFmpeg developers
built with gcc 5.4.0 (Ubuntu 5.4.0-6ubuntu1~16.04.10) 20160609
configuration: --prefix=/usr --extra-version=0ubuntu0.16.04.1 --build-suffix=-ffmpeg --toolchain=hardened --libdir=/usr/lib/x86_64-linux-gnu --incdir=/usr/include/x86_64-linux-gnu --cc=cc --cxx=g++ --enable-gpl --enable-shared --disable-stripping --disable-decoder=libopenjpeg --disable-decoder=libschroedinger --enable-avresample --enable-avisynth --enable-gnutls --enable-ladspa --enable-libass --enable-libbluray --enable-libbs2b --enable-libcaca --enable-libcdio --enable-libflite --enable-libfontconfig --enable-libfreetype --enable-libfribidi --enable-libgme --enable-libgsm --enable-libmodplug --enable-libmp3lame --enable-libopenjpeg --enable-libopus --enable-libpulse --enable-librtmp --enable-libschroedinger --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libspeex --enable-libssh --enable-libtheora --enable-libtwolame --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx265 --enable-libxvid --enable-libzvbi --enable-openal --enable-opengl --enable-x11grab --enable-libdc1394 --enable-libiec61883 --enable-libzmq --enable-frei0r --enable-libx264 --enable-libopencv
libavutil 54. 31.100 / 54. 31.100
libavcodec 56. 60.100 / 56. 60.100
libavformat 56. 40.101 / 56. 40.101
libavdevice 56. 4.100 / 56. 4.100
libavfilter 5. 40.101 / 5. 40.101
libavresample 2. 1. 0 / 2. 1. 0
libswscale 3. 1.101 / 3. 1.101
libswresample 1. 2.101 / 1. 2.101
libpostproc 53. 3.100 / 53. 3.1005. NGINX
$ nginx -v
nginx version: nginx/1.10.36. Graphicsmagick
$ gm
GraphicsMagick 1.3.31 2018-11-17 Q16 http://www.GraphicsMagick.org/
Copyright (C) 2002-2018 GraphicsMagick Group.
Additional copyrights and licenses apply to this software.
See http://www.GraphicsMagick.org/www/Copyright.html for details.
Usage: gm command [options ...]
....7. Pm2
$ pm2 -v
[PM2] Spawning PM2 daemon with pm2_home=/Users/xxx/.pm2
[PM2] PM2 Successfully daemonized
4.4.08. Yarn
$ yarn -v
1.22.4III. Setup and Test It Locally
1. API
Ensure
node v14.x,MongoDB,Redis server,FFMPEG,Graphicsmagickandyarnare runningCD to your API folder
Run
yarnto install nodeJS dependencies
$ yarn
yarn install v1.22.4
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...Create new
.envfrom.env.examplefile in the root dir
Open file
.envand change config
#################
## environment ##
#################
NODE_ENV=development
APP_NAME=YOUR_APP_NAME
ALLOW_CORS=true
PORT=9000
## Change by your app secret
SESSION_SECRET=123141413
SITE_NAME=my app
# API url, remember add / at the end
siteUrl=http://localhost:8081/
baseUrl=http://localhost:8080/
#############
## mongodb ##
#############
# Change with your uri by changing connection string https://docs.mongodb.com/manual/reference/connection-string/
MONGO_URI=mongodb://localhost/api-kernel-dev
#############
## redis ##
#############
REDIS_HOST=localhost
REDIS_PORT=6379
REDIS_DB=0
REDIS_PASS=
REDIS_URL=redis://localhost:6379/0
## queue
QUEUE_PREFIX=queue
############
## agenda ##
############
AGENDA_COLLECTION_NAME=agenda
AGENDA_MAX_CONCURRENCY=6
## File size limit in MB
MAX_PHOTO_SIZE=10
MAX_VIDEO_SIZE=200
MAX_FILE_SIZE=100
# Phone code is 0000 when verifying user phone number
PHONE_DEBUG=true
# enable / disble admin create, edit or remove data
isEnableForUpdate=enableRun
yarn devto start development env
$ yarn dev
yarn run v1.22.4
$ NODE_ENV=development&nodemon ./server/www.js -e js,json
[nodemon] 1.19.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node ./server/www.js`
....Open browsers and run
http://localhost:9000it should show success message orCannot GET /
2. Frontend Web
Ensure
nodejsandyarnare runningFrom frontend root directory run
yarncommand to install nodejs dependencies
$ yarn
yarn install v1.22.4
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...Open
config > shared.tsfile and edit information. Change with your url indevelopmentorproductionAPI url
export default {
# In production, please change with your production url like https://api.yourdomain.com/v1
apiEndpoint: 'http://localhost:9000/v1',
# In production, please change with your production url like https://api.yourdomain.com
socketUrl: 'http://localhost:9000',
maxProfilePhotoNum: 5,
completedProfilePhotoNum: 5
};
export default {
# In production, please change with your production url like https://api.yourdomain.com/v1
apiEndpoint: 'http://localhost:9000/v1',
# In production, please change with your production url like https://api.yourdomain.com
socketUrl: 'http://localhost:9000',
maxProfilePhotoNum: 5,
completedProfilePhotoNum: 5
};Run
export PORT=8081or edit default port inserver/index.tsat line 7const port = parseInt(process.env.PORT || '8081', 10)Run
yarn run devto start development env
$ yarn run dev
yarn run v1.22.4
$ nodemon
[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): server/**/* static/**/*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `ts-node --project tsconfig.server.json server/index.ts`
....Then you can open browser
http://localhost:8081to see the web
3. Admin Web
Similar Frontend web, same steps.
You should change default port with
8082then openhttp://localhost:8082to see your admin app
IV. Setup Production Environment with NGINX
1. API
Make sure you have installed nodeJS dependencies by
yarncommandIn API root directory, copy
config > development.jsontoconfig > production.jsonOpen
.envfile and changeNODE_ENVtoproductionPORTto 8080Change your base url, logoUrl… to your production Url
baseUrl=https://api.yourdomain.com/
logoUrl=https://api.yourdomain.com/assets/logo.pngReplace your real logo in public > assets folder.
Change related info such as MongoDB, redis uri for production env
Testing by run command
yarn startornode server/www.js
$ yarn start
yarn run v1.22.4
....Run
pm2 start server/www.js --name=apito run API under background
2. Frontend Web
Make sure you have installed nodeJS dependencies by
yarncommandEdit your API url and socket Url in
config > shared.tsRun
yarn build
$ yarn build
yarn run v1.22.4
$ next build && tsc && tsc --project tsconfig.server.json
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled
> Using external babel configuration
> Location: "/Users/tuong/Projects/frontend-base-reactjs/.babelrc"
Creating an optimized production build
Compiled with warnings.
chunk styles [mini-css-extract-plugin]
Conflicting order between:
* css ./node_modules/css-loader??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./src/components/video/video.less
* css ./node_modules/css-loader??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./src/components/common/layout/page.less
* css ./node_modules/css-loader??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./src/components/common/base/loader.less
....Run
export PORT=8081or change port inserver > index.tsfileTesting by run
yarn startornode dist/index.jsit should show success message
$ yarn start
yarn run v1.22.4
next start
ready - started server on http://localhost:8081Run
pm2 start yarn --interpreter bash --name xchat-webto run application under port 8081
3. Admin Web
Similar Frontend web, same steps.
You should change default port to 8082 by
export PORT=8082or change port inserver > index.tsfileRun
pm2 start yarn --interpreter bash --name xchat-adminto run app under port 8082
4. Setup NGINX
Config ports api, web, admin as following
API: 8080Web: 8081Admin: 8082
Api
Let say our api code is in
/var/www/api.xchat.infofolder and api is running under port 8080, add new file in/etc/nginx/sites-enabled/api.xchat.infoand content as bellowYou have to change with our server name and source code path
server {
listen 80 ;
listen [::]:80 ;
root /var/www/api.xchat.info;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
server_name api.xchat.info;
client_max_body_size 200M;
location / {
proxy_pass http://localhost:8080/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Proxy "";
# WebSocket support
proxy_connect_timeout 7d;
proxy_send_timeout 7d;
proxy_read_timeout 7d;
}
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
location /.well-known {
alias /var/www/api.xchat.info/public/.well-known;
}
location /videos/protected/ {
auth_request /authvideo;
root /var/www/api.xchat.info/public/;
}
location = /authvideo {
internal;
set $query '';
if ($request_uri ~* "[^\?]+\?(.*)$") {
set $query $1;
}
proxy_pass http://localhost:8080/v1/media/authorization?$query;
proxy_pass_request_body off;
proxy_set_header Content-Length "";
}
location /photos/protected/ {
auth_request /authphoto;
root /var/www/api.xchat.info/public/;
}
location = /authphoto {
internal;
set $query '';
if ($request_uri ~* "[^\?]+\?(.*)$") {
set $query $1;
}
proxy_pass http://localhost:8080/v1/media/authorization?$query;
proxy_pass_request_body off;
proxy_set_header Content-Length "";
}
}Frontend
Let say our frontend code is in
/var/www/xchat.infofolder and Frontend app is running under port 8081, add new file in/etc/nginx/sites-enabled/xchat.infoand content as bellowYou have to change with our server name and source code path
server {
listen 80;
server_name xchat.info;
root /var/www/xchat.info;
gzip on;
gzip_proxied any;
gzip_comp_level 4;
gzip_types text/css application/javascript image/svg+xml;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
sendfile_max_chunk 512;
client_max_body_size 200M;
location / {
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://localhost:8081;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_cache_bypass $http_upgrade;
}
location /_next/static/ {
alias /var/www/xchat.info/.next/static/$1;
access_log off;
expires max;
}
location /static/ {
alias /var/www/xchat.info/static/$1;
expires max;
autoindex off;
}
location /.well-known {
alias /var/www/xchat.info/public/.well-known;
}
}Admin
Let say our frontend code is in
/var/www/admin.xchat.infofolder and Frontend app is running under port 8082, add new file in/etc/nginx/sites-enabled/admin.xchat.infoand content as bellowYou have to change with our server name and source code path
server {
listen 80;
server_name admin.xchat.info;
root /var/www/admin.xchat.info;
gzip on;
gzip_proxied any;
gzip_comp_level 4;
gzip_types text/css application/javascript image/svg+xml;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
sendfile_max_chunk 512;
client_max_body_size 200M;
location / {
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://localhost:8082;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_cache_bypass $http_upgrade;
}
location /_next/static/ {
alias /var/www/admin.xchat.info/.next/static/$1;
access_log off;
expires max;
}
location /static/ {
alias /var/www/admin.xchat.info/static/$1;
expires max;
autoindex off;
}
location /.well-known {
alias /var/www/admin.xchat.info/public/.well-known;
}
}Testing
Open browser and access:
http://yourdomain.comto access web frontendOpen browser and access:
http://admin.yourdomain.comto access web admin
5. Check applications are running under pm2
Run
pm2 lsto see your applicationsRun
pm2 stop [id]to stop app orpm2 reload [id]to reloadRun applications in start up by
pm2 startupthenpm2 save
6. Set up NGINX with HTTPS
Check here to setup https with nginx
Setup https with Certbot nginx
7. Migration
From API root directory run
node server/migrateto seed default values for settings and usersDefault Admin:
admin@example.comDefault Password:
admin
You can change default values in server > migrations folder