DEV Community: Yoges

How to run PostgreSQL and pgAdmin on Docker?

Yoges — Fri, 19 Apr 2024 11:53:56 +0000

Table of content:

Prerequisite
Setting up the Docker network
Setting up the PostgreSQL container
Setting up the pgAdmin container
Creating a new database on the containerized PostgreSQL
Accessing the new database on the containerized pgAdmin
Tips

Prerequisite

Install all Docker tools for your computer from here

Setting up the Docker network

We're going to install PostgreSQL and pgAdmin on separate containers.
To enable these two containers to communicate with each other, they need to be available on the same Docker network.

Create the Docker network with the following command on the terminal:
```
docker network create my-network
```
This command creates a new Docker network with the following options:
- create my-network: sets the name of the network to "my-network", this can bet set it to any name preferred

Setting up the PostgreSQL container

Two steps are involved here. Please perform the following from the terminal.

Pull the latest PostgreSQL Docker image from the Docker Hub repository with the following command:
```
docker pull postgres
```
Wait for the image to be downloaded. Docker will automatically download the necessary layers and dependencies.

Create and run a new container based on the image just pulled with the command:

docker run --name my-postgres -e POSTGRES_PASSWORD=password -network my-network -d -p 5432:5432 postgres

The above command starts a new PostgreSQL container with the following options:
- --name my-postgres: sets the name of the container to "my-postgres", we can set it to any name we like.
- -e POSTGRES_PASSWORD=password: sets the password for the default "postgres" user to "password".
- -network my-network: attaches the Docker network to "my-network" which was the network we created earlier.
- -d: runs the container in detached mode (in the background).
- -p 5432:5432: maps the container's port 5432 to the host's port 5432, allowing access to the PostgreSQL server from outside the container.
- postgres: specifies the Docker image to use to create the container; in our case it's the image we pulled from the Docker Hub in step 1.

Setting up the pgAdmin container

This involves two steps as well.

Pull the official Docker distribution of pgAdmin 4 from the Docker Hub repository with the following command:
```
docker pull dpage/pgadmin4
```
Wait for the image to be downloaded. Docker will automatically download the necessary layers and dependencies.

Create and run a new container based on the image just pulled with the command:

docker run --name my-pgadmin -p 80:80 -v /path/to/local/directory:/var/lib/pgadmin -e PGADMIN_DEFAULT_EMAIL=your_email@example.com -e PGADMIN_DEFAULT_PASSWORD=your_password --network my-network -d dpage/pgadmin4

The above command starts a new PostgreSQL container with the following options:
- --name my-pgadmin: sets the name of the container to "my-pgadmin", we can set it to any name we like.
- -p 80:80: maps port 80 of the container to port 80 of the host machine. This allows accessing pgAdmin via a web browser.
- -v /path/to/local/directory:/var/lib/pgadmin: mounts a local directory from your host machine (/path/to/local/directory) to the /var/lib/pgadmin directory inside the container. Replace /path/to/local/directory with the actual path on your host machine where you want to store the pgAdmin data. By mounting a volume, the pgAdmin data will be persisted outside the container, on your host machine. Even if you stop and remove the container, the data will remain intact in the specified local directory.
- -e PGADMIN_DEFAULT_EMAIL=your_email@example.com: sets the default email for logging into pgAdmin. Replace your_email@example.com with your desired email address.
- -e PGADMIN_DEFAULT_PASSWORD=your_password: sets the default password for logging into pgAdmin. Replace your_password with your desired password.
- -network my-network: attaches the Docker network to "my-network" which was the network we created earlier.
- -d: runs the container in detached mode, meaning it runs in the background.
- dpage/pgadmin4: specifies the Docker image to use for creating the container.

Creating a new database on the containerized PostgreSQL

Now that we have the PostgreSQL container set up and running, let's create a new database on its server.

Ensure the PostgreSQL container is running:
- open a terminal or command prompt.
- run the following command to list the running Docker containers and then verify that your PostgreSQL container is listed with the status running:
```
docker ps
```
Open a shell inside the PostgreSQL container with the following command:
- replace with the actual name or ID of the PostgreSQL container (in our case it'll be my-postgres).
- this command opens an interactive shell session inside the container.
```
docker exec -it <container_name_or_id> bash
```
Inside the container's shell, use the psql command to connect to the PostgreSQL database with the following command:
```
psql -U postgres
```
Next create a new database using the following SQL command:
- replace with the desired name for the new database
```
CREATE DATABASE <database_name>;
```

Accessing the new database on the containerized pgAdmin

Ensure the pgAdmin container is running:
- open a terminal or command prompt.
- run the following command to list the running Docker containers & verify the pgAdmin container is listed and running.
```
docker ps
```
Access pgAdmin in the web browser at http://localhost and enter the username and password used during set up.
In pgAdmin, create a new server connection with the following details:
- Host name/address: my-postgres (the name of the PostgreSQL container)
- Port: 5432 (the default PostgreSQL port inside the container)
- Username: postgres (the default PostgreSQL username)
- Password: The password specified when running the PostgreSQL container
Now you should be able to connect to the PostgreSQL container from the pgAdmin container using the specified server connection. Both containers are communicating through the "my-network" network.

Tips

If we already having PostgreSQL running locally, it's very likely to have been configured to run on the default port 5432.
- To prevent conflict, map the PostgreSQL container to a different port.
- In the example below the PostgreSQL container is still using port 5432 internally, but it's mapped to port 5433 on the host machine
```
docker run --name my-postgres -e POSTGRES_PASSWORD=password -network my-network -d -p 5433:5432 postgres
```
Instead of accessing pgAdmin at http://localhost, we can map it to a specific URL like http://local.pgadmin for a more user-friendly access.
- We accomplish this by using a reverse proxy server like Nginx on the host machine. I'll write about this in the future.
What if we have to programatically access the containerized database from the code?
- Nothing changes here, we access it like how we access a local database, for e.g at:
```
postgres://postgres:password@localhost:5433/<the_containerized_database_name>?sslmode=prefer
```

8 websites to improve your CSS-related productivity

Yoges — Sat, 20 Feb 2021 14:18:07 +0000

To work faster

Test CSS Flexbox Rules - to quickly generate the layouts you need.
Optimizilla - Compressing is concerned with minimizing the number of bits required to represent an image. Compressing reduces an image size without much compromising its quality. Smaller size means faster loading time which equals happier users.
BEM naming cheatsheet - Ever ran out of names for your CSS elements? Don't go naming them like below; use BEM instead! Visit the website to learn a good convention to consider.
CSS selectors cheatsheet - Sometimes we have to modify a deep-nested element or target a few elements at the same time; this reference will come in handy at these times.

To play and learn

Grid Garden - a fun way to learn CSS grid by playing a cute game
Flexbox Froggy - while you're at it, why not learn flexbox by playing a game too. Fun!

For your reading pleasure

7 habits of highly effective media queries - this informative article is linked to many other resources to strengthen your understanding on building responsive apps.
https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862 - this writeup has a lot of tips on working with breakpoints.

How to Learn React for Newbies

Yoges — Sat, 10 Oct 2020 02:23:23 +0000

And by newbies, I mean those with minimal to no experience coding in JavaScript.

React is a JavaScript library for building user interfaces.

Prerequisite: JavaScript

As React is built on top of JavaScript(JS), it's crucial to understand the basics of it before learning React.

Also good to have is a decent knowledge about HTML and CSS.

How much JS to Know?

JS has many versions and the one that's most relevant to us is JS ES5 and beyond.

Here's a nice write-up on the important JS concepts to take note of before learning React by LogRocket:
JavaScript concepts to master before learning React

Do cross-reference the article against the following two repos on GitHub:

If you prefer watching video tutorials, I highly encourage you to check out The Net Ninja's Modern JavaScript (from Novice to Ninja) on Udemy.

I first found him on YouTube while trying to make sense of OAuth and I've been a fan since. The Net Ninja has a way of making even the hardest of concepts sound simple.

Not sure about the purchase? Check out the preview of his course on Youtube first.

Once you’re comfortable with the concepts, you can begin learning React (yeay!)

Learn React By Watching Videos

Colt Steele's Modern React Bootcamp was the one where all things React finally started to make sense to me.

I have a few other React courses in my Udemy account but I had a tough time wrapping my head around the concept of JSX, props, state etc until I found Colt's course!

Colt's The Web Developer Bootcamp is my favourite course ever so I didn't think twice before purchasing his React course when it was launched. Needless to say I was superbly pleased and grateful. :)

If you're pressed for time, you don't have to complete the whole course. My recommendation is to work on the following sections:

Section 1 - 15
Section 17-23
Section 32 - 33

Learn React By Reading

Alternatively, if you prefer reading over watching videos, do checkout this awesome FREE course by the University of Helsinki called Deep Dive Into Modern Web Development.

The following sections will be most relevant for our purpose:

Part 0 to 2
Part 7

Do take note that this course is more fast-paced than Colt's course. I had good understanding of React concepts before I started on this course.

What I liked best of this course is that it quickly brought me up to speed of React's new feature (at that time) called Hooks.

This course is also available in Chinese and Finnish/

Recording your Learning Journey

As you learn, it'll be a good idea to push the code you write to GitHub. This will get you familiarized with using git and also serve as a record on what you’re working on.

Unfamiliar with git? Start here: git - the simple guide

Questions?

If you’re stuck while learning, don't forget to look for answers on the courses’ forums.

Another good place to look for answers is the website stackoverflow.

If you do post a question on forums, I suggest that you do include the following information so that readers are more inclined to respond to your query:

What your issue is
What you have done to troubleshoot the issue
What you don’t understand or what you need assistance with

That’s all for now. Have fun learning!

Nevertheless, Yoges Coded

Yoges — Sat, 07 Mar 2020 10:48:33 +0000

The beginning

I've always found technology exciting and cool. Being born in the 80s, I was there when things around me changed significantly thanks to the internet. I tried coding before I entered uni - got myself a C++ book and tried the samples which never actually worked because I didn't even know what a compiler was.

Nevertheless I coded.

The next phase

In uni I learnt Pascal, C & Java and majored in Software Engineering. I graduated with a degree in Computer Science and started as a software developer in a local software development house. I learnt a lot in this company - coding (in Lotus Domino, RPG and BHT8000) and visiting clients across the neighboring country to work on implementations.

The screw up

It was during one of these business trips that I screwed up big time working on an AS/400 ERP system. I overwrote a production library instead of testing, OMG!!! It took a team of four many days of overtime and weekend work to clean up the mess I made. It made me overcautious and phobic of ever visiting a client place again.

Nevertheless I coded - thanks to my manager's support and encouragement.

The move

Seven years later, I was still coding - as a mother with a newborn now. I said yes when a recruiter called with a great opportunity at a company I dreamt of retiring in. It wasn't a developer role but there was a lot of learning opportunities and hey it was my dream company.

The job required me to learn hardware stuff and none of coding.

Nevertheless I coded - building mini apps for the team to improve things around me.

Next phase of life

Five years down the road, technology had evolved so much thanks to cloud; and I was now a mom of three (a boy and a pair of boys :)) who yearned to spend quality time with the kids instead of spending so much time in the traffic traveling to and fro work.

The plan?

It was to start learning web development. I figured having these skills, I'd be able to get a job as a coder that would give me a lot of flexibility to work remotely. And as it was, I loved to code so getting paid to do what I love was just perfect.

It wasn't easy trying to catch up on things.

Nevertheless, I coded.

Learning to code again

Udemy helped me a lot when I started on this journey in 2018.

While learning, I participated in my employer's nationwide appmakers' challenge and won with my JavaScript prototype; I was beyond thrilled!
Soon after together with a few colleagues, I got the opportunity to mentor final year undergraduates to further develop my idea.

The internal job application

These gave me the confidence to apply for an internal job opening for the role of a software developer even though I didn't meet many of their requirements.

I figured the personal interest that I've demonstrated all the while would compensate. I was wrong and upset for many days to come.

Nevertheless I coded and started picking up React and Linux skills.

The interview

Many months later, magic happened when I came across a post I resonated with on LinkedIn and requested to connect with the poster.

He kindly reviewed my resume and invited me to an interview session with the CTO. A few days later I got an offer! I didn't expect to get a break so soon and I was very grateful I did.

Back to coding

I've been on the job for two months now. It has not exactly been an easy journey since I joined - there's so much to learn and things are not really like how they were on tutorials. I've had many sleepless days trying to catch up on React, GraphQL, AWS and other related technologies.

Still I coded - even when deadlines loomed and I had five hours of sleep a day, I continued and tried not to give up. My teammates helped a lot along the way explaining stuff I didn't understand or get.

The ending?

Compared to the days I thought I'd never get through, things are looking more positive now as I understand the work flow and get more familiar with how all the pieces fit together.

Does it mean things won't get challenging anymore? They certainly will as technology evolves and there's still so much for me to catch up on. But positivity and determination will go a long way in achieving what our heart desires.

I believe we'll do well to utilize the support offered by the internet - on communities like dev.to, twitter's #100daysofCode and even stackoverflow.

Thank you #100DaysOfCode & #CodeNewbie

Throughout the journey as I got back to coding, the one constant support I had was on Twitter. Using the hashtags #100DaysOfCode & #CodeNewbie I was able to connect to many like minded people who were always generous in their support and encouragement.

How to use the `reduce` Method in JavaScript (and React)

Yoges — Wed, 20 Nov 2019 10:20:27 +0000

What is `reduce`

It's an ES5 method in JavaScript like for..each and map which we can use with arrays.

The difference is:

as the name suggests it reduces the number of values in an array to one.
we have access to the array's previous value apart from its current value and index.
we will send the accumulator's start value to the callback function; so when we first start previous value will be the same as the accumulator's start value

A Simple Example of Using `reduce`

Let's look at a simple example that uses reduce to count the total of an array.
Imagine you have an array: [98,45,33,47,100,80]
We can write the following code to use the reduce method to sum up the values in this array:

const scores = [98,45,33,47,100,80];
const totalScores = scores.reduce(
(previousScore, currentScore, index)=>previousScore+currentScore, 
0);
console.log(totalScores); //returns 403

What happens in the code is:

we call the reduce method on the array scores.
the method has access to the array's previous value, current value and index. *We don't use index in this example.
we send zero as the accumulator's initial value.
in our example when the method first runs (where currentScore is 98), previousScore assumes the value of zero as sent to the callback function.
the result of totalScores is 403.
if we change the initial value of the accumulator to 100, the value of totalScores then changes to 503.

const scores = [98,45,33,47,100,80];
const totalScores = scores.reduce(
(previousScore, currentScore, index)=>previousScore+currentScore, 
100);
console.log(totalScores); //returns 503

Using `reduce` in React

Imagine you have the following data structure in the App component:

  const course = {
    name: 'Half Stack application development',
    parts: [
      {
        name: 'Fundamentals of React',
        exercises: 10,
        id: 1
      },
      {
        name: 'Using props to pass data',
        exercises: 7,
        id: 2
      },
      {
        name: 'State of a component',
        exercises: 14,
        id: 3
      }
    ]
  }

To display the total number of exercises in in the Total component:

from App send parts as a prop to Total:
in Total, call the reduce method on parts.
parts contains multiple values name, exercises and id.
so we explicitly specify exercises as the value we want to use in the calculation.

App.js:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Total from "./components/Total";

const App = () => {
  const course = {
    name: "Half Stack application development",
    parts: [
      {
        name: "Fundamentals of React",
        exercises: 10,
        id: 1
      },
      {
        name: "Using props to pass data",
        exercises: 7,
        id: 2
      },
      {
        name: "State of a component",
        exercises: 14,
        id: 3
      }
    ]
  };

  return (
    <div>
      <Total parts={course.parts} />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Total.js:

import React from "react";

const Total = props => {
  const total = props.parts.reduce(
    (prevValue, currentValue) => prevValue + currentValue.exercises,
    0
  );
  return <p>Totalzzz: {total}</p>;
};

export default Total;

Result:

Hope this helps!

How to Add Custom CSS & JavaScript Files to an ExpressJS App

Yoges — Sat, 12 Oct 2019 09:16:58 +0000

This tutorial assumes the use of EJS as the view template engine of your Express app.

Step 1: Generate an Express App Skeleton

The easiest way to create an Express app is by using the express-generator.

Step 2: Download CSS and JavaScript Files

In this example, we're going to use MaterializeCSS to beautify our app.

Go to MaterializeCSS's website and download the compressed CSS and JavaScript files.
Once downloaded, extract the files into the folder public in your app.
Take note to place CSS and JavaScript files into different folders inside the public folder.
The file 'materialize.css' will go into folder public/stylesheets.
The file 'materialize.js' will go into folder public/javascripts.

Step 3: Create partials files

We'll create a header and a footer file inside the folder partials. These files will be linked our EJS files. We create partial files to easily link external files to EJS files.

Create a folder named partials inside folder views.
Create a new file called header.ejs inside folder partials with the following content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>iVMS</title>
    <link rel="stylesheet" href="/stylesheets/materialize.css" />
  </head>
  <body>
    <div class="container">

Create a new file called footer.ejs inside folder partials with the following content:

         </div>       
        <script type="text/javascript" src="/javascripts/materialize.js"></script>
      </body>
</html>

Your folder structure will now look like the following:

Step 4: Link partials files to EJS files.

Now that we have specified custom CSS and JavaScript files to be used in our app, let's see how it looks like on the app.

Replace the content of the file index.ejs with the following:

<% include partials/header %>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>
<% include partials/footer %>

Step 5: New Styling is Now Applied to Our App

Before:
After - MaterializeCSS styling is now applied to our app!

How Does This Work?

The code works because as we generated the Express app skeleton, some settings have been automatically added for us.

Open the file app.js.
You'll notice the use of the built-in middleware express.static on line 20 of the code.
This is the reason why we store our CSS and JavaScript files inside the folder public.
It's also the reason why we don't have to explicitly specify the name public in our path. More info about this here.

How To Quickly Generate An Express App Skeleton And Then Edit It

Yoges — Mon, 23 Sep 2019 02:00:54 +0000

First you must install the express-generator by typing:
npm install -g express-generator
Next run the following command to create an express app with the ejs engine:
express --view=ejs kikucare
kikucare is the name of the app we're creating.

Go into the newly created app folder by typing:
cd kikucare/
Install all dependencies by typing:
npm install
Next start the app by typing the command:
DEBUG=kikucare:* npm start
You can now view the app on the browser by going to the address http://localhost:3000/.
You'll see the following:

Let's make a simple change to what's displayed on the browser!

We'll edit the file index.js from the folder routes.
Modify line number 6 by replacing the title from 'Express' to 'Kikucare'
Output:

Fetch API 101

Yoges — Mon, 10 Jun 2019 16:36:40 +0000

Credit: This sharing is based on my learning from the super awesome The Net Ninja's JavaScript Course on Udemy.

Pre-requisite: Some (or more) good knowledge of promises is necessary to understand fetch.

What is fetch?

Simply put it's the modern way of getting data/resources from a server. fetch is supported by promises under the hood.
It replaces the use of XMLHttpRequest in making asynchronous calls to networks.

Due to its newness, fetch doesn't work on all browsers yet.

Calling fetch

To use fetch, simply type fetch() and use one of the following as its parameter:

an API endpoint - for example fetch("https://jsonplaceholder.typicode.com/todos/1");
a local resource - for example fetch("todos/vela.json");

fetch returns a promise which either resolves or rejects which we handle using .then() and .catch()

So a fetch call would look something like below:

fetch()
  .then(response => {
    //promise resolved, do something with result
  })
  .catch(err => {
    //promise rejected, handle the error
  });

Accessing the fetch response

When a promise resolves, we don't have access to the data we want yet.

For example, let's run the following code that will randomly retrieve a piece of advice each time:

fetch('https://api.adviceslip.com/advice')
  .then(response => {
    //promise resolved, do something with result
    console.log('Resolved: ', response);
  })
  .catch(err => {
    //promise rejected, handle the error
    console.log('Rejected: ', err);
  });

The code returns a response object. We will now have to call the json method available on the response object to access the returned data.

Calling the json Method on the Response Object

As shown above, json is a method on the response object (which we can see by expanding the proto key).

We need to call the json method on the response object to get the data we need.

When the json method is called, another promise will be returned which can either be resolved or rejected. So we need to chain the first call to another to manipulate the resulting data.

The way to do this is as below:

fetch('https://api.adviceslip.com/advice')
  .then(response => {
    //promise resolved, do something with result
    console.log('Resolved: ', response);
    //new code
    return response.json(); 
  })
  //new code
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    //promise rejected, handle the error
    console.log('Rejected: ', err);
  });

Output:

And this is ladies and gentlemen, how fetch works in a nutshell!

Three Steps to Remember While Working With fetch

Call fetch("xyz");
Call response.json() on the response
Do something with the data

Note on the Response's HTTP Status Code

Take note that fetch doesn't fail even when we call an incorrect end-point/resource.

For example, calling a non-existent route like https://api.adviceslip.com/advicexx won't make the execution jump to the catch block! A resolve is still returned in this case but with the HTTP response code of 404 (instead of 200).

So it's a good idea to check the response's HTTP status code prior to calling json on it. For example using the following code:

fetch('https://api.adviceslip.com/advice<strong>xx</strong>')
  .then(response => {
    //promise resolved, do something with result
    console.log('Resolved: ', response);
//new code
    if (response.status === 200) {
      return response.json();
    }
    throw new Error('Resource not found');
  })
  //new code
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    //promise rejected, handle the error
    console.log('Rejected: ', err);
  });