free Real-Time Deployment to GitHub Pages with CI/CD for React +vite+tailwind app

Jean — Wed, 20 Aug 2025 17:26:50 +0000

Have you ever wanted to see your app updates live the moment you push to a branch? In this post, I’ll walk you through how I set up a CI/CD pipeline using GitHub Actions to deploy my Node.js application to GitHub Pages automatically and in real time whenever I push to the dev branch.
This is a good practice to simulate and see how the application looks like and test functionalities online before pushing it in production(main).
--Why CI/CD for GitHub Pages?
Continuous Integration and Continuous Deployment (CI/CD) helps automate the process of building, testing, and deploying your code. By integrating this into your GitHub workflow, you:
Catch bugs early with automated tests
Ensure consistent builds
Instantly reflect changes on your hosted site

🛠️ The Setup:
Here’s the GitHub Actions workflow I created, named CI/CD. It does two main things:
Build and test the app on every push or pull request.
Deploy the app to GitHub Pages—but only if the push is to the dev branch.

name: CI/CD

                    on:
                    push:
                    branches: ["*"]
                    pull_request:
                    branches: ["*"]

                    permissions:
                    contents: write
                    pages: write
                    id-token: write

                    jobs:
                    build-and-test:
                    runs-on: ubuntu-latest
                    steps:
                     - name: Checkout code
                    uses: actions/checkout@v4
                    - name: Set up Node.js
                    uses: actions/setup-node@v4
                    with:
                   node-version: "20"
                   - name: Install dependencies
                   run: npm install
                   - name: Build
                  run: npm run build
                  - name: Test
                 run: npm test

                 deploy:
                 if: github.ref == 'refs/heads/dev'
                 runs-on: ubuntu-latest
                 needs: build-and-test
                 steps:
                - name: Checkout code
                uses: actions/checkout@v4
              - name: Set up Node.js
               uses: actions/setup-node@v4
               with:
               node-version: "20"
           - name: Install dependencies
            run: npm install
           - name: Build
           run: npm run build
          - name: Deploy to GitHub Pages
           uses: peaceiris/actions-gh-pages@v4
           with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

🔍 How It Works
Triggering: The workflow runs on any push or pull request to any branch.

Build & Test: It installs dependencies, builds the app, and runs tests.

Conditional Deploy: The deploy job only runs if the push is to the dev branch.

Deployment: It uses peaceiris/actions-gh-pages to publish the contents of the ./dist folder to GitHub Pages

🌐 Hosting on GitHub Pages
Make sure your repository is configured to serve GitHub Pages from the gh-pages branch (which the action creates and updates). You can set this in your repo settings under Pages > Source.

This setup has been a game-changer for my development workflow. I can push to dev, and within seconds, my changes are live. It’s perfect for previewing features before merging to main.

If you’re building a frontend app and want instant feedback, give this workflow a try. And if you have questions or want to improve it further (like adding caching or linting), let’s chat in the comments!

How to Implement Entity Relationships in Spring Boot

Jean — Fri, 08 Aug 2025 11:51:58 +0000

In real-world applications, data rarely lives alone in its own .

Users place orders, books have authors, students enroll in courses — and in my case, customers fill carts and place purchases.

These connections between pieces of data are modeled using entity relationships in Spring Boot with JPA (Java Persistence API).

Getting these relationships right is key to building robust, scalable applications.

In JPA:

Entities are Java classes that map to database tables.

Each class field represents a column in that table.

We mark a class as an entity using @Entity.

If a field’s name matches the database column name, we’re good to go. If not, we can explicitly set it using @column(name = "custom_column_name").

In this post, We will go through the three main types of entity relationships I commonly used, using examples from my e-commerce REST API project.

🔗 Types of Relationships in Spring Boot

Spring Boot uses JPA annotations to define relationships between entities. Here are the most common types:

1️⃣ One-to-One (@OneToOne)

Each entity has exactly one related entity.

Example: “A cart is assigned to one purchase, and each purchase is associated with one cart.”

To create this relationship, we use the JPA annotation @OneToOne on the corresponding entity property.

     @Entity 
     public class CartEntity { 
     @OneToOne 
     private PurchaseEntity purchase; 
     }

Nice — the connection is made. Easy, don’t you think? 😊

2️⃣ One-to-Many / Many-to-One (@OneToMany, @ManyToOne)

As the name suggests:

One entity is related to many others, and each of those relates back to one.

Example: One user can have many carts (e.g., past carts, saved carts), but each cart belongs to only one user.

To make this connection, we can either:

Use annotations directly on the entity properties, or

Create a separate entity and table if we want to store additional properties related to the relationship (like total product cost or number of products in the cart).

Here’s an example of the second approach:

@Entity 
public class CartUser { 
@Id
private Long idCartUser; 
@ManyToOne 
@JoinColumn(name = "cart_id") 
private CartEntity cart; 
@ManyToOne 
@JoinColumn(name = "user_id") 
private UserEntity user; 
private Long numberOfProductsInCart; 
private Double totalCost; 
}

The corresponding database table will have the same properties. If you don’t need extra fields like totalcost or numberofproductincart, you can simply use @OneToMany or @ManyToOne with @JoinColumn directly on the entity — both approaches work correctly.

3️⃣ Many-to-Many (@ManyToMany)

Entities relate to many others in both directions.

Example: One order can contain multiple products, and one product can appear in multiple orders.

We use the @ManyToMany annotation to define this relationship. For convenience, you can either:

Create a new table and entity to store both foreign keys (especially if you need extra fields like quantity or price), or

Use the annotation directly on the appropriate property.

I hope you found this guide useful! If you have additional insights or pro tips, feel free to share them in the comments — I’d love to hear your thoughts. 😊

DEV Community: Jean

free Real-Time Deployment to GitHub Pages with CI/CD for React +vite+tailwind app

How to Implement Entity Relationships in Spring Boot