eParticipation Portal

Software Build and Deployment Guide

pg. 1
Table of Contents
Related document……………………………………………………………………………………………………………… ……………. 3
Software requirement………………………………………………………………………………………………………………….3
Introduction………………………………………………………………………………………………………………………… ………….. 4
EPP application installation……………………………………………………………………………………………………………… 5
Node installation………………………………………………………………………………………………………………………… 5
Vs code installation…………………………………………………………………………………………………………………… ..6
Get EPP from GitHub…………………………………………………………………………………………………………………… ……9
Frontend node module installation …………………………………………………………………………………………… 12
Backend node module Installation……………………………………………………………………………………………. .15
Project Team-up ……………………………………………………………………………………………………………………………. 19
Frontend…………………………………………………………………………………………………………………………………… 19
Backend…………………………………………………………………………………………………………………………………… .21
EPPSystemOverview……………………………………………………………………………………………………………………....24
E-Participation Portal Live URL………………………………………………………………………………………………………..25
E-Participation Portal Live Environment………………………………………………………………………………………….26
Frontend………………………………………………………………………………………………………………………………...26
Backend………………………………………………………………………………………………………………………………....26
Admin Panel……………………………………………………………………………………………………………………………26
Database…………………………………………………………………………………………………………………………………26
Apache Web Server………………………………………………………………………………………………………….………26
MySQL Database Configuration.…………………………………………………………………………………………………..…29

pg. 2
Document Version

Document Version Description Prepared by Reviewed by

1.0V Initial draft Dulsha Amilan

Related documents

Document Name Path

Prerequisite for the deployment

Software requirement

Software Name Version

PHP 8.2v
Node.js 20.10.0v
MySQL 8.0v
React 18.2.0v

pg. 3
Introduction

The eParticipation Portal implemented by the Government of Sri Lanka is a digital pla tform
designed to enhance citizen engagement and participation in governance processes. It serves
as a centralized hub where citizens can interact, collaborate, and communicate with the
government on various matters, providing a channel for active involvement in decision-making
processes and policy formulation.

1.1. Purpose:

The primary aim of the eParticipation Portal is to foster transparency, inclusivity, and
responsiveness within the government. It seeks to bridge the gap between citizens and
policymakers, enabling citizens to voice their opinions, concerns, and suggestions on different
issues affecting the country. By facilitating this dialogue, the portal aims to promote a more
participatory and democratic governance model.

1.2. Intended Audience:

The portal caters to a diverse audience encompassing citizens, government officials,
policymakers, civil society organizations, and other stakeholders interested in contributing to
the governance process. It's designed to be user-friendly to encourage active participation from
individuals across various demographics and regions.

1.3. Changes with this Release:

This section outlines the enhancements, updates, or new features introduced in the current
release of the eParticipation Portal. It may include improvements in user interface, added
functionalities for better engagement, security enhancements, or any other modifications
aimed at improving the overall user experience and effectiveness of the platform.

The eParticipation Portal serves as a digital avenue fostering a more inclusive and participatory
approach to governance, allowing citizens to have a more direct role in shaping policies and
decisions that impact their lives.

pg. 4
EPP application installation

Node Installation

1. Open your web browser and go to the Node.js website: https://nodejs.org/

2. On the homepage, you'll see two versions: LTS (Long-Term Support) and Current.
In most cases, it's recommended to download the LTS version for stability unless you have a
specific reason to use the Current version.
In our project, we worked in node 20.10.0 version

3. Click on the "LTS" or "Current" button to download the installer based on your preference.

4. Once the download is complete, run the installer. Follow the on-screen instructions to install
Node.js on your machine.

Refer-: https://youtu.be/tTQcpzRJ5vU?si=djaPlogmN_4AeX5A

pg. 5
5. After the installation is complete, you can verify that Node.js and npm (Node Package
Manager) are installed by opening a command prompt or terminal and typing the following
commands: node -v , npm –v

These commands should display the versions of Node.js and npm, respectively, indicating a
successful installation.

Visual Studio Code Installation

1.Open your web browser and go to the Visual Studio Code website:
https://code.visualstudio.com/

2. On the homepage, you'll see a "Download for Windows" button if you are using a Windows
machine.

pg. 6
 If you are using macOS or Linux, the website will automatically detect your operating system
and provide the appropriate download link.

Refer:- https://youtu.be/ohDo2lJrcoQ?si=QFKpiITTdrBl81oV

3. Click the "Download for Windows" (or the relevant option for your operating system) button.

4. Once the download is complete, run the installer.

5. Follow the on-screen instructions to install Visual Studio Code on your machine.

pg. 7
6. After the installation is complete, you should have Visual Studio Code installed and ready to
use. You can then open VS Code .

Get eParticipation project from GitHub

pg. 8
1. Open your web browser and go to the (
https://github.com/ICTASL/eparticipation_portal_react ) eParticipation git repository .

2. On the page, you'll see a "code" button. Then you click button and Copy the repository URL.

pg. 9
3. Open Visual Studio Code on your machine.

4. Click on "File" in the top-left corner.

5. Select "Add Workspace Folder..." from the menu.

6. In the dialog that appears, paste the GitHub repository URL into the input field.

7. Click the "Add" button.

8. Visual Studio Code will prompt you to clone the repository. Click "Clone" to download the
repository
as a ZIP file.

pg. 10
9. Choose a local directory on your machine where you want to save the project, and click
"Clone."

10. Once the cloning process is complete, go to the directory where you cloned the repository.

11. Extract the contents of the ZIP file if it's not automatically extracted.

12. Open the extracted folder in Visual Studio Code.

Now, you should have the GitHub project opened in Visual Studio Code.

pg. 11
FRONTEND NODE MODULE INSTALLATION

1. In the left side you can see explorer. in they you can see frontend folder. Then you

right click the frontend folder and click ( open in integrated Terminal ).

pg. 12
2. Then open a terminal bottom of the vs code.

pg. 13
3. Type : npm install in the terminal.

4. you can see the node_modules folder in the frontend folder.

pg. 14
BACKEND NODE MODULE INSTALLATION

1. In the left side you can see explorer. in they you can see backend folder. Then you

right click the frontend folder and click ( open in integrated Terminal )

pg. 15
2. Then open a terminal bottom of the vs code.

pg. 16
3. Type ( npm install) in the terminal.

pg. 17
4. You can see the node modules folder in the backend folder.

pg. 18
Project Team-up
FRONTEND

1. In the left side you can see explorer. in they you can see frontend folder. Then you

Right click the frontend folder and click ( open in integrated Terminal ).

pg. 19
2. Then open a terminal bottom of the vs code.

3. Type ( npm start ) in terminal.

If it is correctly start, open your site in the browser and In the terminal you can see

( web pack compiled successfully. No issues found.)In the terminal.

pg. 20
BACKEND

1. In the left side you can see explorer. in they you can see backend folder. Then you

Right click the backend folder and click ( open in integrated Terminal ).

pg. 21
2. Then open a terminal bottom of the vs code.

pg. 22
3. Type ( npm start ) in terminal.

If it is correctly start, In the terminal you can see ( PM2 Successfully daemonized) this

message and a table.

pg. 23
E-Participation Portal System Overview

pg. 24
 E-Participation Portal Live URL

URL: https://eparticipation.gov.lk/

 Protocol: https://

 Indicates this is a secure connection using HTTPS protocol

 Subdomain: eparticipation

 Indicates a specific section of the broader website related to e-participation

 Domain root: .gov

 The domain root indicates this is a government owned or operated domain

 Top Level Domain: .lk

 The top level domain (.lk) indicates the geographical location this domain is registered
in. .lk represents Sri Lanka

So in full:

 https:// - Secure connection protocol

 eparticipation - Subdomain for eparticipation section
 .gov - Domain root indicating a government domain
 .lk - Top level domain indicating registration in Sri Lanka

pg. 25
E-Participation Portal Live Environment
Here is a detailed description of the provided E-Participation Portal live
environment setup:

Frontend
 Runs a React app for the user interface/frontend
 Listens on port 3000
 Hosted on an Apache web server

Backend
 Runs a Node.js app for the backend API and server-side logic
 Listens on port 8800
 Also hosted on an Apache web server

Admin Panel
 A separate admin interface labeled "larvae-app"
 Listens on port 80 (typical for web traffic)
 Hosted on the same Apache web server
Database
 All components connect to a MySQL database
 MySQL database listens on port 3306 (default MySQL port)
 Hosted on the Apache server as well
 Apache Web Server

Apache Web Server

 Apache server hosts the frontend, backend, admin app and database
 Listens on port 443 for SSL encrypted connections

pg. 26
The E-Participation Portal follows a layered architecture consisting of:

1. Client-Facing Frontend Layer

2. Backend Processing Layer
3. Administrative Layer
4. Data Persistence Layer

1. Client-Facing Frontend Layer

 React based single page application
 Communicates with backend via API calls
 Renders views and components to end users
 Port 3000
2. Backend Processing Layer
 Developed on Node.js runtime
 Contains key server side logic for operations
 Exposes various public API endpoints for frontend
 Generates dynamic data for frontend views
 Port 8800
3. Administrative Layer
 Built using Laravel PHP framework
 CMS style admin interface and dashboards
 Provides admin users ability to manage content, users, roles etc
 Port 80
4.Data Persistence Layer
 MySQL relational database system
 Stores app data such as users, content, metadata etc
 Port 3306
 Accessed by backend layer for CRUD operations

pg. 27
Environment:
The components above are hosted distributed across staging, testing and
production environments each with separate databases, resources and
performance criteria.

Let me know if you would like any clarification or elaboration on any specific area
or aspect of this overview!

pg. 28
MySQL Database Configuration
Installation:
Download: Visit the MySQL website (https://www.mysql.com) and navigate to the Downloads section.
Select MySQL Workbench and download the appropriate version for your operating system (Windows,
macOS, or Linux).

Install MySQL:

Follow the installation wizard to install MySQL on your system.

During installation, set the root password. Keep it secure as it provides access to your entire database
system.

pg. 29
Configuration:

MySQL Workbench usually requires a connection to a MySQL database. Here's how you can set it up

pg. 30
During installation, set the root password. Keep it secure as it provides access to your entire database
system.

pg. 31
To import a SQL file into your MySQL database from a Git repository, you'll need the following
information:

pg. 32
Hostname: This is the address where your MySQL server is hosted. It can be an IP address or a
domain name.

Port: The port number on which MySQL is running. The default port for MySQL is 3306.

Password: The password for the MySQL user with appropriate privileges to access and modify
the database

pg. 33
Go to their administration panel.

pg. 34
And click to Data Import/restore option

Then import your sql folder:-

pg. 35
Once you have imported the SQL file into your MySQL database, there are a few additional
steps you might consider:

Verifying Data:

Check Data Integrity:

Verify that the data imported correctly by querying the tables in your database. Run SELECT
queries to ensure the data is as expected.

Go to their Schemas tab:-

pg. 36
And go to the Database and select table and right click to table icon go to the Select Rows-Limit
100 :-

pg. 37
And go to navigate Result Grid:-

Security Measures
1. Review User Privileges:
Ensure that the MySQL user used to import the SQL file has appropriate privileges. Limit
user permissions to only what is necessary for security.
2. Secure Sensitive Information:

If the SQL file contains sensitive information (like passwords), ensure they are properly secured
within the database.

pg. 38
pg. 39