Quarkus Frontend

This plugin proposes different UI fields to:

| Name | Description | |-------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------| | QuarkusExtensionList | Filter, select your Quarkus extensions using the Quarkus Extension List field. | | QuarkusQuickstartPicker | Select using the Quarkus QuickStart Picker one of the quickstarts available: https://github.com/quarkusio/quarkus-quickstarts | | QuarkusVersionList | List the recommended and available versions of Quarkus |

NOTE: Such frontend feature(s) should be used with the quarkus scaffolder backend plugin (described hereafter) in order to get the generated project from https://code.quarkus.io/ as zip file !

Quarkus UI fields

To use the frontend components, import the needed package under the following path within an existing backstage application:

cd packages/app
yarn add "@qshift/plugin-quarkus"

Next, customize the packages/app/src/App.tsx file according to the field that you plan to use

Quarkus extensions field

This field allows a user to pick up Quarkus extension(s) from the code generator server.

Edit the packages/app/src/App.tsx file to add the tag of the <QuarkusExtensionListField /> within the tag <Route path="/create" element={<ScaffolderPage />}> as described hereafter.

...
import { ScaffolderFieldExtensions } from '@backstage/plugin-scaffolder-react';
import { QuarkusExtensionListField } from '@qshift/plugin-quarkus';
...
    <Route path="/create" element={<ScaffolderPage />}>
      <ScaffolderFieldExtensions>
        <QuarkusExtensionListField />
      </ScaffolderFieldExtensions>
...

Update your template file to use extension field:

apiVersion: scaffolder.backstage.io/v1beta3
kind: Template
metadata:
  name: quarkus-application
  title: Create a Quarkus Application
  description: Create a Quarkus application using code generator "code.quarkus.io"
  tags:
    - quarkus
    - java
spec:
  owner: guests
  type: service

  parameters:
  ...
  - title: Customize the Quarkus application features
    properties:
      extensions:
        title: Quarkus Extensions
        type: array
        description: The list of the quarkus extensions
        ui:field: QuarkusExtensionList
  steps:
  ...

When done, you will be able to select your extension(s) when you scaffold a new project.

It is also possible to filter the extensions (aka restrict the list of the extensions to be used):

    ui:field: QuarkusExtensionList
    ui:options:
      filter:
        extensions:
          - io.quarkus:quarkus-resteasy-reactive-jackson
          - io.quarkus:quarkus-smallrye-openapi
          - io.quarkus:quarkus-smallrye-graphql
          - io.quarkus:quarkus-hibernate-orm-rest-data-panache

If you would like to use a different code generator server, set the following property

    ui:field: QuarkusExtensionList
    ui:options:
        codeQuarkusUrl: https://staging.code.quarkus.io

Quarkus Extension List - default (field):

Quarkus Extension List - Select (field):

Quarkus Extension List - Added (field):

Quarkus Quickstart picker field

This field allows a user to pick up a Quarkus Quickstart project.

Edit the packages/app/src/App.tsx file to add the tag of the <QuarkusQuickstartPickerField /> within the <Route path="/create" element={<ScaffolderPage />}> as described hereafter.

...
import { ScaffolderFieldExtensions } from '@backstage/plugin-scaffolder-react';
import { QuarkusQuickstartPickerField } from '@qshift/plugin-quarkus';
...
    <Route path="/create" element={<ScaffolderPage />}>
      <ScaffolderFieldExtensions>
        <QuarkusQuickstartPickerField />
      </ScaffolderFieldExtensions>
...

Update your template file to use extension field:

apiVersion: scaffolder.backstage.io/v1beta3
kind: Template
metadata:
  name: quarkus-quickstart
  title: Create a Quarkus Application from a Quickstart
  description: Create a Quarkus Application from one of the Quickstarts you can find on "https://github.com/quarkusio/quarkus-quickstarts"
  tags:
    - quarkus
    - java
spec:
  owner: guests
  type: service

  parameters:
  ...
  - title: Select the Quarkus Quickstart
    properties:
      quickstartName:
        title: Quickstart Name
        type: string
        description: The name of the quickstart to clone
        default: 'hibernate-orm-panache'
        ui:field: QuarkusQuickstartPicker
  steps:
  ...

When done, you will be able to create a new Quarkus project from the quickstart selected.

Quarkus Quickstart Picker - default (field):

Quarkus Quickstart Picker - select (field):

Quarkus Version list field

This field allows a user to select a Quarkus version from the list of the recommended and available version.

Edit the packages/app/src/App.tsx file to add the tag of the <QuarkusQuickstartPickerField /> within the <Route path="/create" element={<ScaffolderPage />}> as described hereafter.

...
import { ScaffolderFieldExtensions } from '@backstage/plugin-scaffolder-react';
import { QuarkusVersionListField } from '@qshift/plugin-quarkus';
...
    <Route path="/create" element={<ScaffolderPage />}>
      <ScaffolderFieldExtensions>
        <QuarkusQuickstartPickerField />
      </ScaffolderFieldExtensions>
...

Update your template file to use extension field:

apiVersion: scaffolder.backstage.io/v1beta3
kind: Template
metadata:
  name: quarkus-application
  title: Create a Quarkus Application
  description: Create a Quarkus application using code generator "code.quarkus.io"
  tags:
    - quarkus
    - java
spec:
  owner: guests
  type: service

  parameters:
  ...
  - title: Customize the Quarkus application features
    properties:
      quarkusVersion:
      title: Quarkus version
      type: array
      description: The list of the quarkus supported/recommended
      ui:field: QuarkusVersionList
      
  steps:
  ...

When done, you will be able to select the quarkus version to be used to scaffold your quarkus project

Quarkus Version list - Select (field):

Quarkus Version list - Recommended (field):