How to build a blog engine with React & Spring Boot

Continuing the process of building a blog engine, in this post you will build a CI/CD pipeline for spring boot & react application that powers your blog engine. This way, every time you make changes to your blog engine source code and push your changes to Github, it will trigger the build pipeline i.e. Github Actions. The GIthub Action you configure here will build the spring boot backend with Maven and the reactjs front-end with node. You can see the full source code for this repository later in this post, including a link to the worklfow.yaml file where you will define the build pipeline.

Contents

CI/CD pipeline for spring boot & react Pipeline code Summary

CI/CD pipeline for spring boot & react

One of the problems that a CI/CD pipeline solves or the process that it streamlines is that of delivering updates to your software. If you have configured a CI/CD pipeline for your repository, it could mean that every time you push a commit, the repository will execute the steps that you have specified in your pipeline.

For the Spring Boot blog engine, what you will do here is go configure the CI/CD pipeline such that it will first build the backend followed by the front-end. In this tutorial, you will not be configuring the steps to deploy your app, but just to trigger the build.

Pipeline code

name: Blog engine with Spring Boot and React

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

jobs:
  build:

    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: ['18.x']

    steps:
    - uses: actions/checkout@v4
    - name: Set up JDK 17
      uses: actions/setup-java@v4
      with:
        java-version: '17'
        distribution: 'temurin'
        cache: maven
    - name: Build with Maven
      run: mvn -B package --file blog-backend/pom.xml
      
    - name: Build react UI
      uses: actions/setup-node@v4
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm install
      working-directory: blog-frontend
    - run: CI=false npm run build 
      working-directory: blog-frontend

From Line	What does it do?
3 to 7	you are specifying, that you want to trigger this pipeline either every time you push code to main or create a pull request
9-17	you are specifying the machine this build process will run as well as some variables for the node version which you will use later
18-24	You are configuring Java and Maven versions to use as well as configuring your workflow to checkout your code
25-26	As the name implies, you are building your Java Spring Boot backend in the blog-backend directory
28-35	You are building your reactjs frontend by first, setting up nodejs version for your workflow using the node-version you defined on line 15. Then you are doing an npm install followed by running a build.

In the last few lines, notice the lines, ‘working-directory‘ which is the equivalent of doing ‘cd blog-frontend’ before installing or building. Also, see how you are setting CI=false before building the node project, maybe you can try building without specifying that and see the reason why your pipeline may fail.

Summary

You can find the full source code for this post on Github. Until then if you have any questions that drop me a line and we can work towards resolving your query.

If you find any of my posts useful and want to support me, you can buy me a coffee 🙂

https://www.buymeacoffee.com/bhumansoni

While you are here, maybe try one of my apps for the iPhone.

Products – My Day To-Do (mydaytodo.com)

Listed below are the links to the first two parts of this series

How to build a blog engine with React & Spring Boot – Part 1 – My Day To-Do (mydaytodo.com)

How to build a blog engine with React & Spring Boot – Part 2 – My Day To-Do (mydaytodo.com)

Here are some of my other bloposts,

How to unit test react-redux app – My Day To-Do (mydaytodo.com)