Router to render SPA

This tutorial is based on the taiji-faucet application in the folder networknt/light-config-test/light-router. The configuration is copied from taiji-faucet and modified in the router-spa folder.

In the previous tutorial, we have shown you how to create an instance of light-router for taiji-faucet service running in the Kubernetes cluster.

In this tutorial, we are going to enable the light-router to serve a single page application built on React. I am not going to complete the SPA but show you the steps to get it set up.

handler.yml

To serve the static content from light-4j application, we need to change the configuration for light-router to handler.yml in order to wire in PathResourceHandler.

# Handler middleware chain configuration
---
enabled: true

#------------------------------------------------------------------------------
# Support individual handler chains for each separate endpoint. It allows framework
# handlers like health check, server info to bypass majority of the middleware handlers
# and allows mixing multiple frameworks like OpenAPI and GraphQL in the same instance.
#
# handlers  --  list of handlers to be used across chains in this microservice
#               including the routing handlers for ALL endpoints
#           --  format: fully qualified handler class name@optional:given name
# chains    --  allows forming of [1..N] chains, which could be wholly or
#               used to form handler chains for each endpoint
#               ex.: default chain below, reused partially across multiple endpoints
# paths     --  list all the paths to be used for routing within the microservice
#           ----  path: the URI for the endpoint (ex.: path: '/v1/pets')
#           ----  method: the operation in use (ex.: 'post')
#           ----  exec: handlers to be executed -- this element forms the list and
#                       the order of execution for the handlers
#
# IMPORTANT NOTES:
# - to avoid executing a handler, it has to be removed/commented out in the chain
#   or change the enabled:boolean to false for a middleware handler configuration.
# - all handlers, routing handler included, are to be listed in the execution chain
# - for consistency, give a name to each handler; it is easier to refer to a name
#   vs a fully qualified class name and is more elegant
# - you can list in chains the fully qualified handler class names, and avoid using the
#   handlers element altogether
#------------------------------------------------------------------------------
handlers:
  # Light-framework cross-cutting concerns implemented in the microservice
  - com.networknt.exception.ExceptionHandler@exception
  # - com.networknt.metrics.MetricsHandler@metrics
  - com.networknt.traceability.TraceabilityHandler@traceability
  - com.networknt.correlation.CorrelationHandler@correlation
  # - com.networknt.openapi.OpenApiHandler@specification
  # - com.networknt.openapi.JwtVerifyHandler@security
  # - com.networknt.body.BodyHandler@body
  # - com.networknt.audit.AuditHandler@audit
  # - com.networknt.sanitizer.SanitizerHandler@sanitizer
  # - com.networknt.openapi.ValidatorHandler@validator
  # Header middleware to manipulate request and/or response headers before or after downstream server
  - com.networknt.header.HeaderHandler@header
  # Direct requests to named services based on the request path
  - com.networknt.router.middleware.PathPrefixServiceHandler@path
  - com.networknt.router.RouterHandler@router
  - com.networknt.resource.PathResourceHandler@resource
  # Customer business domain specific cross-cutting concerns handlers
  # - com.example.validator.CustomizedValidator@custvalidator
  # Framework endpoint handlers
  - com.networknt.health.HealthGetHandler@health
  - com.networknt.info.ServerInfoGetHandler@info
  # - com.networknt.metrics.prometheus.PrometheusGetHandler@getprometheus

chains:
  default:
    - exception
    #- metrics
    - traceability
    - correlation
    - header
    - path
    - router
    #- specification
    #- security
    #- body
    #- audit
    #- sanitizer
    #- validator

paths:
  - path: '/faucet/{address}'
    method: 'GET'
    exec:
      - default
  - path: '/faucet/{address}'
    method: 'POST'
    exec:
      - default

  - path: '/health/com.networknt.router-0.1.0'
    method: 'get'
    exec:
      - health

  # In most case, the /server/info endpoint shouldn't be exposed. If it is, then it must be protected by OAuth 2.0 or Basic Auth
  - path: '/server/info'
    method: 'get'
    exec:
      - info

defaultHandlers:
  - resource

Please note that we have the

  - com.networknt.resource.PathResourceHandler@resource

defined in the handlers section and this handler is referred in the defaultHandlers section at the end of the file.

defaultHandlers:
  - resource

This configuration tells the light-4j to handler all the other path/method combination with resource handler if they are not defined in the paths.

path-resource.yml

We also need to define some configuration parameters for the PathResourceHandler.

path: /
# This is the base used by docker
base: /public
# This is the base that is used for IDE debugging
#base: /home/steve/networknt/light-config-test/light-router/taiji-faucet/view/build
prefix: true
transferMinSize: 10485760
directoryListingEnabled: false

Please note that the configuration now is suitable for compose as a path in container is used. When you are running with debugger in an IDE, you need to switch to base: /home/steve/networknt/light-config-test/light-router/taiji-faucet/view/

This configuration tells the system to serve files from the base when there is request to the root path /. For example, if you put the following address in the address bar on your browser.

https://localhost:8443

Create application

Go the networknt/light-config-test/light-router/taiji-faucet folder and run the following command to create a React application called view.

npx create-react-app view
cd view
yarn build

Now we have a new React single page application built and it is readily to be served from the view/build folder.

Update Compose

Now let’s update the compose file to map this folder into the container.

version: '2'

services:

  light-router:
    image:  networknt/light-router:latest
    networks:
    - localnet
    ports:
    - 8443:8443
    volumes:
    - ./config:/config
    - ./view/build:/public

#
# Networks
#
networks:
    localnet:
        # driver: bridge
        external: true

You can see that we have mapped ./view/build to /public inside the container.

Start Compose

Let’s start the compose

docker-compose up

And then put the following URL into the address bar of your browser.

https://localhost:8443/

You will see an React starter application running. The next step is to update the React applicationt to access APIs on the portal.

The following is a video that walks through the process.