DEV Community

a99divx
a99divx

Posted on

🚀 Setting Up PostgreSQL and pgAdmin on Ubuntu (WSL2) for Web Developers

#webdev #javascript #programming #beginners

Setting Up PostgreSQL and pgAdmin on Ubuntu (WSL2) for Web Developers

🚀 Setting Up PostgreSQL and pgAdmin on Ubuntu (WSL2) for Web Developers

Welcome to the ultimate guide for installing PostgreSQL and pgAdmin on Ubuntu (WSL2), all while running on Windows! 🎉 This guide walks you through every step, making sure your database environment is up and running smoothly, with a little fun along the way! 🌟

GitHub Reference: For the full source code and configuration files related to this guide, check out the GitHub Repository.

Star the Repo

📝 Track Your Progress: Use the Issues tab to create a checklist of tasks as you work through this guide.

🔧 Customize Your Setup: Share your own tips and tricks by contributing to this guide!

💡 Get Help: Join our Discussions to ask questions and share your experiences with other developers.

📚 Table of Contents

  1. Introduction
  2. Prerequisites
  3. Installing PostgreSQL
  4. Creating and Managing PostgreSQL Clusters
  5. Installing and Configuring pgAdmin (Web Version)
  6. Final Verification
  7. Tips for Productivity
  8. Conclusion
  9. Additional Resources

📝 Introduction

When it comes to managing databases, you need powerful tools! 💪 PostgreSQL is one of the most powerful open-source relational databases available, and pgAdmin is the perfect web-based GUI to interact with it. Let’s make sure you have everything set up inside your Ubuntu (WSL2) environment. No need for clunky Windows apps—we’ll install pgAdmin directly in WSL as a web version! 🌐

⚙️ Prerequisites

Before diving in, make sure you have the following:

  • Windows 10/11: With WSL2 enabled.
  • Ubuntu (WSL2): Installed from the Microsoft Store.
  • Admin Access: To run sudo commands.
  • Internet Connection: To download all necessary packages.

🛠️ Quick WSL2 Setup (Optional)

If you haven’t installed WSL2 yet, here’s a quick way to do it:

  1. Open PowerShell as Administrator and run: 
   wsl --install
Enter fullscreen mode Exit fullscreen mode
  1. Download Ubuntu from the Microsoft Store and launch it to complete the setup (create a username and password).

🐘 Installing PostgreSQL

Let's get PostgreSQL up and running first! PostgreSQL will serve as the core database engine for your web development projects. 🚀

Step 1: Update Your Package List

Before installing anything, it’s always a good idea to update your system:

sudo apt-get update
Enter fullscreen mode Exit fullscreen mode

Step 2: Install PostgreSQL

Now, install PostgreSQL along with some additional utilities:

sudo apt-get install postgresql postgresql-contrib
Enter fullscreen mode Exit fullscreen mode

👨‍💻 What’s Happening?

  • postgresql: The core PostgreSQL database.
  • postgresql-contrib: Extra useful tools and extensions (like pgcrypto, adminpack, etc.).

Step 3: Verify the Installation

To make sure everything is installed correctly, check the version:

psql --version
Enter fullscreen mode Exit fullscreen mode

✅ You should see output like this:

psql (PostgreSQL) 14.13 (Ubuntu 14.13-0ubuntu0.22.04.1)
Enter fullscreen mode Exit fullscreen mode

Boom! PostgreSQL is installed and ready to go! 🎉

🛠️ Creating and Managing PostgreSQL Clusters

PostgreSQL uses clusters to manage databases. We’re going to create a new cluster that runs on a different port, so you can keep things organized.

Step 1: Create a New Cluster

Run the following command to create a cluster on port 5436:

sudo pg_createcluster 14 main5436 --port=5436
Enter fullscreen mode Exit fullscreen mode

This will create a new cluster for PostgreSQL version 14. Clusters are isolated instances of PostgreSQL.

Step 2: Start the Cluster

Next, start your new cluster:

sudo service postgresql@14-main5436 start
Enter fullscreen mode Exit fullscreen mode

Step 3: Check Cluster Status

Let’s check if everything is running smoothly:

sudo service postgresql@14-main5436 status
Enter fullscreen mode Exit fullscreen mode

🎉 Success! If you see the output saying Active: active (running), your cluster is live and ready to handle databases.

Step 4: Set a Password for the postgres User

Switch to the PostgreSQL user and set a password for your main database user:

sudo -i -u postgres
psql
Enter fullscreen mode Exit fullscreen mode

Then set the password for the postgres user:

ALTER USER postgres PASSWORD 'yourpassword';
Enter fullscreen mode Exit fullscreen mode

Exit the PostgreSQL prompt by typing \q.

🌐 Installing and Configuring pgAdmin (Web Version)

Now, let's move on to pgAdmin, the GUI for managing PostgreSQL databases. Instead of using the desktop version, we’ll install pgAdmin as a web-based application inside WSL2. This means you'll access pgAdmin through your browser, making it lightweight and flexible! 💻

Step 1: Add the pgAdmin Repository

First, add the pgAdmin repository to your package list:

curl -fsS https://www.pgadmin.org/static/packages_pgadmin_org.pub | sudo gpg --dearmor -o /usr/share/keyrings/packages-pgadmin-org.gpg
Enter fullscreen mode Exit fullscreen mode

Then, add the repository to your list of sources:

sudo sh -c 'echo "deb [signed-by=/usr/share/keyrings/packages-pgadmin-org.gpg] https://ftp.postgresql.org/pub/pgadmin/pgadmin4/apt/$(lsb_release -cs) pgadmin4 main" > /etc/apt/sources.list.d/pgadmin4.list && apt update'
Enter fullscreen mode Exit fullscreen mode

Step 2: Install pgAdmin

Run the following command to install the web version of pgAdmin:

sudo apt install pgadmin4-web
Enter fullscreen mode Exit fullscreen mode

📢 Note: This is a web version of pgAdmin, which you will access via your web browser! No need to install the Windows app. 🙌

Step 3: Configure pgAdmin

After installation, set it up for web mode:

sudo /usr/pgadmin4/bin/setup-web.sh
Enter fullscreen mode Exit fullscreen mode

During setup, you’ll be prompted to:

  1. Enter your email address (this will be your login).
  2. Create a strong password for the admin account.

Step 4: Apache Configuration for pgAdmin

The setup script will configure Apache to serve pgAdmin. When prompted to restart Apache, press y.

You can now access pgAdmin by navigating to:

http://127.0.0.1/pgadmin4
Enter fullscreen mode Exit fullscreen mode

or

http://localhost/pgadmin4
Enter fullscreen mode Exit fullscreen mode

🎉 You’re now able to manage your PostgreSQL databases using pgAdmin, right from your browser! 🚀

✅ Final Verification

Let’s make sure everything is working perfectly.

  1. Access pgAdmin: Open your browser and navigate to http://127.0.0.1/pgadmin4 or http://localhost/pgadmin4.
  2. Login: Use the admin credentials you just created.
  3. Connect to PostgreSQL: Inside pgAdmin, create a new server connection:
    • Hostname: localhost or 127.0.0.1
    • Port: 5436 (for the new cluster you created)
    • Username: postgres
    • Password: The password you set earlier.

🎉 Congratulations! You now have PostgreSQL and pgAdmin fully configured and ready to use on WSL2!

💡 Tips for Productivity

Here are some quick tips to boost your PostgreSQL and pgAdmin workflow:

  • pgAdmin Bookmarks: Bookmark the pgAdmin URL (http://127.0.0.1/pgadmin4 or http://localhost/pgadmin4) for quick access.
  • PostgreSQL Tuning: Fine-tune your PostgreSQL configuration by editing postgresql.conf to optimize for development or production.
  • Backup & Restore: Use pgAdmin’s easy-to-use backup and restore features to safeguard your databases.
  • Docker: If you prefer containerization, you can also run PostgreSQL in Docker alongside this setup for even more flexibility!

📖 Conclusion

You’ve just set up a fully functional PostgreSQL and pgAdmin (web version) environment inside WSL2! 🎉 This setup is optimized for web developers, making database management both simple and efficient. By using the web version of pgAdmin, you avoid the need for Windows-based applications, keeping your development flow seamless.

If you found this guide helpful, feel free to share it with fellow developers, or contribute to enhancing this guide on GitHub! 🙌

GitHub Reference: For the full source code and configuration files related to this guide, check out the GitHub Repository.

📚 Additional Resources

Top comments (0)

Read next

abhay_yt_52a8e72b213be229 profile image

Using useEffect for Fetching Data in React

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Understanding React Fiber: Enhancing Performance and User Experience in React

Abhay Singh Kathayat -

leemeganj profile image

React libraries for building forms and surveys

Megan Lee -

rahulgithubweb profile image

LeetCode Challenge: 135. Candy - JavaScript Solution 🍬

Rahul Kumar Barnwal -