MudahProniagaDashboard

New Proniaga Dashboard build using React-Redux and Using Proapi as API backend

Key Features

Dashboard for PRO Niaga users for them to:

• [x] manage their ads
• [x] purchase premium services
• [x] check for transaction history
• [ ] reload credit
• [ ] update account profile
• [ ] check for pending cheque clearance
• [ ] download credit purchase invoices
• [ ] create subuser account

Getting Started

There are 3 choices of environment for running the project

OPTION 1: via regress environment (Recommended)

in regress

Setup private npm registry

1. npm set registry http://52.76.20.170:4873
2. npm adduser --registry http://52.76.20.170:4873
3. npm login
4. Username: admin
5. Password: m1u2d3a4h5

in regress environment mudahmy repository

1. Run make rinfo to get php apps port, proapi port, pn dashboard varnish port and pn dashboard browsersync port

$ make rinfo
[php_apps_port] - portnumber for the prefork server (php apps)
:
:
:
[proapi_port] - portnumber for proapi
[pn_dashboard_varnish_port] - portnumber for varnish in Proniaga Dashboard
[pn_dashboard_browsersync_port] - portnumber for Browsersync of Proniaga Dashboard

2. Run make pai to start up the proapi endpoint service

3. Run printf "cmd:bconf\ncommit:1\nend\n" | nc localhost [trans_port] | grep "newpn\.client\.host" in regress and make sure the proniaga dashboard URL is http://regress.mudah.my:[pn_dashboard_varnish_port]

in regress environment MudahProniagaDashboard repository

1. Clone the MudahProniagaDashboard repository into regress root directory. Once cloned, change directory into the cloned project

2. Create copy of dev_config_example.js, rename to dev_config.js

3. Place the ports obtained from mudahmy into the dev_config.js file

module.exports = {
		PROAPI_URL: 'http://regress.mudah.my:[proapi_port]/pndash/v1',
		SITE_URL: 'http://regress.mudah.my:[php_apps_port]',
		SITE_2_URL: 'http://regress.mudah.my:[php_apps_port]',
		CHAT_URL: 'https://chatweb-pergi.mudah.my',
		ERROR_URL: 'https://proniaga.regress.mudah.my:3000/error/log',
		PNDASH_VARNISH: [pn_dashboard_varnish_port],
		PNDASH_BROWSERSYNC: [pn_dashboard_browsersync_port]
};

4. Run npm install

5. Run npm run devstart to start the dashboard service

6. Delete conf/bconf/bconf.txt.site.in, if you are moving from local macOS to regress server.

OPTION 2: via local macOS machine

in regress environment mudahmy repository

1. Run make rinfo to get php apps port, proapi port, pn dashboard varnish port and pn dashboard browsersync port

$ make rinfo
[php_apps_port] - portnumber for the prefork server (php apps)
:
:
:
[proapi_port] - portnumber for proapi
[pn_dashboard_varnish_port] - portnumber for varnish in Proniaga Dashboard
[pn_dashboard_browsersync_port] - portnumber for Browsersync of Proniaga Dashboard

2. Run make pai to start up the proapi endpoint service

3. Run cp conf/bconf/bconf.txt.regress.local.in.example conf/bconf/bconf.txt.regress.local.in to set local regress bconf

4. Commented below line on conf/bconf/bconf.txt.site.in, to prevent slowest on controlpanel edit store profile checking the chat info

   *.*.common.chat_server.chat.host=https://chat.mudah.my

5. Modify the content in bconf.txt.regress.local.in so that the conf *.*.common.newpn.client.host=http://proniaga.regress.mudah.my:%REGRESS_PNDASH_VARNISH_PORT%/ is set in the file

6. Run make rb for the conf to take effect

7. Run printf "cmd:bconf\ncommit:1\nend\n" | nc localhost [trans_port] | grep "newpn\.client\.host" in regress and make sure the proniaga dashboard URL is http://proniaga.regress.mudah.my:[pn_dashboard_varnish_port]

in mac machine

1. You will need to have node.js installed. On macOS, node.js can be installed via Homebrew. In the terminal type $ brew install node command to install Node

   OR

   via downloading node installation package from https://nodejs.org/en/download/

2. To check the Node and NPM version. $ node -v $ npm -v

3. Add host entry in /etc/hosts 127.0.0.1 proniaga.regress.mudah.my

4. setup private npm registry

1. npm set registry http://52.76.20.170:4873
2. npm adduser --registry http://52.76.20.170:4873
3. npm login
4. Username: admin
5. Password: m1u2d3a4h5

in mac machine MudahProniagaDashboard repository

1. Clone the MudahProniagaDashboard repository in ~/Desktop directory. Once cloned, change directory into the cloned project

2. Create copy of dev_config_example.js, rename to dev_config.js

3. Place the ports obtained from mudahmy into the dev_config.js file

module.exports = {
		PROAPI_URL: 'http://regress.mudah.my:[proapi_port]/pndash/v1',
		SITE_URL: 'http://regress.mudah.my:[php_apps_port]',
		SITE_2_URL: 'http://regress.mudah.my:[php_apps_port]',
		CHAT_URL: 'https://chatweb-pergi.mudah.my',
		ERROR_URL: 'https://proniaga.regress.mudah.my:3000/error/log',
		PNDASH_VARNISH: [pn_dashboard_varnish_port],
		PNDASH_BROWSERSYNC: [pn_dashboard_browsersync_port]
};

4. Run npm install

5. Run npm run devstart to start the dashboard service

OPTION 3: via docker container

Can build development env using ./Dockerfile ./docker directory contains docker-compose file with EFK log server stack

1. There is a separate docker image DevDockerfile for developer

   Build docker image once.

   docker build -t pndashimg -f ./DevDockerfile .

2. Run container using pndashimg docker image

   docker run -v ~/Desktop/MudahProniagaDashboard:/usr/src/app/pndash -p 3000:3000 -it --name pndashcon -d -t pndashimg

3. Add host entry in /etc/hosts

   127.0.0.1 proniaga.regress.mudah.my

4. SSH into container

   docker exec -it pndashcon bash

   cd pndash

   npm run devstart

Staging Build

1. Run npm install

2. Run npm run clean-dist to clean any previous build files

3. Configure webpack.config.staging.js if needed

4. Run npm run build-staging to build production ready files in ./dist directory

Production Build

1. Run npm install

2. Configure webpack.config.prod.js if needed

3. Run npm run clean-dist to clean any previous build files

4. Run npm run build to build production ready files in ./dist directory

5. JavaScript list and other error may show. In that case build without list test

Deployment

Log server:

In directory ./docker configure .env file like example.env

docker-compose -f ./docker-compose-efk-only.yml up --build -d

App server:

In directory ./docker configure .env file like example.env

docker-compose up --build -d