Kev’s Blog – Page 139 – Kev's Development Toolbox

February 23, 2017

Manually adding create-react-app scripts to an existing React app

create-react-app saves you a ton of time to get a new React app set up with all the dependencies you need for an ES6 based React app using Babel and webpack. Adding the scripts and config to an existing app though doesn’t seem to be documented in the user guide. This post here though walks through the basics.

All you need is to:

npm install react-scripts --save-dev

Then and the default scripts to your package.json:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
}

Then assuming you have structured your project folders the same as an app created with create-react-app, you’ll be able to ‘npm run start’ and off you go.

February 22, 2017

Converting my AngularJS AddressBook app to React

Several months back I spent some time looking at Docker and Docker Compose, and put together a sample AngularJS web app served by Nginx in one container, against a Spring Boot JAX-RS RESTful backend in another container, and using MongoDB in another container.

I wrote a couple of articles (part 1, and part 2) describing the Docker containers and how they were configured together using Docker Compose, but I didn’t spend much time talking about the web app itself. I was intending at the time that I’d develop the frontend app using a number of frameworks as a comparison. The AngularJS AddressBook app is functional (on GitHub here), I got part way converting it to an Angular 2 based app (on GitHub here, although clearly I was unsure at the time thinking Angular 2 was called AngularJS2), but the React app I made a rough start at but didn’t get very far.

Given most recently I’ve been spending some time getting up to speed with some React, I’m going to pick up this app again and complete it, so I’ll have an interesting side by side comparison of the same app developed with all three frameworks. More updates to come.

February 16, 2017

Building a Spring Boot RestController to search Redis

I’ve just started taking a look at using Redis. I wondered what it would look like to build a simple REST interface with Spring Boot. Spring Data Redis makes this pretty simple.

First up, you need to configure a @Bean in your @SpringBootApplication class (full source is on github here):

@Bean
RedisTemplate<String, Object> redisTemplate() {
  RedisTemplate<String, Object> template = new RedisTemplate<String, Object>();
  template.setConnectionFactory(jedisConnectionFactory());

  // these are required to ensure keys and values are correctly serialized
  template.setKeySerializer(new StringRedisSerializer());
  template.setHashValueSerializer(new GenericToStringSerializer<Object>(Object.class));
  template.setValueSerializer(new GenericToStringSerializer<Object>(Object.class));
  return template;
}

This is connecting with default settings to a locally running Redis.

Wire up a RedisTemplate into a Controller like this:

@RestController
public class RedisRestController {

  @Autowired
  private RedisTemplate<String, Object> template;

  @GetMapping("singlekey/{key}")
  public RedisResult getSingleValue(@PathVariable("key") String key){
    String value = (String)this.template.opsForValue().get(key);
    RedisResult result = new RedisResult(key, value);
    return result;
  }
}

and this is a bare minimum to get started, but shows how easy it is to get stuff up and running with Spring Boot and other projects like Spring Data.

Send a GET to /singlekey/ with a key value and json for the result is returned.

February 10, 2017

Spring Boot: cannot find classfile ConfigurableApplicationContext (invalid LOC header)

Spring Boot with it’s maven starter dependencies is incredibly helpful to get a simple Spring Boot app up and running in no time, but occasionally you run into weird errors in Eclipse like:

The project was not built since its build path is incomplete. 
Cannot find the class file for 
org.springframework.context.ConfigurableApplicationContext. 
Fix the build path then try building this project

Or doing a mvn compile from your shell, something like:

[INFO] -------------------------------------------------------------
[ERROR] COMPILATION ERROR : 
[INFO] -------------------------------------------------------------
[ERROR] error reading /Users/kev/.m2/repository/org/apache/tomcat/embed/tomcat-embed-core/8.5.11/tomcat-embed-core-8.5.11.jar; invalid LOC header (bad signature)

Assuming you’re already using the Spring Boot Starter Web dependency:

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>

.. errors about Classes not found or errors reading .jars (‘invalid LOC header’) could be related to jars in your local .m2 repo being corrupt.

This is pretty easy to correct if you go into your ~/.m2/repository/ and delete your downloaded dependencies. You can be more specific in what you delete if you have something that you can easily identify as coming from a specific dependency.