DEV Community: Deni Sugiarto

Fixing “Connection Refused” Error Between pgAdmin and Postgres in Docker

Deni Sugiarto — Thu, 10 Oct 2024 02:14:19 +0000

When setting up pgAdmin to connect with PostgreSQL in a Docker environment, a common issue developers encounter is the “Connection Refused” error. This error typically arises due to incorrect configuration of the connection parameters in pgAdmin, particularly when using service names rather than container names.

In this article, we’ll walk through the steps to resolve the “Connection Refused” error by ensuring that pgAdmin connects to PostgreSQL using the container name.

Understanding the Problem

Docker containers use an internal network for communication, and each container can be accessed using its container name as the hostname. If you’re trying to connect pgAdmin to a PostgreSQL container and using localhost or an IP address, the connection will fail because pgAdmin doesn’t know where to find the PostgreSQL instance in the Docker network.

The error might look something like this in the logs:

could not connect to server: Connection refused
    Is the server running on host "localhost" and accepting
    TCP/IP connections on port 5432?

This happens because pgAdmin is not able to resolve localhost or the specified IP to the PostgreSQL container. The solution is to use the PostgreSQL container name in the connection settings.

Steps to Fix pgAdmin and PostgreSQL Connection in Docker

Set Up docker-compose.yml

Ensure that both pgAdmin and Postgres are part of the same Docker Compose network. Here’s a basic configuration:

version: '3'
services:
  postgres:
    image: postgres:14
    container_name: postgresdb
    environment:
      POSTGRES_USER: admin
      POSTGRES_PASSWORD: password
      POSTGRES_DB: mydatabase
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data

  pgadmin:
    image: dpage/pgadmin4
    container_name: pgadmin
    environment:
      PGADMIN_DEFAULT_EMAIL: admin@admin.com
      PGADMIN_DEFAULT_PASSWORD: admin
    ports:
      - "8080:80"
    depends_on:
      - postgres  # Ensures pgAdmin starts after PostgreSQL
    networks:
      - pgnetwork

networks:
  pgnetwork:
    driver: bridge

volumes:
  postgres_data:

In this example, PostgreSQL is running inside a container named postgresdb, and pgAdmin runs in another container called pgadmin. Both containers are connected via a Docker network named pgnetwork.

Access pgAdmin and Add a New Server

After running docker-compose up, pgAdmin will be accessible at http://localhost:8080. Use the credentials you specified (admin@admin.com and admin).

To connect pgAdmin to PostgreSQL:
a. Open pgAdmin in your browser.
b. Click on Add New Server.
c. In the General tab, name your server anything you like, e.g., “Postgres DB”.
d. In the Connection tab, use the following settings:

Host name/address: postgresdb (this is the container name of your Postgres service in Docker)
Port: 5432 (the default Postgres port)
Username: admin (this is the POSTGRES_USER defined in the docker-compose.yml)
Password: password (this is the POSTGRES_PASSWORD defined in the docker-compose.yml)
Maintenance database: mydatabase (this is the POSTGRES_DB defined in the docker-compose.yml)

Understanding Why It Works

By using the container name (postgresdb) in the Host name/address field, you’re telling pgAdmin to resolve the PostgreSQL service via Docker’s internal DNS. This eliminates the need for localhost or any external IP addresses.

The depends_on field in docker-compose.yml ensures that pgAdmin does not start until the Postgres container is up and running, avoiding potential timing issues that might cause connection failures.

Troubleshooting Tips

Firewall/Port Blocking: Ensure that port 5432 (Postgres) and port 8080 (pgAdmin) are open and not blocked by any firewall or security settings on your machine.
Database Logs: If you’re still experiencing issues, check the logs of both the Postgres and pgAdmin containers by running:

docker-compose logs postgres
docker-compose logs pgadmin

These logs will provide insights into any errors or warnings that can guide your debugging.

Network Inspection: You can inspect the Docker network to verify that both containers are connected and accessible by running:

docker network inspect <network_name>

In our case, it would be docker network inspect pgnetwork.

Testing the Connection

After completing the steps, test the connection by clicking Save in the pgAdmin interface. If everything is configured correctly, you should see your new server and be able to expand the database tree to view tables, schemas, and other details.

Conclusion

To resolve the “Connection Refused” error between pgAdmin and PostgreSQL when using Docker, make sure to:

Use the Postgres container name (not localhost or an IP) in the pgAdmin server configuration.
Ensure both services are connected via the same Docker network.
Verify that the docker-compose.yml file is properly configured.

By following these steps, you’ll have pgAdmin connecting to your Postgres instance smoothly within the Docker environment.

Could not find a declaration file for module framer-motion Error in Next.js 14

Deni Sugiarto — Sat, 27 Jul 2024 03:58:18 +0000

When integrating Framer Motion for animations in a Next.js 14 project with TypeScript, you might encounter the following error:

Could not find a declaration file for module 'framer-motion'

Typically, for other libraries, you might resolve this issue by installing the corresponding @types package. However, Framer Motion does not provide @types/framer-motion as it's already written in TypeScript. Instead, the issue is often related to TypeScript configuration.

Here's how to fix the issue:

Update tsconfig.json

The key to resolving the issue lies in adjusting your TypeScript configuration. Specifically, you need to change the moduleResolution option from "bundler" to "node". This ensures that TypeScript uses Node's module resolution strategy, which is more compatible with many libraries.

Here's the updated tsconfig.json configuration:

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noUncheckedIndexedAccess": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

In this configuration:

moduleResolution: Changed from "bundler" to "node". This setting tells TypeScript to resolve modules using Node.js conventions, which is often more reliable for third-party packages.

By following these steps, you should be able to resolve the type declaration error and use Framer Motion with TypeScript in your Next.js 14 project without further issues.

How to Remove Duplicate Paths in ZSH on MacOS

Deni Sugiarto — Sat, 13 Jul 2024 23:42:42 +0000

Having duplicate paths in your PATH variable can clutter your environment and lead to unexpected behavior when running commands. On macOS, using the ZSH shell, you can easily remove these duplicates to ensure a clean and efficient path configuration. Here’s a quick guide on how to do it using the typeset -U PATH command.

What is the PATH Variable?

The PATH variable is a crucial component of your shell environment. It defines the directories in which the shell looks for executable files in response to commands issued by the user. Over time, you might accumulate duplicate entries in your PATH, leading to inefficiencies and potential conflicts.

Why Remove Duplicates?

Efficiency: A cleaner PATH means the shell can locate executables faster.
Avoid Conflicts: Prevents potential issues where the shell might pick the wrong version of an executable.
Maintainability: Easier to manage and understand your environment settings.

Step-by-Step Guide to Remove Duplicate Paths in

Open Your Terminal: Start by opening your terminal application.
Add the Command to Remove Duplicates: Insert the following line into your .zshrc file. This command will ensure that your PATH variable contains unique entries.

ZSH

typeset -U PATH

Verification

To verify that the duplicates have been removed, you can print the PATH variable and inspect it:

echo $PATH

You should see that all the paths listed are unique.

Conclusion

You can keep your PATH variable clean and efficient by running the command typeset -U PATH in your terminal. This simple step ensures that your shell environment remains optimized, preventing potential conflicts and improving command lookup times. Maintaining a tidy PATH is a small but significant aspect of system administration and personal environment management.

zsh: permission denied: ./gradlew

Deni Sugiarto — Thu, 11 Jul 2024 00:54:31 +0000

Today, I ran into a problem while working on my React Native project. When I tried to execute the command ./gradlew signingReport, I received a permission denied error:

zsh: permission denied: ./gradlew

To fix this issue, I changed the file permissions by running the following command:

chmod +rwx ./gradlew

After updating the permissions, the command executed successfully, and I was able to continue with my project.

Please make sure you in android path!

Invalid Date in Safari

Deni Sugiarto — Mon, 08 Jul 2024 01:43:13 +0000

Hello everyone,

Today, I encountered a weird bug that only appears in the Safari browser. It works fine in other browsers. After debugging the code in Safari, I found that filtering data by date was resulting in an empty array. I have been using dayjs as my date library for formatting and filtering.

Here is the source date I use: "2024-7-1,6:0:0".

After some research, I discovered that Safari requires dates to be in ISO 8601 format. To handle this, I created a function dateStringToISO that converts a date string into the ISO 8601 format. Here is the code:

function dateStringToISO(dateString) {
  const date = new Date(dateString);

  // Check if the date is valid
  if (isNaN(date.getTime())) {
    throw new Error("Invalid date");
  }

  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');

  return `${year}-${month}-${day}`;
}

// Example usage:
const date = "2024-7-1,6:0:0";
console.log(dateStringToISO(date)); // Output: 2024-07-01

By using this function, you can ensure that your date strings are properly formatted for Safari, avoiding issues with invalid dates.

This version maintains your original points while improving readability and coherence.

Update function name regarding @jayantbh suggestions. Thanks for your suggestion

Level up your Git security: Verified commits with Kleopatra!

Deni Sugiarto — Tue, 02 Jul 2024 23:25:59 +0000

I just finished securing my GitHub workflow by setting up verified commits using Kleopatra and followed this awesome guide: YouTube Verified Commits on GitHub from Windows PC

Why verified commits?
Having a green checkmark next to your commits on GitHub isn't just for show. It tells everyone that your changes are coming from a trusted source, adding an extra layer of security to your projects. This is especially important for open-source contributions or collaborative work.

Kleopatra to the rescue!
Kleopatra is a fantastic tool for managing GPG keys on Windows. The video walks you through the entire process, from installing GPG4Win (which includes Kleopatra) to generating your key and configuring it with GitHub.

My experience:
Overall, the process was smooth sailing. The guide provides clear instructions, and using Kleopatra made managing the keys a breeze. Now I can push my commits with confidence, knowing they're cryptographically signed and verifiable.

Feeling secure?
If you're looking to add some extra security to your GitHub workflow, I highly recommend checking out verified commits with Kleopatra. It's a worthwhile investment for any developer!

P.S.
Have any of you tried verified commits before? Let me know your thoughts in the comments!

Struggling with Brand Icons in Web Development? Try Simple Icons!

Deni Sugiarto — Mon, 01 Jul 2024 02:01:49 +0000

Choosing a useful library can be tricky during web development because each library has its pros and cons. Today, I want to share the icon libraries I frequently use. For standard icons like mail and phone, I prefer Lucide Icons. Lucide Icons offers a wide range of high-quality, customizable icons that are perfect for everyday use in web applications. They are lightweight and easy to implement, making them a great choice for developers who need a reliable set of standard icons.

However, when it comes to brand icons, Lucide Icons doesn’t always have what I need. After some research, I discovered Simple Icons. You can check out this library at Simple Icons. Since I use React, I integrated their package library. Simple Icons offers “3150 Free SVG icons for popular brands,” which is amazing. After incorporating it into my projects, it perfectly addressed my need for standard brand icons.

Here’s a quick example of how to use Simple Icons in a React project:

First, install the necessary package:

// with yarn
yarn add @icons-pack/react-simple-icons

// with npm
npm add @icons-pack/react-simple-icons

// with pnpm
pnpm add @icons-pack/react-simple-icons

// with bun
bun add @icons-pack/react-simple-icons

Then, you can use the icons in your React components like this:

import { SiReact } from '@icons-pack/react-simple-icons';

function BasicExample() {
  return <SiReact color='#61DAFB' size={24} />;
}

In this example, we import icons for React, Next.js, JavaScript, and TypeScript from the react-icons package, which includes icons from Simple Icons. We then use these icons in a simple React component.

react #simpleicons #Nextjs #WebDevelopment #javascript #typescript

A Comprehensive Guide to React Hook Form

Deni Sugiarto — Fri, 28 Jun 2024 13:32:17 +0000

Building robust and user-friendly forms in React can be a time-consuming and error-prone process. Here's where React Hook Form comes in, a powerful library designed to simplify and enhance form handling in your React applications.

What is React Hook Form?

React Hook Form is a lightweight library built on top of React's state management hooks (useState and useReducer) that provides a streamlined API for managing form state, validation, and submission. It leverages the power of hooks to offer a performant and composable approach to form development.

Key Features of React Hook Form:

Effortless Form State Management: React Hook Form automatically manages form state using hooks, eliminating the need for manual state updates and ensuring consistency across the application.
Intuitive Validation: Define validation rules for your form fields using a declarative approach, making validation logic clear and easy to understand.
Enhanced User Experience: Built-in features like field resolvers, error handling, and conditional rendering contribute to a more user-friendly form experience.
Seamless Error Handling: React Hook Form automatically handles errors during form submission, providing clear and actionable error messages to users.
Form Submission Handling: Easily handle form submissions with a dedicated handleSubmit function that takes your form submission logic and returns the form data.
Customization and Integrations: React Hook Form is flexible and integrates well with other popular libraries like Yup and Zod for advanced validation needs.

Getting Started with React Hook Form:

Installation:

Bash
npm install react-hook-form

Basic Usage:

//JavaScript
import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data); // Log form data on submission
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name', { required: true })} placeholder="Name" />
      {errors.name && <span>Name is required</span>}
      <input {...register('email', { required: true, pattern: /^\S+@\S+\.\S+$/ })} placeholder="Email" />
      {errors.email && <span>Please enter a valid email address</span>}
      <button type="submit">Submit</button>
    </form>
  );
}

Advanced Usage:

Customization: React Hook Form allows customizing form state, validation messages, and field rendering behaviors.
Built-in Field Resolvers: Utilize built-in resolvers for common field types like checkboxes, radio buttons, and select elements.
Custom Validation Logic: You can integrate third-party validation libraries like Yup or Zod for more complex validation scenarios.

Benefits of Using React Hook Form:

Reduced Boilerplate Code: React Hook Form eliminates the need for manual state management and custom validation logic, streamlining your form development process.
Improved Code Readability: The declarative approach for validation and form state management contributes to more readable and maintainable code.
Enhanced Developer Experience: React Hook Form provides a developer-friendly API that simplifies form handling and debugging.
Reduced Errors: Automatic form state management and validation help minimize errors during form development.

When to Use React Hook Form:

React Hook Form is an excellent choice for a wide range of form-driven applications, including:

Simple Contact Forms: Easily build basic contact forms with validation for name, email, and messages.
Complex Registration Forms: Manage multi-step registration forms with validation for various user inputs.
Login and Signup Forms: Implement secure login and signup forms with validation for usernames, passwords, and email addresses.
Data Collection Forms: Create forms for collecting user data, ensuring data integrity through validation.

Conclusion:

React Hook Form is a valuable tool for React developers seeking a more efficient and enjoyable approach to form management. By embracing hooks, intuitive validation, and streamlined state management, React Hook Form empowers you to build user-friendly and robust forms that enhance the user experience of your React applications.

Additional Considerations:

Error Handling Customization: Explore customizing error messages and rendering to match your application's design and user experience needs.
Advanced Validation Scenarios: Consider using Yup or Zod for complex validation needs that require intricate rules and error messages.
Accessibility: Ensure that your forms are accessible by following

Top 5 reasons why choose React.js for your web projects:

Deni Sugiarto — Thu, 27 Jun 2024 23:54:26 +0000

Component-Based Architecture: React.js uses a component-based architecture, allowing you to break down your UI into small, reusable pieces. Each component manages its own state, making it easier to build and maintain complex user interfaces. This modularity enhances code reusability and scalability, saving time and effort in development.

Declarative Syntax with JSX: React's use of JSX (JavaScript XML) allows you to write components using a syntax that closely resembles HTML. This declarative approach makes your code more readable and easier to understand, as it clearly defines how your UI should look based on the current application state.

Virtual DOM for Efficient Updates: React introduces a virtual DOM, a lightweight representation of the actual DOM. React's reconciliation algorithm efficiently updates the virtual DOM and applies only the necessary changes to the real DOM, minimizing browser reflows and enhancing application performance. This approach results in faster rendering and smoother user experiences.

Strong Ecosystem and Community Support: React.js benefits from a vast ecosystem of tools, libraries, and resources supported by a large and active community. Whether you need routing (React Router), state management (Redux, MobX), or UI components (Material-UI, Ant Design), you can find robust solutions and community-driven support to accelerate your development process.

Backed by Facebook and Community: React.js is developed and maintained by Facebook, ensuring robustness, reliability, and continuous improvement. Additionally, its popularity has fostered a strong community of developers who contribute to its growth and share best practices, making React.js a solid choice for building modern web applications.

These reasons collectively make React.js a preferred framework for front-end development, offering developers powerful tools and techniques to create dynamic, interactive, and scalable user interfaces efficiently.