...

• I. Server requirement

  • 1. Web server

• II. Software requirements

  • Helpful links

  • Testing

    • 1. NodeJS

    • 2. MongoDB

    • 3. Redis server

    • 4. FFMPEG

    • 5. NGINX

    • 6. Pm2

    • 7. Yarn

• III. Setup and test project locally

  • 1. API

  • 2. front-office web (front office)

  • 3. Admin web

• IV. Setup and setup production environment with nginx

  • 1. API

  • 2. front-office web

  • 3. Admin web

  • 4. Setup nginx

    • a. Api

    • b. Front office

    • c. Back office

    • d. Testing

  • 5. Check applications are running under pm2

  • 6. Set up nginx with https

  • 7. Migration

I. Server requirement

1. Web server

...

II. Software requirements

xStreamer architecture needs these softwares

• NodeJS LTS version >= v20.x

  • To install please download NodeJS here

• MongoDB >= v4.2

  • To install please download mongoDB

• Redis server >= v3v6.1.2x

  • To install please download and setup redis

• FFMPEG

• Nginx >= v1.3 with http_auth_module is enabled

• PM2 is a daemon process manager that will help you manage and keep your application online 24/7

• Yarn to manage nodeJS package

...

1. NodeJS

$ node -v
v16v21.86.2

2. MongoDB

$ mongo --version
MongoDB shell version v4.2.7
git version: 1b82c812a9c0bbf6dc79d5400de9ea99e6ffa025
allocator: system
modules: none
build environment:
    distarch: x86_64
    target_arch: x86_64

...

$ redis-server --version
Redis server v=56.01.4 sha=00000000:0 malloc=libc bits=64 build=d4ba11298acbb366

...

We provide source code with 4 folders, check below and use in the app accordingly

• front-office web frontendfront-office

• back-office admin control panel for the application

• api api of the application

• config-sample

  • env product environment example config

    • api.env sample configuration for api

    • front-office.env sample configuration for front web

    • back-office.env sample configuration for admin web

  • nginx

    • admin.example.com.conf sample nginx configuration for admin web

    • api.example.com.conf sample nginx configuration for api

    • example.com.conf sample nginx configuration for web frontendfront-office

1. API

• Ensure node v16.x, MongoDB, Redis server, FFMPEG and yarn are running

• CD to your API folder

• Run yarn insall --production=false to install nodeJS dependencies and dev dependencies

...

• Create new .env from config-sample > env > api.env file in the root dir

...

• Content .env looks like below

# development or production
NODE_ENV=production

# http port to use, default is 8080
PORT=8080

# secret key to hash data
JWT_SECRET=57637278384742980983526417468101

# mongodb conection string. Read more https://www.mongodb.com/docs/manual/reference/connection-string/
MONGODB_URI=mongodb://localhost/xstreamers

# Redis configuration for queue
# configuration can be change in src > config > configuration.ts
REDIS_QUEUE_HOST=127.0.0.1
REDIS_QUEUE_PORT=6379
## username and password of redis if any. Support from Redis 6
REDIS_QUEUE_USERNAME=
REDIS_QUEUE_PASSWORD=
REDIS_QUEUE_DB=0
## enter true/1 if use TLS. For custom redis service such as AWS redis cluster
REDIS_QUEUE_TLS=
## enter true/1 if use cluster mode. For custom redis service such as AWS redis cluster
REDIS_QUEUE_USE_CLUSTER_MODE=

# base url for file upload server
# it can be the same api server or separate file server if any
FILE_UPLOAD_BASE_URL=https://api.example.com/files/{fileId}/upload
# base url for file service, it can be api service if using same server
FILE_BASE_URL=https://api.example.com

# your domain name, use to seed default data
DOMAIN=example.com

# API base url
BASE_URL=https://api.example.com

# email template dir
TEMPLATE_DIR=templates

# default redirect URL once clicking on verification on email
EMAIL_VERIFIED_SUCCESS_URL=https://example.com/auth/email-verified-success

• Check Migration point to seed default

• Run yarn dev to start development env

$ yarn dev
:48 PM] Starting compilation in watch mode...

...

[2:49:13 PM] Found 0 errors. Watching for file changes.

...

[Nest] 60068   - 08/03/2020, 2:49:17 PM   [NestFactory] Starting Nest application...
[Nest] 60068   - 08/03/2020, 2:49:17 PM   [InstanceLoader] QueueModule dependencies initialized +134ms
[Nest] 60068   - 08/03/2020, 2:49:17 PM   [InstanceLoader] RedisModule dependencies initialized +0ms
[Nest] 60068   - 08/03/2020, 2:49:17 PM   [InstanceLoader] HttpModule dependencies initialized +1ms
[Nest] 60068   - 08/03/2020, 2:49:17 PM   [InstanceLoader] QueueModule dependencies initialized +0ms
[Nest] 60068   - 08/03/2020, 2:49:17 PM   [InstanceLoader] ServeStaticModule dependencies initialized +4ms
....

• Open browsers and run http://localhost:8080 it should show success message or Hello World!

2.

...

front-office web (front office)

• Ensure nodejs and yarn are running

• From frontend front-office root directory run yarn insall --production=false to install nodeJS dependencies and dev dependencies

...

# configuration for web. If have any change in configuration we have to rebuild application and reload.
## development or production
NODE_ENV=production

## api endpoint in server side
API_ENDPOINT=http://localhost:8080

## api endpoint in client side
NEXT_PUBLIC_API_ENDPOINT=https://api.example.com

# custom secret key for authen
NEXTAUTH_SECRET=G47OMY1US7BECpcr0X-H8llMeKp4ldt7tmiEAYi7wrOoJNiJ8RKfz5We1nai4wd8n53AS19Axvp7jQZBc1zoIA
# your frontoffice url
NEXTAUTH_URL=https://example.com url
NEXTAUTH_URL=https://example.com
# your front office url
BASE_URL=https://example.com
# your file domain (or api domain if file is from api domain)
EXTERNAL_IMAGE_FILE_HOSTNAME=api.example.com

• Run yarn run dev to start development env

$ yarn run dev
yarn run v1.16.0
$ ts-node --project tsconfig.server.json server/index.ts
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

• Then you can open browser http://localhost:8081 to see the web

3. Admin web

• Similar Frontend front-office web, same steps.

• Create .env file from config-sample > env > back-office.env. Content looks like below. Change it with your configuration accordingly

# configuration for web. If have any change in configuration we have to rebuild application and reload.
## development or production
NODE_ENV=production

## api endpoint in server side
API_ENDPOINT=http://localhost:8080

## api endpoint in client side
NEXT_PUBLIC_API_ENDPOINT=https://api.example.com

# front office endpoint, use to clear cache or get direct url if any
FRONT_OFFICE_ENDPOINT=http://localhost:8081
# back office endpoint, use to clear cache or get direct url if any
BACK_OFFICE_ENDPOINT=http://localhost:8082

...

$ yarn run dev
yarn run v1.16.0
$ ts-node --project tsconfig.server.json server/index.ts
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

...

pm2 start yarn --name api.example.com -- start

2.

...

front-office web

• cd user web front-office folder

• Make sure you have installed nodeJS dependencies by yarn install --production=false command. Configure it like local setup, pm2 was installedlike local setup, pm2 was installed

• Run export NODE_ENV=production Or edit package.json file > check build script from "build": "next build" → change to "build": "NODE_ENV=production next build"

• Run yarn build

$ yarn build
yarn run v1.16.0
$ 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/frontendfront-office-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
 ....

...

pm2 start yarn --name example.com -- start

3. Admin web

• cd user admin folderMake sure you have installed nodeJS dependencies by yarn install --production=false command. Configure it like local setup, pm2 was installed back-office folder

  Make sure you have installed nodeJS dependencies by yarn install --production=false command. Configure it like local setup, pm2 was installed

• Run export NODE_ENV=production Or edit package.json file > check build script from "build": "next build" → change to "build": "NODE_ENV=production next build"

• Run yarn build

• Testing by run yarn start it should show success message

• Run pm2 start yarn --interpreter bash --name admin.example.com -- start to run application under port 8082. You can change port in package.json in start script

...

pm2 start yarn --name admin.example.com -- start

4. Setup nginx

a. Api

• Let say our frontend front-office code is in /var/www/api.example.com folder and api is running under port 8080, add new file in /etc/nginx/sites-enabled/api.example.com and content as bellow

• You have to change with our server name and source code path

server {
  listen 80;
	root /var/www/api.example.com/public;

	index index.html index.htm;
  server_name api.example.com;
  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 2000M; 2000M;
  access_log off;
  error_log off;
  location / {
    accesstry_logfiles $uri off@app;
  error_log off;

}
	location /@app {
      proxy_set_header   X-Forwarded-For $remote_addr;
      proxy_set_header   Host $http_host;
      proxy_pass         http://localhost:8080;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_cache_bypass $http_upgrade;
	}
   location /.well-known {
    alias /var/www/api.example.com/public/.well-known;
  }
   # check if url is a protected folder such as privated videos
  # then check auth
	location ~/protected/ {
	  auth_request /authcheck;
	  root /var/www/api.example.com/public/;
	}

	location = /authcheck {
	  internal;
    set $query '';
    if ($request_uri ~* "[^\?]+\?(.*)$") {
      set $query $1;
    }
    proxy_pass http://localhost:8080/files/auth/check?$query;
    proxy_pass_request_body   off;
    proxy_set_header Content-Length "";
	}
}

b.

...

Front office

• Let say our frontend front-office code is in /var/www/example.com folder and Frontend front-office app is running under port 8081, add new file in /etc/nginx/sites-enabled/example.com and content as bellow

• You have to change with our server name and source code path

server {
  listen 80;
	server_name example.com;

	root /var/www/example.com/public;
   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;

  # tuning performance for log request
  access_log off;
  error_log off;

	 off;
  location / {
    try_files $uri @app;
  }
  location / {
      proxy_pass http://localhost:8081/;
      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 "";
  }
   location /.well-known {
    alias /var/www/example.com/public/.well-known;
  }
   location /_next/static/ {
    alias /var/www/example.com/dist/.next/static/$1;
    access_log off;
    expires max;
  }
}

c.

...

Back office

• Let say our frontend back-office code is in /var/www/admin.example.com folder and Frontend back-office app is running under port 8082, add new file in /etc/nginx/sites-enabled/admin.example.com and content as bellow

• You have to change with our server name and source code path

server {
  listen 80;
	server_name admin.example.com;
	root /var/www/admin.example.com/public;

  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;
   access_log off;
  error_log off;
  location / {
    
	try_files $uri @app;
  }
  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 /.well-known {
    alias /var/www/admin.example.com/public/.well-known;
  }
   location /_next/static/ {
    alias /var/www/admin.example.com/dist/.next/static/$1;
    access_log off;
    expires max;
  }
}

d. Testing

• Open browser and access: http://yourdomain.com/ to access web frontendfront-office

• Open browser and access: http://admin.yourdomain.com to access web admin

...

• From API root directory run yarn migrate to seed default values for settings and users

  • Default admin: admin@[yourdomain] with domain is in .env file

  • Default password: adminadmin

  • If admin password is wrong, you can run node script reset-admin-pw to reset it to adminadmin

• You can change default values in src > migrations folder