JavaScript – Pauls Blog

React & Spring Boot

Paul Sterl — Wed, 11 Dec 2024 18:36:41 +0000

Problem

We want to combine Spring Boot with a simple React frontend. Use the React development features but also be able to use the Spring IDE. In the end, everything should be built using Maven and nicely packed into a JAR, just like any other Microservice. Let’s get started.

Multi-Module project

First we create a spring project here backend folder and a react project in the frontend folder. The root pom should help us to build both projects in one run:

Root pom.xml


    4.0.0

    org.foo.bar
    project-root
    0.1.0-SNAPSHOT
    pom

    
        21
        ${java.version}
        ${java.version}
        UTF-8
        UTF-8
    

    
        frontend
        backend
    

  	
    
        
            
                org.springframework.boot
                spring-boot-dependencies
                3.3.6
                pom
                import

Backend pom.xml

This is straight forward the generated pom from spring with just the dependency to the frontend project.



    4.0.0
    
        org.foo.bar
        project-root
        0.1.0-SNAPSHOT
        ../pom.xml
    

    project-backend

    
      	
        
            org.foo.bar
            project-frontend
            ${project.version}
        
      	
      
        
            org.springframework.boot
            spring-boot-starter-web
          
        
            org.projectlombok
            lombok
            true
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
    
    
        
            
                org.springframework.boot
                spring-boot-maven-plugin

Frontend pom.xml

Now we have todo more stuff:

Ensure the dist result is added to the JAR
Generate during the generate-resources phase also the content for the dist folder
Ensure that during a mvn clean all gets deleted



    4.0.0
    
        org.foo.bar
        project-root
        0.1.0-SNAPSHOT
        ../pom.xml
    

    project-frontend
    
    
        
            org.springframework.boot
            spring-boot-starter-web
            provided
        
    
    
    
        
        
            
                dist
            
        

        
          	
            
                org.codehaus.mojo
                exec-maven-plugin
                3.5.0
                
                    
                        npm install
                        
                            exec
                        
                        generate-resources
                        
                            npm
                            
                                install
                                --prefer-offline
                                --no-audit
                                --progress=false
                            
                        
                    

                    
                        npm build
                        
                            exec
                        
                        generate-resources
                        
                            npm
                            
                                run
                                build
                            
                        
                    
                
            
            
            
                org.apache.maven.plugins
                maven-clean-plugin
                3.4.0
                
                    
                        
                            node_modules
                        
                        
                            dist

Ensure the result in the dist folder is compatible to Spring

Spring will pick up automatically any static resources which are placed in the static folder. Here is an example for vite to do so in the vite.config.js:

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: './dist/static',
    emptyOutDir: true, // also necessary
  }
})

Going beyond

Sometime it is useful to host the UI in a sub path lets say my-ui, so the url would be http://localhost:8080/my-ui

For that we have to adjust the vite.config.js:

export default defineConfig({
  plugins: [react()],
  base: 'my-ui',
  build: {
    outDir: './dist/static/my-ui',
    emptyOutDir: true,
  }
})

Now it would also be helpful if we don’t have to directly type the index.html but tell Spring always to re-route.

For that we have to add a Spring Configuration Class:

package org.foo.bar;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MyFrontedConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/my-ui").setViewName("/my-ui/index.html");
        registry.addRedirectViewController("/my-ui/", "/my-ui");
    }
}

Add cache control to static react assets

In the end int would also be nice that the generated static resources are cached by the client e.g. for a year. We will extend the MyFrontedConfig class with:

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/my-ui/assets/**") 
                .addResourceLocations("classpath:/static/my-ui/assets/") 
                .setCacheControl(CacheControl.maxAge(365, TimeUnit.DAYS));
    }

A better way for TypeScript Enum

Paul Sterl — Fri, 18 Aug 2023 11:10:28 +0000

A better way to define enums in Typescript

const ORDER_STATUS = {
  OPEN: 'Offen',
  ORDERED: 'Bestellt',
  CANCELED: 'Storniert'
} as const;

type OrderStatus = keyof typeof ORDER_STATUS;

function methodWithEnum(status: OrderStatus) {
    console.info(`${ORDER_STATUS[status]}: ${status}`);
}

methodWithEnum("OPEN");

In this way it is much easier to provide an enum including a potential mapping to a different value e.g. a display value.

This solution is usually considered being better, as long as enums aren’t supported by JavaScript natively.

NPM and NodeJS Cheatsheet

Paul Sterl — Fri, 19 Jun 2020 16:34:46 +0000

Update NPM modules

# admin permissions required
npm update -g

Update NPM

# admin permissions required
Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
npm install -g npm-windows-upgrade
npm-windows-upgrade
# see also https://github.com/felixrieseberg/npm-windows-upgrade

JavaScript Module Pattern or Just Private Variables

Paul Sterl — Sat, 11 Jul 2015 14:14:01 +0000

JavaScript is a wonderful language to get thinks fundamentally wrong from the start. As so where are many patters around to help us to avoid some of these challenges ;-).

The module pattern is one of the most known and used. It helps us to create private variables or better to avoid side effects in a larger JS application between the different JS files we load or frameworks we use.

The problem

Overall the problem is that in JavaScript everything is more or less public. Currently, most frameworks register their name in the Global space, also known as the window Object. You know them as angular or just $ or maybe even as Y.

Imagine the following code (jsBin):

// first JS file
var CLASS_NAME = "A1";
function A1() {}
A1.prototype.sayHallo = function() {
  $('#out').html(CLASS_NAME + ": says hallo!");
};

// second class in a different JS file
var CLASS_NAME = "B1";
function B1() {}
B1.prototype.sayHallo = function() {
  $('#out').html(CLASS_NAME + ": says hallo!");
};

// some code
$('#cmdA1').click(function() {
  new A1().sayHallo();
});
$('#cmdB1').click(function() {
  new B1().sayHallo();
});

It doesn’t matter which button you press the result will always be B1 because we have overwritten the value in CLASS_NAME in the second part.

Even if this sample is somehow of course constructed, this problem can easily happen in a larger JS application. We must take this into account an protect ourself.

The solution

The solution is pretty straight forward. We just wrap our class definition into an anonymous function. This does not only protect us but it allows us to create really private variables in JS which can’t be overwritten from outside — we can protect the access to them with functions.

jsBin again

// first JS file
MyGlobal = {};
(function($) {
  var CLASS_NAME = "A1";
  function A1() {}
  A1.prototype.sayHallo = function() {
    $('#out').html(CLASS_NAME + ": says hallo!");
  };
  MyGlobal.A1 = A1;
})(window.$); // pass any global scope

// second class in a different JS file
(function($) {
  var CLASS_NAME = "B1";
  function B1() {}
  B1.prototype.sayHallo = function() {
    $('#out').html(CLASS_NAME + ": says hallo!");
  };
  MyGlobal.B1 = B1;
})(window.$);

// some code
$('#cmdA1').click(function() {
  new MyGlobal.A1().sayHallo();
});
$('#cmdB1').click(function() {
  new MyGlobal.B1().sayHallo();
});

What have we learned?

In JavaScript, the best practice is to wrap our code into anonymous functions
Define one global scope variable which we use to register all our classes (here MyGlobal)
Anonymous function also allow us to create private/ protected variables