Setup pgadmin4 Development Environment

PgAdmin is the most widely used and feature-rich Open Source administration and development platform for PostgreSQL. You can follow these steps to set up your computer's pgAdmin development environment.

1. Install prerequisites

First of all you have to insatall these tools. Follow these links or else you may also get the setups from their official websites.

git (https://git-scm.com/downloads)
Node.js 16 and above (https://nodejs.org/en/download)
yarn (https://classic.yarnpkg.com/lang/en/docs/install)
Python 3.7 and above (https://www.python.org/downloads/)
PostgreSQL server (https://www.postgresql.org/download)

2. Clone the pgAdmin4 Repo:

After getting all the prerequisites installed, make a folder in your system where you will keep the code cloned from github repo of pgAdmin4.

Open the folder which you created in cmd and run this command there;

git clone https://github.com/pgadmin-org/pgadmin4.git

This will create a folder named pgadmin4 inside the directory which you created earlier.

3. Set the PATH environment variable:

Ensure that the PATH environment variable contains the PostgreSQL bin directory. This is important because the installation of the psycopg package depends on PG binaries.

For setting up the path go to environment variables in your system and add the new path there.

4. Create a Python virtual environment and activate it:

In terminal pen the main directory which you created in start and run this command there to create a virtual environment.

sudo apt install python3.10-venv   // if you use ubuntu you have to first install venv.

python3 -m venv myenv  // replace myenv with the name which you want for your virtual environment.

source myenv/bin/activate   // Activate your virtual environemnt.

After this you will see the name of your virtual environment inside parenthesis () at start of your current path in terminal. This shows that your virtual environment is now activated.

See the snippet below, here I am in my main pgAdmin4 directory created at first step and my virtual environment named myenv is activated.

5. Install Requirements for pgadmin4:

Now in the same terminal open pgadmin4 folder where the code is cloned using this command;

 cd pgadmin4

You are in pgadmin4 directory, now install the requirement here using this command;

(myenv) pip install -r requirements.txt

Your pgadmin backend server will be ready after successful completion of this command.

6. Install Javascript packages and bundle:

Now you are in pgadmin4 folder, go to the web directory using this command;

cd web

Now run these commands to install java scripts packages.

yarn install

After successfull completion of above command, run this command to comppile and bundle pgAdmin js files.

yarn run webpacker

Now every time before running your project in browser you have to bundle all files using this command ;

yarn run bundle

7. Customize the pgAdmin config:

In order to work effectively in a development environment, it is occasionally necessary to adjust a few setup parameters. The changes can be added to a config_local.py file that you generate in the pgAdmin root/web directory. Use the config.py file, which is the default setting, as a guide. config.py will be overwritten by any setting that is replicated in config_local.py. To apply the changes, you must restart the pgAdmin server. Typical example of config_local is:

# Override LOG_FILE
LOG_FILE = '/home/maimoona/pgadmin-logs/pgadmin.log'

# Override SQLITE_PATH
SQLITE_PATH = '/home/maimoona/pgadmin-db'

import os
import logging

# Change pgAdmin data directorycd ..
DATA_DIR = '/media/maimoona/HDD/PgAdmin4/pgadmin4/web/pgadmin/utils'

#Change pgAdmin server port
DEFAULT_SERVER_PORT = 5051

# Switch between server and desktop mode
SERVER_MODE = True

#Change pgAdmin config DB path
CONFIG_DATABASE_URI="postgresql://postgres:postgres@localhost:5436/pgadmin"

#Setup SMTP
MAIL_SERVER = 'smtp.gmail.com'
MAIL_PORT = 465
MAIL_USE_SSL = True
MAIL_USERNAME = 'user@gmail.com'
MAIL_PASSWORD = 'xxxxxxxxxx'

# Change log level
CONSOLE_LOG_LEVEL = logging.INFO
FILE_LOG_LEVEL = logging.INFO

8. Running in server mode:

The pgAdmin offers two modes that are Desktop and Server. PgAdmin always operates in desktop mode by default.
Application server mode execution will be done by setting;

SERVER_MODE = True

In the config_local.py file which you created in previous step.

For the first time login, pgAdmin will ask for an email address and password. This will be the email and password for your account and you will use it in next step.

9. Start the pgAdmin app:

Now its time to run your application on browser. Stay inside the web directory and run this command:

(myenv) python pgAdmin4.py

You should get an output similar to this after starting the pgAdmin flask server by running the above command. Open a new tab and go to http://127.0.0.1:5050. pgAdmin is now running from source code here.

10. Enter email and password:

Now enter the email and password which you would have set during the installation phase as initial user email and password while running pgAdmin on server mode.

After entering the email and password you will see this page.

That's all, your pgAdmin4 development environment is ready now.