DEV Community: Ștefan Vîlce

Kotlin, JPA and AUTO_INCREMENT field in DB

Ștefan Vîlce — Tue, 26 Aug 2025 12:33:40 +0000

A small tip about writing model class in Kotlin for one table entity. Let's assume that we have a table in our PostgreSQL database which contains a AUTO_INCREMENT primary key. Let the table be this one:

TABLE users;

CREATE TABLE "public"."users" ( 
  "id" INTEGER NOT NULL,
  "email" VARCHAR(255) NULL,
  "name" VARCHAR(255) NULL,
  "city" VARCHAR(255) NULL,
  CONSTRAINT "users_pkey" PRIMARY KEY ("id")
);

The entity model for this table is User.kt with the following code:

import jakarta.persistence.*

@Entity
@Table(name = "users")
data class User(
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Int,
    val name: String,
    val email: String,
    val city: String
)

And then I got UserRepository.kt with the code:

import org.springframework.data.repository.CrudRepository

interface UserRepository : CrudRepository<User, Int>

As you can see, I'm using the Hibernate JPA. The application works excellent, but something is wrong. If I try to insert a new user in the table when I use the POST request in the REST API I created (POST: http://localhost:8080/api/users) I get a problem with the error:


Detail: Key (id)=(1) already exists.] [insert into returning id]; SQL [insert into constraint _pkey]] with root cause

The issue in code comes from the way I defined the id field.
In JPA/Hibernate entities, the field marked with @GeneratedValue must be mutable (i.e. var), and you usually initialize it with null (or make it Int? in Kotlin).

So, I have to change the code in User.kt as following:

import jakarta.persistence.*

@Entity
@Table(name = "users")
data class User(
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    val id: Int? = null,   // it has to be mutable and should be initated as null
    val name: String,
    val email: String,
    val city: String
)

Java error: import javax.xml.bind.JAXB

Ștefan Vîlce — Thu, 04 May 2023 12:56:18 +0000

I work at one project which is developed on Java 8 (i.e. Java 1.8). I cloned the repo on my computer, I have installed the dependencies and I got this error:

The import javax.xml.bind.JAXBException cannot be resolved

Since Java 11 this library is not contained anymore in Java. I'm running Java 14. So, I don't have it. To fix this I had to add this dependency in pom.xml

<!-- https://mvnrepository.com/artifact/javax.xml.bind/jaxb-api -->
<dependency>
    <groupId>javax.xml.bind</groupId>
    <artifactId>jaxb-api</artifactId>
    <version>2.3.1</version>
</dependency>

And that has fixed the project.

ExpressJS, MongoDB and React on Docker containers

Ștefan Vîlce — Thu, 30 Mar 2023 09:12:47 +0000

Installation on Docker and run on Docker containers

We start with the presumption that:

you have already installed the nodejs and npm.
you have already installed Docker.

Create the folder where keep all 3 apps

Let’s create the folder where the 3 applications (backend, frontend, mongodb) will be kept: docker_express_react_mongo

Create the three folders inside:

backend
frontend
mongo

Express App / backend folder. Port 8080

Go to backend folder: cd backend

Now you have to install the Express app: npm init

npm install --save express
npm install --save body-parser

Now create index.js file. The index.js file should contain this:

// Entry Point of the API Server
const express = require('express');

/* Creates an Express application.
   The express() function is a top-level
   function exported by the express module.
*/
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }));

app.get('/', (req, res)=>{
    res.set('Content-Type', 'text/html');
    res.status(200).send("<h1>Welcome!</h1><p>This is the Express Api App.</p>");
});

app.get('/test', (req, res) => {
    console.log("TEST API Express");
    res.set('Content-Type', 'text/json');
    res.status(200).send("[{\"text\": 23}]");
});

// Require the Routes API
// Create a Server and run it on the port 8080
const server = app.listen(8080, function () {
    let host = server.address().address
    let port = server.address().port
    // Starting the Server at the port 8080
})

Starting the backend container

docker build -t express-image-02 .

docker run --name express-container-02 --rm -p 8080:8080 express-image-02

Back to code in backend/ExpressJS app after we setup MongoDB

We have put in place the database, i.e. MongoDB. Now we have to get back to our code and continue with this nodeJS app.

async function connectare(){
return await MongoClient.connect('mongodb://root:pass123@localhost:27017/?authMechanism=DEFAULT&authSource=admin',  { useNewUrlParser: true, useUnifiedTopology: true });
}

But MongoDB runs inside a Docker container, so it is unnaccessible through localhost.

We have to replace localhost with host.docker.internal. So, the connection function will this one:

async function connectare(){
  return await MongoClient.connect('mongodb://root:pass123@host.docker.internal:27017/?authMechanism=DEFAULT&authSource=admin',  { useNewUrlParser: true, useUnifiedTopology: true });
}

Create .dockerignore file. It works as .gitignore . In this file we have to write

node_modules
.git
Dockerfile

Now, let’s see how the code in backend/index.js looks like:

const express = require('express');
const MongoClient = require('mongodb').MongoClient;
const PORT = 8080;
const  ObjectId = require('mongodb').ObjectId;

const bodyParser = require('body-parser');
var cors = require("cors");

const app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(cors({
  origin: 'http://localhost:3000'
}));

async function connectare(){
  return await MongoClient.connect('mongodb://root:pass123@host.docker.internal:27017/?authMechanism=DEFAULT&authSource=admin',  { useNewUrlParser: true, useUnifiedTopology: true });
}

console.log("We are connected!");

app.listen(PORT, () => {
  console.log('Server listening on port ' + PORT);
});

// ROUTES

app.get('/', (req, res)=>{
    let contentIndex = "<h1>Hello!</h1>Dette er REST API serveren, med Express. Test <a href='/usersbyclient'>here</a>!";
    contentIndex = contentIndex + "<p>The connection with MongoDB is up and running.</p>";
    res.set('Content-Type', 'text/html');
    res.send(contentIndex);
});

app.get('/users', async (req, res) => {
  /*
   * Requires the MongoDB Node.js Driver
   * https://mongodb.github.io/node-mongodb-native
   */
  const filter = {};
  const client = await connectare();
  const coll = client.db('Stefan').collection('User');
  const cursor = coll.find(filter);
  const result = await cursor.toArray();
  await client.close();
  res.json(result);
});

app.get('/user/search/:word', async (req, res) => {
  const filter = { 'name': new RegExp(req.params.word) };
  const projection = {
   _id: 0,
   name: 1,
 };
  const client = await connectare();
  const coll = client.db('Stefan').collection('User');
  const cursor = coll.find(filter).project(projection);
  //const cursor = coll.find(filter);
  const result = await cursor.toArray();
  await client.close();
  res.json(result);
});

app.get('/user/:id', async (req, res) => {
  const filter = {_id: new ObjectId(req.params.id)};
  const client = await connectare();
  const coll = client.db('Stefan').collection('User');
  const cursor = coll.find(filter);
  const result = await cursor.toArray();
  await client.close();
  res.json(result);
});

app.get('/user/name/:name', async (req, res) => {
  const filter = { 'name': req.params.name };
  const client = await connectare();
  const coll = client.db('Stefan').collection('User');
  const cursor = coll.find(filter);
  const result = await cursor;
  await client.close();
  res.json(result);
});

app.post('/user/add', async (req, res) => {
  var name = req.body.name;
  var email = req.body.email;
  const client = await connectare();
  const coll = client.db('Stefan').collection('User');
  try {
    await coll.insertOne({
      name: name,
      email: email
    });
    res.sendStatus(204);
  } catch (error){
    throw res.status(500).json({message: "Server error occured!"});
  } finally {
    await client.close();
  }
});

app.patch('/user/update/:id', async (req, res) => {
  const query = { _id: new ObjectId(req.params.id) };
  var name = req.body.name;
  var email = req.body.email;
  const updates = {
    $set: { name: name, email: email }
  };
  const client = await connectare();
  const coll = client.db('Stefan').collection('User');
  try {
    console.log("Se modifica obiectul : " + query);
    console.log("Se aduc modificarile astea: " + JSON.stringify(updates));
    await coll.updateOne(query, updates);
    res.status(204).json({status:"Success", message: "The User was successfully updated."});
  } catch (error){
    throw res.status(500).json({message: "Server error occured!"});
  } finally {
    await client.close();
  }
});

app.delete('/user/delete/:id', async (req, res) => {
  const filter = {_id: new ObjectId(req.params.id)};
  const client = await connectare();
  const coll = client.db('Stefan').collection('User');
  try {
    await coll.deleteOne(filter);
    res.status(200).send({status: "Success", message: "The User has been deleted. User id: " + req.params.id + ". "});
  } catch (error){
    throw res.status(500).json({message: "Server error occured!"});
  } finally {
    await client.close();
  }
});

MongoDB / mongo folder

The database should run on PORT: 27017.

First, go to docker_express_react_mongo folder (parent folder) and create a new folder, mongo.

mkdir mongo and then cd mongo

Inside the mongo folder we create another folder, data, where the data will be syncronized with the data inside container. This way the data will be persistent.

First, check if mongo is installed: docker run mongo

This will fetch mongo from Docker Hub. If you don't have it, then it will run a container based on a mongo image.

Run docker ps and you’ll get something like this:

It means that the mongo container is running. Now we run the MongoDB container taking care that the data persists; otherwise you’ll lose the data every time when you stop the container. You need to add the volume here with this sequence -v data:/data/db

docker run --name mongodbcontainer --rm -v data:/data/db -p 27017:27017 mongo

But, if you are working in Windows you should put the entire path for your local volume, such as:

docker run --name mongodbcontainer --rm -v //c/Users/UserName/Documents/Proiects/docker_express_react_mongo/mongo/data:/data/db -p 27017:27017 mongo

This database has no username and no password. If you want a database with no security issues then you have to add -e MONGO_INITDB_ROOT_USERNAME=root -e MONGO_INITDB_ROOT_PASSWORD=pass123 and you’ll setup the username as root and the password as pass123.

docker run --name mongodbcontainer --rm -v data:/data/db -p 27017:27017 -e MONGO_INITDB_ROOT_USERNAME=root -e MONGO_INITDB_ROOT_PASSWORD=pass123 mongo

or, in cmd Windows you’ll write:

docker run --name mongodbcontainer --rm -v //c/Users/UserName/Documents/Proiects/docker_express_react_mongo/mongo/data:/data/db -p 27017:27017 -e MONGO_INITDB_ROOT_USERNAME=root -e MONGO_INITDB_ROOT_PASSWORD=pass123 mongo

In this MongoDB let’s create the first schema (Stefan) and the first collection (User)

Access the database container

If you want to access the Dabase Container (or every other container in Docker) you have to run the command:

docker exec -it <CONTAINER_NAME> bash

In your/this case, we you have to run

docker exec -it mongodbcontainer bash

FrontEnd - ReactApp. Port 3000

Create a new folder called frontend. Inside this folder create a new file Dockerfile. The same way as for backend. And then a new file called .dockeignore and .gitignore.

Create the ReactApp

You can create the React app

npx create-react-app reactapp
cd reactapp
npm start

And the folder reactapp will be created. The app will run on port 3000.

After you create the app and after you MongoDB is up and the backend is changed you can add this code to your App.js

import "./App.css";
import { useRef, useState, useEffect } from "react";

function App() {
  const inputName = useRef("");
  const inputEmail = useRef("");
  const apiUrl = "http://localhost:8080";
  const [users, setUsers] = useState([]);

  useEffect(() => {
    async function fetchUsers() {
      const res = await fetch(`${apiUrl}/users`);
      const data = await res.json(); console.log("This is the data coming from API: " + JSON.stringify(data, 2,0));
      setUsers(data);
    }
    fetchUsers();
  }, []);

  function onSubmit(e) {
    e.preventDefault();
    addNewUser();
  }

  function addNewUser() {
    const name = inputName.current.value;
    const email = inputEmail.current.value;
    fetch(`${apiUrl}/user/add`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ name: name, email: email }),
    }).then(async (response) => {
      if(response.status == 204){
        const res = await fetch(`${apiUrl}/users`);
        const data = await res.json();
        setUsers(data);
        inputName.current.value = "";
        inputEmail.current.value = "";
      } else {
        console.log("We cannot save the User.");
      }
    });
  }


  return (
    <div className="App">
      <header className="App-header">
        <p>Users App</p>
        <UsersList users={users} />
      </header>
      <form  onSubmit={onSubmit}>
        <input ref={inputName} type="text" placeholder="Name of user" />
        &nbsp; 
        <input ref={inputEmail} type="text" placeholder="Email of this user" />
        &nbsp; <button>Save User</button>
        <p> &nbsp; </p>
      </form>      
    </div>
  );
}

// using object destructuring on the props object
function UsersList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user._id}>{user.name}, email: {user.email}</li>
      ))}
    </ul>
  );
}

export default App;

.dockerignore

It will be built the same way as in the backend folder.

Dockerfile

This file will contain:

FROM node
WORKDIR /app
COPY reactapp/package*.json ./
RUN npm install
COPY ./reactapp .
EXPOSE 3000
CMD ["npm", "start"]

Create the ReactApp inside the reactapp folder.

docker-compose up

Wrapping up all three containers

Go out of frontend folder. And create a new file, docker-compose.yaml. This file should contain this code:

# docker compose version which is currently 3.8
version: "3.8"

# services : is a list of our container
services:
  # name is optional for our mongodb
  mymongodb:
    # since mongo is an offical image we can use it.
    image: "mongo"

    # the port that we want to publish for mongodb
    ports:
      - "27017:27017"

    # our mongodb depends on volume to keep the data alive.
    volumes:
      - ./mongo/data:/data/db

    # our environment variable
    environment:
      MONGO_INITDB_ROOT_USERNAME: "root"
      MONGO_INITDB_ROOT_PASSWORD: "pass123"

  # name is optional for our backend
  backend:
    # to build an image based on Dockerfile
    # it looks in this folder to find Dockerfile to build an image
    build: ./backend
    # the port that we want to publish for backend
    ports:
      - "8080:8080"

    # depends_on means it will start our backend container once mongo-container is  up and running.
    depends_on:
      - mymongodb

  # name is optional for our frontend
  frontend:
    # to build an image based on Dockerfile
    # it looks in this folder to find Dockerfile to build an image
    build: ./frontend

    # the port that we want to publish for frontend
    ports:
      - "3000:3000"
    # add bind mount volume to keep have updated source code
    volumes:
      - ./frontend/reactapp/src:/app/src
    # allow interactive mode
    stdin_open: true
    tty: true

    # it will start our frontend container once backend-container is  up and running.
    depends_on:
      - backend

# declare the volumes name that our app is using.
volumes:
  data:
  src:

Bibliografy

GitHub Repo

The entire project can be found here:

https://github.com/stefanvilce/docker_mongo_react_express

Nuxtjs on Heroku

Ștefan Vîlce — Tue, 30 Aug 2022 09:17:00 +0000

I've been developing a Nuxtjs application on node.js. I have developed the app on my local computer. Because the client has been needed to see it well functioning before to allow some space on their server I had to find a solution to show them how it is working. And to test it before.

For this scope I found that it is good to put it on Heroku. This way the client, which is not in my city, can test the webapplication.

You perhaps know that the Nuxtjs is based on Vue.js framework. And you can see details about what it is and how functions here: https://nuxtjs.org/.

About Heroku you maybe know that it is a cloud/PaaS platform which offers to the companies the possibility to build, deliver, monitor and scale apps — we're the fastest way to go from idea to URL, bypassing all those infrastructure headaches. And you can get a free DYNO to deploy your application. And this is the best thing on Heroku.

Let's get back to my challenge with Heroku and my app. I've created the dyno for my app and I put the code on it. I pushed the code with git on master branch first,

$ git push heroku master

The dyno startet to deploy the app, but I got this error:

And then, I thought that it is happening because of the master/main problems in git. And I run then:

$ git push heroku master:main

But the problem have persisted. And I found this Stackoversflow - Delete package-lock.son can solve your problem. So, I have deleted the package-lock.json file and the error disappeared. But I still had on problem. The deploying of the code generated a fail in the app. I had to dig more.

In package.json I had this:

And then, I added this: "dev": "NUXT_PORT=process.env.PORT nuxt", s.u.

And it was not enough. I heroku concole I run:

$ heroku config:set NPM_CONFIG_PRODUCTION=false

and

$ heroku config:set HOST=0.0.0.0
$ heroku config:set NODE_ENV=production

After this I added this line in package.json:

"heroku-postbuild": "npm run build"

And I run this

$ git push heroku master:main

The deploy went well, so I have now the app up and running.

Latest:

Heroku will not be free anymore. This is a bit sad.
https://dev.to/lukeecart/more-heroku-changes-that-will-definitely-affect-you-10o8

D3js, CSS styles

Ștefan Vîlce — Thu, 28 Apr 2022 11:21:38 +0000

I have to work with a creating of some charts for some statistics.

The data are comming from a JSON REST API. For one of the requests I have to count the occurencies of new articles for every single day. I have met many problems being for the first time when I work with D3js library (https://d3js.org/) which seems to be the best way to build charts in Javascript. And it is a very nice solution for that. But, I've been hit by some issues. For instance, I could't change the color of my texts on the chart. I've been trying to change the style for color but it didn't work.

The problem was solved whe I found out that I souldn't use:
.style("color", "#87A3C3")

The right solution for this problem is:
.attr("fill", "#87A3C3")

So, use attr instead of style!

jQuery and Bootstrap

Ștefan Vîlce — Mon, 05 Jul 2021 09:25:06 +0000

Last weeks I commenced one new project. Actually, not new but to remake an old website. And I wanted to keep some of the functionalities from the old project. They have been simple AJAX functions build on jQuery.

And in the poject I kept the old jquery.js file.
<script src="/js/jquery.js"></script>
And then the fail appeared.

The error

Some of the features I needed from Bootstrap started to throw out some errors and didn't work properly:

The attempts

Then I started searching on internet. Of course, Stackoverflow was the first source. :)
https://stackoverflow.com/questions/28795036/jquery-javascript-not-working-in-bootstrap
Some of the answers were like this:

or like this:

use the .text() function instead of the .html()

Other answers here: https://stackoverflow.com/questions/51128079/jquery-doesnt-work-with-bootstrap/51129632

The idea is that some of these answers could fix some problems. But not mine.

The solution

First of all, it was a mistake keeping this jQuery.js file on my server. This version of jQuery was too old, I think. Actually, I'm sure about that. The second, this solution of keeping the jQuery file on my server it is not one of the best practices.
I just wanted to update my version of jQuery first and to see what to do next. So instead of
<script src="/js/jquery.js"></script>
I put
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
And when I checked the all bootstrap functionalities I needed worked.

Oracle database and Docker

Ștefan Vîlce — Fri, 04 Jun 2021 14:55:28 +0000

Oracle DBA 12 Container and Docker

For my job I had to install an Oracle database on my Windows. And I thought that perhaps it is much better to get this database in a container. Because I need many databases to handle with.

And this solution with containers gives me the independence I need for every each of them. And I can play with different versions of Oracle whithout having problems.

I have decided to write this post because it was kind of difficult to find something really helpfull on internet.

I had Docker already installed on my PC Windows. And then I run this:

docker run -d -p 8080:8080 -p 1521:1521 --name OracleDB store/oracle/database-enterprise:12.2.0.1-slim

In my Docker Dashboard i got this:

As you can see there is the newest container in my Docker, OracleDB. I got the Oracle 12 slim for this project.
With this command
docker ps
i get this

So, i could see that the container ID is: 5d365b3daa70. Then i run:
docker exec -it 5d365b3daa70 /bin/bash
and then
sqlplus / as sysdba

Here I can run this:

alter session set "_ORACLE_SCRIPT"=true; create user newDB identified by newDB; GRANT CONNECT, RESOURCE, DBA TO newDB;

And then I run this:

select value from v$parameter where name='service_names';

I open the sql developer and connect to this schema:

Now I can start create tables in this schema, newDB.

What's next

I'll try to get the same thing but with Oracle 19.