pndash

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

Usage no npm install needed!

<script type="module">
  import pndash from 'https://cdn.skypack.dev/pndash';
</script>

README

MudahProniagaDashboard

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

Key Features

Dashboard for PRO Niaga users for them to:

  • manage their ads
  • purchase premium services
  • 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

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

  2. 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]
};

  1. Run npm install

  2. Run npm run devstart to start the dashboard service

  3. 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

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

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

  3. 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

  4. 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

  5. Run make rb for the conf to take effect

  6. 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]
};

  1. Run npm install

  2. 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