DEV Community: Pavan K Jadda

How to save Hibernate Entity changes to Database

Pavan K Jadda — Tue, 26 Dec 2023 06:38:03 +0000

This post has been moved to https://pavankjadda.dev/how-to-save-hibernate-entity-changes-to-database/

Schedule tasks in Spring Boot with @Scheduled annotation

Pavan K Jadda — Mon, 06 Nov 2023 04:21:36 +0000

The post has been moved to https://pavankjadda.dev/scheduled-annotation-in-spring-boot/

Dynamically Update Angular BASE URL Using Docker Env Variables

Pavan K Jadda — Mon, 12 Sep 2022 19:22:46 +0000

In Angular the BASE/API URLs are be stored environment files which are present under src/environments directory. Usually we can create new file for each environment.

environment.ts
environment.dev.ts
environment.test.ts
environment.stage.ts
environment.prod.ts

environment.ts

import packageInfo from '../../package.json';

export const environment = {
    production: false,
    BASE_URL: '//localhost:4200',
    VERSION: packageInfo.version,
};

During the build, a configuration flag is provided to swap the default environment.ts file with environment.<CONFIGURATION>.ts based on the flag

npm run build -- --configuration=stage

The problem with this approach is you can't reuse same build for multiple environments and promote DEV to TEST then to STAGE eventually to PROD since BASE_URL is hard coded during build. To prevent this we need to replace the BASE_URL in main.*.js file generated by Angular during the Docker container start up.

First lets look at standard Dockerfile that follows multi stage Dockerfile. To better understand this, refer my other post.

Dockerfile

// See my other post for Build stage, so skipping it here

############  User Nginx alpine image  ############
FROM nginx:stable-alpine

# Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

# Copy nginx config file
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf

# Copy dist folder fro build stage to nginx public folder
COPY --from=builder /app/dist /usr/share/nginx/html

# Start NgInx services
CMD ["nginx", "-g", "daemon off;"]

In this we can add single that will update the BASE_URL during Docker container/service. Let's say out BASE_URL/API_URL is employee-dev.example.com, then it can be replaced with UNIX sed command as shown below

CMD sed -i "s/employee-dev.example.com/employee-$CONFIGURATION.example.com/g" /usr/share/nginx/html/main.*.js && nginx -g 'daemon off;'

So the updated Dockerfile looks as below
Dockerfile (Updated)

// See my other post for Build stage, so skipping it here

############  User Nginx alpine image  ############
FROM nginx:stable-alpine

# Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

# Copy nginx config file
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf

# Copy dist folder fro build stage to nginx public folder
COPY --from=builder /app/dist /usr/share/nginx/html

# Start NgInx services
CMD sed -i "s/employee-dev.example.com/employee-$CONFIGURATION.example.com/g" /usr/share/nginx/html/main.*.js && nginx -g 'daemon off;'

and you can start the container with Docker run command

docker run -p 4000:80 -e CONFIGURATION=test <IMAGE_ID>

You can also use Docker ENTRYPOINT to achieve the same result. To do this using ENTRYPOINT, create new start.sh script file and copy the command.

start.sh

#!/bin/sh
sed -i "s/employee-dev.example.com/employee-$CONFIGURATION.example.com/g" /usr/share/nginx/html/main.*.js
nginx -g 'daemon off;'

and make sure to copy this file, make it executable and refer in ENTRYPOINT

Dockerfile (Updated with ENTRYPOINT)

######  User Nginx alpine image  ######
FROM nginx:stable-alpine
ENV CONFIGURATION='dev'
# Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

# Copy nginx config file
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf

# Copy dist folder fro build stage to nginx public folder
COPY /dist /usr/share/nginx/html
COPY start.sh /usr/share/nginx/html
RUN chmod +x /usr/share/nginx/html/start.sh

# Start NgInx service
ENTRYPOINT ["./usr/share/nginx/html/start.sh", "$CONFIGURATION"]

and start the container with Docker run command

docker run -p 4000:80 -e CONFIGURATION=test <IMAGE_ID>

If you are not using Docker you can also same approach, since sed is simple UNIX command

How to fix ".gitignore not working" issue?

Pavan K Jadda — Mon, 12 Sep 2022 04:41:36 +0000

The post has been moved to https://pavankjadda.dev/how-to-fix-gitignore-not-working-issue

ngIf(Angular) and v-if (Vue) alternative in React

Pavan K Jadda — Fri, 09 Sep 2022 23:37:45 +0000

The post has been moved to https://pavankjadda.dev/ngifangular-and-v-if-vue-alternative-in-react

Angular URL State management with Query Params or Route Params

Pavan K Jadda — Fri, 29 Jul 2022 05:37:00 +0000

This blog post explains the process to maintain state using browser URL. In Angular there are couple of different ways to manage the state

Angular Services
State Management Library like NgRx, Akita, Elf etc.

But in some cases, you may want to share URL and let others see the exact list of items (same order and filters applied). For example, when search for a flight in Travel website and find a good deal on certain dates, when you share the URL with your friend, for them it would load web page with default selection. But with URL state management, all changes are updated in URL and anyone using the URL would see the same selection.

Query Params vs Route Params

This can be archived in one of the 2 ways

Query Parameters
Route Parameters

Query Parameters are a defined set of parameters attached to the end of a url and follow the standard syntax, starts with "?" then each extra parameter followed by "&"

https://DOMAIN_NAME/employee/all?pageIndex=5&pageSize=10&sortDirection=asc&sortBy=salary

Route Parameters are similar Query Parameters except they only have single parameter separator like ";" and this can be changed

https://DOMAIN_NAME/employee/all;pageIndex=5;pageSize=10;sortDirection=asc;sortBy=salary

You can use either one in your project. I typically gravitate towards Query Parameters since they are most common

Overview

In this blog post we preserve angular materiel table sorting column, sorting order, page size, page index, search text etc.. selections in URL. When user goes to another page by clicking on URL and then later come back to the old page by clicking on browser back button, user will see same results. But this can also be applied to inputs, tables, tab selection etc.

As defined in this example, we have all-employees component that displays list of employees in Mat table. It supports following operations

Sorting
Filtering
Pagination

Update the URL:

The all employees component defines table data source, adds data, assigns paginator and sorter. See the complete component source code here. To store the user selections in the URL the methodupdateRouteParameters() listens for all events on table

When user changes sorting order of a column, enters a filter text or changes page size or page index, this method updates the URL. And it will look like below

https://DOMAIN_NAME/employee/all?pageIndex=5&pageSize=10&searchText=&sortDirection=asc&sortBy=salary

if you want to use Route Parameters, you can make a small change in above code at line 15.

const urlTree = this.router.createUrlTree(['/employee/all',params]);

then URL becomes

https://DOMAIN_NAME/employee/all;pageIndex=5;pageSize=10;searchText=;sortDirection=asc;sortBy=salary

Load Webpage with Selected Options:

After changing sorting, filtering, pagination options and reload the web page or opening this URL in different browser tab, should load the table with exact selections.

The mapTableData() method assigns data to table data source and formats table if any of the table options present in the URL.

For example, when user access the link

https://DOMAIN_NAME/employee/all?pageIndex=5&pageSize=10&searchText=&sortDirection=asc&sortBy=salary

the table should show 5th page with page size 10 sort by Salary column in Ascending order. To achieve this, we need to check for these parameters and modify the table data source.

Code uploaded to Stackblitz for reference. Happy Coding :)

Multi Stage Docker builds with Angular and Nginx

Pavan K Jadda — Fri, 20 May 2022 18:44:03 +0000

This blog post shows multi stage Dockerfile that builds and deploys Angular app in Nginx container

The above Dockerfile has 2 stages

Stage 1 - Install NPM dependencies and builds Angular project
Stage 2 - Builds docker image from dist directory generated by previous stage

Stage 1: Install dependencies and Build Angular project

We use Node 16 alpine image to build the project and it accepts CONFIGURATION build argument. You can override this during build based on your environment

docker build --build-arg CONFIGURATION=dev .

and you can also define as many arguments as you like

Then make /app as working directory. All of the source code and files will be copies to /app directory inside Node container

WORKDIR /app

Copy the package.json file to /app directory. This will enable Docker to cache the node_modules rather than building from scratch and sub sequent builds use these when package.json file is unchanged.

COPY package.json .

Install dependencies using npm install command and specify flag —-legacy-peer-deps to prevent build errors in NPM 7+

RUN npm install --legacy-peer-deps

Then copy the source code and build the project using npm run build

COPY . .
RUN npm run build --  --output-path=dist --configuration=$CONFIGURATION --output-hashing=all

The built code will be present in /app/dist directory in Node container

Stage 2: Build Docker image

We use NgInx alpine stable image to serve Angular application in production
Remove existing HTML content using the command

RUN rm -rf /usr/share/nginx/html/*

Copy the Nginx config file from source to /etc/nginx/nginx.conf directory. If you don’t have one, you can use the below one
Then Copy dist folder from build stage to nginx public folder

COPY — from=builder /app/dist /usr/share/nginx/html

At the end specify the NgInx start command. That’s it.

You can also split Stage 1 into two separate stages. One to install dependencies and the second one to build the Angular app :)

Unit and Integration test Spring Boot applications with Spring Testing and JUnit

Pavan K Jadda — Thu, 23 Dec 2021 15:26:18 +0000

The post has been moved to https://pavankjadda.dev/unit-and-integration-test-spring-boot-applications-with-spring-testing-and-junit/

Angular SSR with Angular Universal and Deploy with Docker

Pavan K Jadda — Mon, 11 Oct 2021 14:53:35 +0000

This blog post explains the process to enable Angular Server Side Rendering(SSR) with Angular Universal and the process to deploy it in Docker container

The source code of the application demonstrated in this post present in Github https://github.com/pavankjadda/angular-ssr-docker

Setup Angular Application

If you already have an existing Angular application, you can skip this step

Create new application

   ng new angular-ssr-docker

Add Angular material and

ng add @angular/material

Import indigo-pink theme to application. Add following line to styles.scss

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Create two components, Login and Home.
- When user logs in, it redirects him to home page

Add Angular Universal

Based on instructions from Angular docs,

Add Angular Universal to the project

ng add @nguniversal/express-engine

and it will create the following folder structure

src/
  index.html                 app web page
  main.ts                    bootstrapper for client app
  main.server.ts             * bootstrapper for server app
  style.css                  styles for the app
  app/ ...                   application code
    app.server.module.ts     * server-side application module
server.ts                    * express web server
tsconfig.json                TypeScript base configuration
tsconfig.app.json            TypeScript browser application configuration
tsconfig.server.json         TypeScript server application configuration
tsconfig.spec.json           TypeScript tests configuration

By default when you add Angular Universal to project Angular CLI creates projects/angular-ssr-docker/architect/serve-ssr section in angular.json with 2 configurations development and production
The development configuration will be used when run npm run dev:ssr and production configuration will be user when you build application in production mode
See below snapshot of typical configuration. For some reason, if you can not start an application make change development section as below

"configurations": {
  "development": {
    "browserTarget": "pdts:build",
    "serverTarget": "pdts:server",
    "proxyConfig": "src/proxy.conf.json"
  },

If you are like me, you can define additional configurations like dev, test as shown above
Now, open terminal in the project and start JSON server (mocks backend)

json-server - watch db.json

Open another terminal in same project and run the application

npm run dev:ssr

Go to http://localhost:4200 to see the application in action

Build Docker image

Before building docker image, you need to build the application

Build the application with following command. Make sure to replace --configuration=dev with appropriate profile name like test or production when you build the application for different environment

sudo ng build --configuration=dev && sudo ng run pdts:server

Add following Dockerfile to build the docker image

## Use Node Slim image
FROM node:14-slim

## Copy source code
COPY . .

## Start the application
CMD ["node", "dist/angular-ssr-docker/server/main.js"]

Build Docker image with following command

docker build -t angular_ssr_docker .

Run the image on port 4000(default). You can change to different by changing port flag -p 5001:4000

docker run -p 4000:4000 angular_ssr_docker

Go to http://localhost:4000 to see the application in action

The source code of the application can be found in Github. Happy Coding :)

Safely Evolving Database with Liquibase, Spring Data, and Spring Boot

Pavan K Jadda — Mon, 16 Aug 2021 20:15:50 +0000

The post has been moved to https://pavankjadda.dev/safely-evolving-database-with-liquibase-spring-data-and-spring-boot

Synchronous HTTP calls in Angular using Async and Await

Pavan K Jadda — Mon, 16 Aug 2021 20:14:07 +0000

Observables in Angular offer significant benefits over other techniques for event handling, asynchronous programming, and handling multiple values. But some times we may want to wait for the response from previous HTTP call or load default settings for an application. In that case, we use Async and Await functions to achieve this. This blog post explains the steps and provides code samples. As usual complete code uploaded to Github

Async & Await

An asynchronous function is a function that operates asynchronously via the event loop, using an implicit Promise to return its result. But the syntax and structure of your code using async functions are much more like using standard synchronous functions. The await operator is used to wait for a Promise. It can only be used inside an async function.

async method()   
{  
  var x = await resolveAfter2Seconds(10);  
  console.log(x); // 10  
}

Technologies

Angular 9+
json-server (to mock Rest API)

Synchronous HTTP call in Angular 9+

If you have Java, C# etc. backend available, skip the steps 1,2, 3 and go to step 4 directly

[**json-server**](https://github.com/typicode/json-server) helps to mock the backend REST API and stores entered data. In this application, we demonstrate a simple use case with two operations, create new employee and fetch a list of employees.

First, create db.json file, that holds employee information

{  
 "employees":   
\[  
  {  
   "id": 1,  
   "firstName": "John",  
   "lastName": "Reese"  
  },  
  {  
   "id": 2,  
   "firstName": "Steve",  
   "lastName": "Rogers"  
  }  
 \]  
}

2. Add json-server dependency and json-server —- watch db.json the script in package.json as shown below

"dependencies":   
{     
  ....,      
  "json-server": "^0.14.2",  
  ....,},  
"scripts":   
{  
  ....,  
  "json-server": "json-server --watch db.json"  
  ....,  
}

3. start json-server by executing following command on the project root folder

$ json-server —-watch db.json

4. Now that, backend mock REST API server is available, let’s build the front end. In order for async to work, both the component method and service method should annotate with async and await.

app.component.ts

employee.service.ts

5. createEmployee() method on component class annotated with **async** and employeeService.createEmployee() annotated with **await**. This instructs the compiler to wait for the execution of this.employeeService.createEmployee() method, then execute this.getEmployees()

6. When you click on CreateNew button on the HTML page, it creates a new employee with Random Id, then this.getEmployees() gets a list of employees

The code uploaded Github for reference. Download the repository and execute it.

Synchronous and Asynchronous Data access using ThreadPoolExecutor and Spring Boot, Spring Data

Pavan K Jadda — Mon, 16 Aug 2021 20:12:54 +0000

The post has been moved to https://pavankjadda.dev/synchronous-and-asynchronous-data-access-using-threadpoolexecutor-and-spring-boot-spring-data/