DEV Community: Gassai Hamza

How to Dockerize a Spring Boot App with PostgreSQL

Gassai Hamza — Tue, 18 Apr 2023 23:43:42 +0000

In this article, I will show you how to use Docker with SpringBoot and PostgreSQL, to follow up you should have a basic understanding of what is Docker, Maven installed, experience with Spring Boot and an IDE of your choice.

Notice : If you already have a Spring Boot application you can skip sections 1 and 2 and go directly to section 3 and follow along.

Here you can find the code and other resources used in this demonstration (github.com)

1 - What we will build?

For demo purposes, we will create a simple recipe management app with two entities: Chef and Recipe.

2 - Create a spring boot application

For this, you can either use spring initializr or spring initializr plugin if you are using IntelliJ idea. and select the following dependencies: Spring Web, PostgreSQL Driver and of course Spring Data JPA and make sure to choose maven as a project manager.

After installing the project extract it and open it with your favorite IDE.

as mentioned in the first section we will create two entities Chef and Recipe. as follows:

Chef:


@Entity
public class Chef {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String name;

    @OneToMany(mappedBy = "chef")
    private List<Recipe> recipes;

    public Chef() {
    }

    public Chef(Long id, String name) {
        this.id = id;
        this.name = name;
    }

    public Chef(String name) {
        this.name = name;
    }

    // ADD GETTERS AND SETTER...
}

Recipe

@Entity
public class Recipe {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(length = 100)
    private String name;
    private String description;

    @ManyToOne
    @JsonBackReference
    private Chef chef;

    public Recipe() {
    }

    public Recipe(String name, String description) {
        this.name = name;
        this.description = description;
    }

    public Recipe(Long id, String name, String description) {
        this.id = id;
        this.name = name;
        this.description = description;
    }

    // GETTERS AND SETTERS...
}

We need also to create ChefController, ChefService, ChefRepository and RecipeRepository.

ChefService: has three basic methods: createChefWithRecipes which takes as a parameter a chef and list of recipes, getChefs to get the list of chefs, and finally getNumberOfChefs returns the number of chefs in the database.

@Service
public class ChefService {
    private ChefRepository chefRepository;
    private RecipeRepository recipeRepository;

    public ChefService(ChefRepository chefRepository, RecipeRepository recipeRepository) {
        this.chefRepository = chefRepository;
        this.recipeRepository = recipeRepository;
    }

    @Transactional
    public Chef createChefWithRecipes(Chef chef,List<Recipe> recipes){

        recipes.stream().forEach(recipe -> recipe.setChef(chef));

        this.chefRepository.save(chef);
        this.recipeRepository.saveAll(recipes);

        return chef;
    }

    public List<Chef> getChefs(){
        System.out.println(this.chefRepository.findAll());
        return this.chefRepository.findAll();
    }

    public Long getNumberOfChefs(){
        return this.chefRepository.count();
    }
}

ChefController: it has only one method which returns a list of chefs

@RestController
@RequestMapping("/api/chefs")
public class ChefController {

    private final ChefService chefService;

    public ChefController(ChefService chefService) {
        this.chefService = chefService;
    }

    @GetMapping
    public List<Chef> getAllChefs(){
        return chefService.getChefs();
    }

}

And finally, we will add some initial rows to our database (optional), for this we will create a data initializer class and implement the run method from the command runner interface.

@Component
public class DataInitializer implements CommandLineRunner {

    private final ChefService chefService;

    public DataInitializer(ChefService chefService) {
        this.chefService = chefService;
    }

    @Override
    public void run(String... args) throws Exception {

        if(chefService.getNumberOfChefs() > 1) {
            System.out.println("Chefs already initialized!");
            return;
        }

        Chef chef1 = new Chef("Gordon Ramsay");
        Chef chef2 = new Chef("Jamie Oliver");
        Chef chef3 = new Chef("Anthony Bourdain");

        List<Recipe> chef1Recipes = Arrays.asList(
                new Recipe("Beef Wellington", "A classic British..."),
                new Recipe("Scrambled Eggs", "A simple breakfast..."),
                new Recipe("Beef Burger", "A juicy burger made...")
        );

        List<Recipe> chef2Recipes = Arrays.asList(
                new Recipe("Spaghetti Carbonara", "A creamy pasta...")
                new Recipe("Roast Chicken", "A classic roastchicken"),
                new Recipe("Fish and Chips", "A traditional...")
        );

        chefService.createChefWithRecipes(chef1,chef1Recipes);
        chefService.createChefWithRecipes(chef2,chef2Recipes);
        chefService.createChefWithRecipes(chef3,new ArrayList<>());

    }
}

3 - Package the application into a JAR file

Simply run the command mvn package and check that a jar file is generated under the folder target.

mvn package -DskipTests

Note that we have used -DskipTests option to skip tests because our application will attempt to connect to a database that does not exist yet.

The generated JAR file of our Spring Boot application is an executable archive that contains all the necessary components and dependencies required to run the application such as the compiled code, dependencies, embedded server and some additional resources...

We can simply run our application using the command java -jar target/recipe-management-0.0.1-SNAPSHOT.jar, this is exactly the command that we will need to run the application inside a container.

4 - Create the application's image (Dockerfile)

Here is the fun part!! But first, what is a docker file?

A Dockerfile is a text document that contains a set of instructions to build an image, these instructions could be extracting and copying files, or running commands...

Ok, let's create one in the root directory of our application, it should be named Dockerfile with a capital "D" (Actually you can name it whatever you want, but to avoid headaches in the next steps let's respect the convention)

FROM openjdk:17
VOLUME /tmp
EXPOSE 8080
COPY target/recipe-management-0.0.1-SNAPSHOT.jar recipe.jar
ENTRYPOINT ["java","-jar","/recipe.jar"]

FROM openjdk:17 : Every docker image needs a base image that contains the core operating system and other runtime components, and since we have a Spring Boot application we pulled the OpenJDK:17 Java Runtime Environment (JRE).
VOLUME /tmp : (optional) This instruction specifies that the /tmp directory in the docker container will be used as a volume to store temporary files and cache data... to share it between the docker container and the host filesystem or between the containers.
EXPOSE 8080 : This instruction informs Docker that the container will listen to port 8080 at runtime.
COPY target/recipe-management-0.0.1-SNAPSHOT.jar recipe.jar : This instruction copies the JAR file to the working directory of the image which is by default /, the copied JAR file will be renamed to: recipe.jar. (We can change the working directory using WORKDIR instruction).
ENTRYPOINT ["java","-jar","/recipe.jar"]: For the first part ENTRYPOINT is used to configure the command that will be executed when a container is started, and as you may guess the second part specifies the actual command that runs our application.

Ok, we are ready to make some tests!! let's first build an image by running the command:

docker build . -t recipe:v1

The command above tells Docker to build the image from the file Dockerfile in the current directory. we can optionally use -t option to specify a name and a tag for our image.

Now we have built our image successfully with the name and tag recipe:v1.

We can simply check that our image exists by running the command: docker images:

5 - Creating containers

In this section, we will put everything together by creating a container of our app and linking it with a PostgreSQL database container since our app requires a database.

We can achieve this in different ways but the most common and clear is using Docker Compose.

Docker Compose allows us to define and configure all of our application containers, link them together and specify dependencies between them in a single file: docker-compose.yml.

version: "3.8"

services:
  psql-db:
    image: postgres
    container_name: psql-db
    restart: always
    environment:
      - POSTGRES_USER=admin
      - POSTGRES_PASSWORD=1234
      - POSTGRES_DB=recipe
    ports:
      - '5432:5432'

  recipe:
    container_name: recipe_app
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - '8081:8080'
    environment:
      - SPRING_DATASOURCE_URL=jdbc:postgresql://psql-db:5432/recipe
      - SPRING_DATASOURCE_USERNAME=admin
      - SPRING_DATASOURCE_PASSWORD=1234
      - SPRING_JPA_HIBERNATE_DDL_AUTO=update
    depends_on:
      - psql-db

First, we define the yml version.
Create the first container psql-db by using the Postgres official image image: postgres.
We give the container a name (optional) container_name: psql-db.
The restart: always parameter ensures that the container automatically will restart if it crashes.
The environment option could be different from one container to another for our Postgres database we need to have a database user, password, and name...
The ports option maps the container's internal port (on the left side 5432:) to the host port 5432. This allows other services running on the same host to connect to the Postgres database in the psql-db container using the host's IP address and port 5432.
For the the recipe container we have made some small changes, we used build to tell Docker to build a new image from our Dockerfile.
We specified also in the environment section the database URL, USERNAME, and PASSWORD. notice that the database URL contains the name of the Postgres container and its port: jdbc:postgresql://psql-db:5432/recipe.
Finally, depends_on option tells the recipe container that it should not start until the psql-db container is running.

Now we are ready to create our containers using docker-compose.

(If you are on a Linux machine, you will need to install Docker Compose)

If your docker-compose.yml file in the root of your project just run:

docker-compose up 
# you can also use -d tag to start containers in the background.

From the first few lines, it looks clear that docker has successfully built the recipe image based on the instructions from Dockerfile, it also created our psql-db and recipe_app containers and attached psql-db to recipe_app container.

Let's make an http request to make sure that everything is working as expected!

The endpoint is http://localhost:8081/api/chefs and notice that we used the port 8081.

Et Voila! the application is containerized! now we can share it with anyone have docker in his machine.

How to change the last commit message in git?

Gassai Hamza — Thu, 19 Jan 2023 18:54:57 +0000

It happens many times that you just commit a change and you realized that you made a typo or you forgot to add a file before committing. When this happens you probably think of adding a new commit message, at least this is what I was doing, Thankfully Git has a better way to fix this using commit --amend , so let's take a look at it.

Using commit --amend

 # You may want to add some files first
 git add name_of_the_file
 # Now you can modify the commit message
 git commit --amend -m "Your new commit message"

Using commit --amend --no-edit

Sometimes you just want to add a file without changing the commit message, you can then use --no-edit flag:

 git add name_of_the_file # or git add .
 git commit --amend --no-edit

Examples:

Let's create two files: hello.txt and goodbye.txt, add one of them to the staging area and make a commit:

You notice that we committed without adding goodbye.txt file, and this is the last commit:

As mentioned previously we can solve this as follows:

Using git log command we check our commit messages:

One more thing I should mention is that changing the commit messages could not be a good choice if you already pushed your changes to a remote repository especially if you are working with a team!

How to create a directive in Angular that renders components only if user is authorized?

Gassai Hamza — Tue, 17 Jan 2023 15:39:33 +0000

Recently, I was working on an Angular project where certain components were public meaning that everyone should see them and others should be rendered only if the user is authenticated or have a specific role, so I was doing something like this:

<!-- file name: offers.component.html -->
<div>
    <app-nav-bar></app-nav-bar>
    <app-profile-image *ngIf="user.isAuthenticatd"
    ></app-profile-image>
    <div>
        <app-search></app-search>
        <app-offers-list></app-offers-list>
    </div>
    <div>
        <app-review-offer *ngIf="user?.roles.include('AGENT')"
        ></app-review-offer>
    </div>
<div>

This doesn't sounds clean to me, especially the last one: *ngIf="user?.roles.include('AGENT')"

Thankfully Angular gives us the ability to create our custom directives. so let's create one!

First, we need to create a class and annotate it with @Directive annotation (Angular CLI made it easy 😋)

ng generate directive authorized 
# or use the shourhand: ng g d authorized

The above command will generate a class as follows:

// file name: authorized.directive.ts
import { Directive } from '@angular/core';

@Directive({
  selector: '[appAuthorized]'
})
export class AuthorizedDirective {

  constructor() { }

}

Remember we need to pass/bind the role as an input to use it in our directive something like this:

<div>
    <app-review-offer *appAuthorized="'AGENT'"></app-review-offer>
</div>

Like in component classes, we will create a property and annotate it with the @Input() decorator.

// file name: authorized.directive.ts
import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[appAuthorized]'
})
export class AuthorizedDirective {
  @Input appAuthorized

  constructor() { }

}

Now we want to perform our login whenever the appAuthorized input is changed, for this, we will use a setter:

// file name: authorized.directive.ts
import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[appAuthorized]'
})
export class AuthorizedDirective {
  @Input set appAuthorized(role: string){
      console.log(role) // this will print: AGENT
  }

  constructor() { }

}

// file name: offers.component.html
//...
<div>
    <app-review-offer *appAuthorized="'AGENT'"></app-review-offer>
</div>
//...
//...

The above code will simply print AGENT in the console

** Note that appAuthorized is still a property learn more about component-interaction

To proceed we need to inject some objects:

TemplateRef : to access our template
ViewContainerRef : to create a new embedded view.
AuthService: This one could be different from one project to another, for me, I have a service called authService where I had stored the currently logged-in user with all its information such as username, roles...

import {Directive, Input, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
import {AuthService} from "../services/auth/auth.service";
import {Principal} from "../models/principal";

@Directive({
  selector: '[appAuthorized]'
})
export class AuthorizedDirective {

   @Input set appAuthorized(role: string){
      console.log(role) // this will print: AGENT
   }

  constructor(
    private auth: AuthService,
    private templateRef: TemplateRef<any>,
    private viewContainerRef: ViewContainerRef
  ) { }

}

And finally, add the logic that handles the authorization:

import {Directive, Input, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
import {AuthService} from "../services/auth/auth.service";
import {Principal} from "../models/principal";

@Directive({
  selector: '[appAuthorized]'
})
export class AuthorizedDirective {

  @Input() set appAuthorized(role: string){
    this.auth.principal$.subscribe({
      next:(value)=>{
        // Check if user is authenticated
        if(!(<Principal>value).authenticated){
          this.viewContainerRef.clear();
          return;
        }

        // Check if the user have the given role
        if (role !== '*' && !(<Principal>value).roles.includes(`ROLE_${role}`)){
          this.viewContainerRef.clear();
          return;
        }

        this.viewContainerRef.createEmbeddedView(this.templateRef)
      }
    })

  }

  constructor(
    private auth: AuthService,
    private templateRef: TemplateRef<any>,
    private viewContainerRef: ViewContainerRef

  ) { }

}

As you noticed in the above code we used the clear method this.viewContainerRef.clear() to destroy the view if the user is not authenticated or doesn't have the desired role.

We also used this.viewContainerRef.createEmbeddedView(this.templateRef) to instantiate an embedded view and inserts it into our container.

Now we can use our directive anywhere in our application:

<!-- file name: offers.component.html -->
<div>
    <app-nav-bar></app-nav-bar>
    <app-profile-image *appAuthorized="'*'"
    ></app-profile-image>
    <div>
        <app-search></app-search>
        <app-offers-list></app-offers-list>
    </div>
    <div>
        <app-review-offer *appAuthorized="'AGENT'"
        ></app-review-offer>
    </div>
<div>

That was it, I hope you found it helpful. If you have any feedback or suggestions for improvements, I would like to hear from you.