Hopp til hovedinnhold
Blogg og artikler

Fra bloggen,

Hot deployment of Quarkus & Node (React) through Docker

As a developer you’d like hot deployment of both your backend REST service and your frontend UI, but hot deployment of frontend is currently an unresolved issue in Quarkus. Let’s solve it using Docker!

Skrevet av

  • Vidar Wahlberg

    Sjefskonsulent

Docker logo

Copyright 2013-2015 Docker, Inc. All rights reserved

The scenario

You’d like hot deployment of both backend and frontend, with minimum hassle for all developers in your team.
Your project consists of a Quarkus REST backend and in this case, a React frontend UI. Maven is used as the build tool for this example.
A similar approach can likely be used by many other combinations of backends, frontends & build tools. For brevity only one combination is covered here.

If you don't already have a project with a setup like this, then you can check out this demo project.

The project layout

The standard Maven layout is used, with the addition of frontend code residing in src/main/frontend/, and a docker-compose.yml file at the root of the project:

typescript
version: '3.7'

services:
  frontend:
    image: node
    volumes:
      - "./src/main/frontend:/app"
    ports:
      - 3000:3000 # Frontend HTTP server port
    # Without "stdin_open: true", react-scripts exits immediately.
    # See https://github.com/facebook/create-react-app/issues/8688
    stdin_open: true
    working_dir: /app
    command: "sh -c \"yarn install && yarn start\""

  backend:
    image: maven
    volumes:
      - "./:/app"
      # Mounting user's local .m2-directory,
      # for custom settings.xml and for caching dependencies.
      - "~/.m2:/root/.m2"
    ports:
      - 5005:5005 # Debug port
      - 8080:8080 # Backend HTTP server port
    working_dir: /app
    command: "mvn quarkus:dev"

In this example I’m using the latest version of Node and Maven. When this was written, the versions were maven:3.6.3-jdk-14 and node:14.1.0-stretch.

Creating this docker-compose.yml is almost all you have to do. There's one more thing, and that's adding "proxy": "http://backend:8080" to your package.json. The proxy ensures that requests sent to the Node HTTP server will be forwarded to the Quarkus HTTP server when the Node HTTP server can't process the request.

Your src/main/frontend/package.json should then look something like this:

json
{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://backend:8080",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Ready, set, go

Open a terminal, go to the root of your project and execute command docker-compose up.
That’s it. Your frontend is now available at http://localhost:3000, and your backend REST service at http://localhost:8080. You can modify both frontend and backend code, both will automatically be recompiled and deployed without intervention.
Some changes, for instance to pom.xml or package.json, may require a restart of Quarkus or Node. Pressing ctrl-c in the terminal where you started docker-compose will stop both services.

An additional bonus; developers don’t need to manually install (the right version of) neither Node nor JDK in their OS, Docker will handle it. This is useful when you’re working on multiple projects where some might be stuck on Java 8, while other projects use a more recent Java version.

Har dere noe som skal bygges?

Vi lager systemer som tåler mange brukere og mange år i drift. Og vi liker å gjøre det sammen med dere.

Les om systemutvikling og arkitektur