Exemplo de aplicação Full Stack (backend em Quarkus, frontend em React) executada via Docker Compose

1. Introdução

Este documento apresenta uma pequena aplicação de exemplo (e um tutorial de seu desenvolvimento) que neste momento contém várias Limitações e TODOs. Contudo, ele demonstra a Execução e a Construção e Testes (commit a commit) de uma aplicação muito simples, full stack (com backend e frontend), composta de dois microserviços e que pode ser iniciada via Docker Compose, rapidamente, em um ambiente de desenvolvimento.

Microserviço A - Um frontend escrito em React que consome um serviço exposto pelo Microserviço B.
Microserviço B - Um backend escrito em Quarkus.

Além de demonstrar a integração entre um frontend e um backend através de uma aplicação onde contêineres Docker são regidos pelo Docker Compose, esta aplicação também demonstra a Adição de suporte ao Swagger e um código de teste automatizado mínimo utilizando o QuarkuzTest.

2. Execução

2.1. Pré-requisitos

Git instalado.
Um terminal executando o Bash.
Docker Compose instalado.

2.2. Passo a passo

Faça um clone do código fonte do projeto:

$ git clone https://github.com/paulojeronimo/quarkus-react-sample && cd `basename $_`

Exporte a variável APP_DIR e vá para o diretório final:

$ export APP_DIR=$PWD && cd $APP_DIR/final

Esta variável é utilizada na construção do tutorial a seguir.

Inicie o projeto utilizando o Docker Compose:

$ docker-compose up -d

Abra seu browser default acessando a URL disponibilizada pelo Microserviço A:

$ open http://localhost:3000

O comando open, disponível em um terminal macOS, pode ser substituído (no Linux) pelo comando xdg-open.
A aplicação deverá apresentar, como saída, a mensagem obtida do endpoint /hello disponibilizado pelo Microserviço B.

3. Construção e Testes (commit a commit)

3.1. Pré-requisitos

JDK 11 e Maven instalados.
Node.js instalado.

3.2. Inicialização do projeto (pelo backend)

$ rm -rf $APP_DIR/tutorial && mkdir -p $APP_DIR/tutorial && cd $_
$ mvn io.quarkus:quarkus-maven-plugin:1.11.1.Final:create \
    -DprojectGroupId=org.acme \
    -DprojectArtifactId=quarkus-react-sample \
    -DclassName="org.acme.ExampleResource"

$ (shopt -s dotglob; mv quarkus-react-sample/* .; rmdir quarkus-react-sample)

$ ./mvnw clean test

$ ./mvnw quarkus:dev &

$ curl http://localhost:8080/hello
Hello RESTEasy

$ kill %1

$ git init
$ git add .
$ git commit -m 'Initial commit'

3.3. Adição do frontend inicial

$ cd src/main

$ npx create-react-app frontend && cd $_

$ git add .
$ git commit -m 'Added initial frontend'

3.4. Adição de suporte ao Docker Compose

$ cd $APP_DIR/tutorial
$ cp ../initial/docker-compose.yml .

$ docker-compose up -d

$ docker-compose logs -f

$ curl http://localhost:8080/hello
Hello RESTEasy

$ git add .
$ git commit -m 'Added docker-compose support'

3.5. Alteração do frontend para exibição do endpoint /hello

$ docker-compose down

$ git apply ../patches/src/main/frontend/src/App.js.1.diff

$ git apply ../patches/src/main/frontend/package.json.1.diff

$ git apply ../patches/src/main/frontend/.gitignore.1.diff

$ docker-compose up
$ open http://localhost:3000

$ git add .
$ git commit -m 'Updated frontend to show message from backend'

3.6. Adição de suporte ao Swagger

$ docker-compose down

$ ./mvnw quarkus:add-extension -Dextensions="quarkus-smallrye-openapi"

$ git difftool

$ ./mvnw compile quarkus:dev &

$ curl http://localhost:8080/q/openapi

$ echo 'quarkus.swagger-ui.always-include=true' >> src/main/resources/applicagion.properties
$ kill %1

$ !./mvnw compile
$ open http://localhost:8080/q/swagger-ui

$ git add .
$ git commit -am 'Added swagger support'

4. Limitações e TODOs

Este projeto serve, neste momento, apenas para um ambiente de desenvolvimento:
1. Observe que, ainda, não são criadas imagens otimizadas contendo versões com código nativo. O Quarkus está preparado para criá-las utilizando a GraalVM mas isso ainda não está visível através de comandos apresentados neste tutorial.
Próximas versões deste tutorial irão:
1. Adicionar suporte ao RESTEasy Client, como demonstrado no guia rest-client.
2. Demonstrar o suporte a criação de aplicações nativas utilizando a GraalVM.
3. Explorar outras funcionalidades que também são apresentadas no Quarkus Workshop