How to install pgadmin from source code for development on Windows
Tags: development, opensource, postgres, webdev
Published: 2023-08-24 21:50:39

pgAdmin is an open-source, web-based tool designed for the administration and management of PostgreSQL databases. Users can use its intuitive graphical interface (GUI) to interact with their PostgreSQL databases.
pgAdmin is available for Windows, macOS, and Linux, making it a versatile cross-platform choice for database administrators and developers.

Usually, pgadmin 4 can be installed by default on Windows when installing PostgreSQL. However, if you are interested in contributing to pgAdmin development or need to work with a specific version of pgAdmin, knowing how to configure it for development is crucial.

In this blog, I will show you how to install and configure pgadmin for development on Windows.

## Guide
The two easiest ways to setup pgadmin for development are:
- using virtual environment and python for backend
- **using Node.js and Yarn for frontend**

I will be covering the second method in this guide as it allows for dedicated frontend tools which yield better optimization and overall development, and also allows a separation of frontend and backend development environments. It is slightly more complicated to set up as compared to the first approach but offers more flexibility.

It goes without saying that this method requires you to have Python 3.6 or later installed as well as Node.js and Yarn.

### Steps
1. Open a terminal of your choice, I will be using gitbash.
2. Create a directory for your setup and navigate to the directory

```
mkdir pgadmin
cd pgadmin
```
3. Clone the pgadmin 4 git repository

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

You can now begin building the runtime for your frontend

4. Navigate to `/pgadmin4/runtime` directory (while in the `pgadmin` directory created above)

```
cd pgadmin4/runtime
```
5. Run the following command and copy the contents of the `dev_config.json.in` file

```
cat dev_config.json.in
```
The contents will look something like this:

```
{
    "pythonPath": "C:/Python38/python.exe",
    "pgadminFile": "../web/pgAdmin4.py"
}
```
Replace the string stored in `pythonPath` with the actual path to `python.exe` stored on your system.

6. Now run this command to create a new file called `dev_config.json` and open it for file writing

```
cat > dev_config.json
```
A blank line will appear when you enter this command. Paste the contents of the file copied earlier and hit `CTRL + D`

7. Run the command

```
yarn install
```
8. Execute the runtime by running this command

```
node_modules/nw/nwjs/nw
```

We can now configure the Python environment for the backend

9. Navigate out of the runtime directory

```
cd ..
```
10. Create a virtual environment using whatever name you wish. I named my environment `pgenv`

```
python -m virtualenv pgenv
```
11. Activate the environment

```
source pgenv/Scripts/activate
```
12. Upgrade to the latest version of pip

```
pip install --upgrade pip
```
13. Add the path to your PostgreSQL installation bin directory to your environment variables with this command

```
export PATH="$PATH:/c/Program Files/PostgreSQL/13/bin"
```
I'm using PostgreSQL v13 but you can change the path to match the version you have installed.
14. Install dependencies

```
pip install -r requirements.txt
```
15. Start the server by running

```
python web/pgAdmin.py
```
You will get a message like `Starting pgAdmin 4. Please navigate to http://127.0.0.1:5050 in your browser.`. Navigate to `http://127.0.0.1:5050` in your browser.