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 address
admin.[your-domain]
and point to server IP address
[your-domain]
and point to server IP address
MongoDB v3.6
- To install please download mongoDB
Redis server v2.8
- To install please download and setup Redis
Nginx v1.3
PM2 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
From command line / terminal please run these commands to check
$ node -v v14.16.0 |
$ mongo --version MongoDB shell version v4.0.7 git version: 1b82c812a9c0bbf6dc79d5400de9ea99e6ffa025 allocator: system modules: none build environment: distarch: x86_64 target_arch: x86_64 |
$ redis-server --version Redis server v=5.0.4 sha=00000000:0 malloc=libc bits=64 build=d4ba11298acbb366 |
$ 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.100 |
$ nginx -v nginx version: nginx/1.10.3 |
$ 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 ...] .... |
$ pm2 -v [PM2] Spawning PM2 daemon with pm2_home=/Users/xxx/.pm2 [PM2] PM2 Successfully daemonized 4.4.0 |
$ yarn -v 1.22.4 |
Ensure node v14.x
, MongoDB
, Redis server
, FFMPEG
, Graphicsmagick
and yarn
are running
CD to your API folder
Run yarn
to install nodeJS dependencies
$ yarn yarn install v1.22.4 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... |
Create new .env
from .env.example
file in the root dir
Open file .env
and 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=enable |
Run yarn dev
to 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:9000
it should show success message or Cannot GET /
Ensure nodejs
and yarn
are running
From frontend root directory run yarn
command 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.ts
file and edit information. Change with your url in development
or production
API 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=8081
or edit default port in server/index.ts
at line 7 const port = parseInt(process.env.PORT || '8081', 10)
Run yarn run dev
to 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:8081
to see the web
Similar Frontend web, same steps.
You should change default port with 8082
then open http://localhost:8082
to see your admin app
Make sure you have installed nodeJS dependencies by yarn
command
In API root directory, copy config > development.json
to config > production.json
Open .env
file and change
NODE_ENV
to production
PORT
to 8080
Change your base url, logoUrl… to your production Url
baseUrl=https://api.yourdomain.com/ logoUrl=https://api.yourdomain.com/assets/logo.png |
Replace your real logo in public > assets folder.
Change related info such as MongoDB, redis uri for production env
Testing by run command yarn start
or node server/www.js
$ yarn start yarn run v1.22.4 .... |
Run pm2 start server/www.js --name=api
to run API under background
Make sure you have installed nodeJS dependencies by yarn
command
Edit your API url and socket Url in config > shared.ts
Run 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=8081
or change port in server > index.ts
file
Testing by run yarn start
or node dist/index.js
it should show success message
$ yarn start yarn run v1.22.4 next start ready - started server on http://localhost:8081 |
Run pm2 start yarn --interpreter bash --name xchat-web
to run application under port 8081
Similar Frontend web, same steps.
You should change default port to 8082 by export PORT=8082
or change port in server > index.ts
file
Run pm2 start yarn --interpreter bash --name xchat-admin
to run app under port 8082
Config ports api, web, admin as following
API
: 8080
Web
: 8081
Admin
: 8082
Api
Let say our api code is in /var/www/api.xchat.info
folder and api is running under port 8080, add new file in /etc/nginx/sites-enabled/api.xchat.info
and content as bellow
You 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.info
folder and Frontend app is running under port 8081, add new file in /etc/nginx/sites-enabled/xchat.info
and content as bellow
You 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.info
folder and Frontend app is running under port 8082, add new file in /etc/nginx/sites-enabled/admin.xchat.info
and content as bellow
You 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.com
to access web frontend
Open browser and access: http://admin.yourdomain.com
to access web admin
Run pm2 ls
to see your applications
Run pm2 stop [id]
to stop app or pm2 reload [id]
to reload
Run applications in start up by pm2 startup
then pm2 save
Check here to setup https with nginx
Setup https with Certbot nginx
From API root directory run node server/migrate
to seed default values for settings and users
Default Admin: admin@example.com
Default Password: admin
You can change default values in server > migrations folder