Connect CoreUI frontend to Quarkus Java backend in 4 easy steps

Quarkus: The combination of Quarkus and Kubernetes provides an ideal environment for creating scalable, fast, and lightweight applications. Quarkus significantly increases developer productivity with tooling, pre-built integrations, application services, and more.

CoreUI: CoreUI is a leading open source admin dashboard template used by thousands of developers and Fortune 500s. CoreUI admin panel is built on top of Bootstrap 5 and supported by popular JS platforms i.e. React, Angular, Vue etc.

This tutorial is all you need to get started with Full Stack development using React based CoreUI and Quarkus (Java) based backend application.

Here are the tutorial contents:

• Code Introduction pushed to GitHub
• Create Quarkus application with 2 API end-points /hello and /version
• ValidateQuarkus application supports both GET and POST request
• Create CoreUI frontend application using CoreUI React Admin template from GitHub
• Add development proxy server into React CoreUI front end application
• Add JavaScript classes to handle both GET and POST RESTful request to the backend server
• Call both /hello and /version API from UI to Quarkus backend API and collect the data
• Parse the RESTful API response and render it into the web page
• Verify both GET and POST connections are working between CoreUI and Quarkus backend with data transfer back and forth.
• Bonus Link: Connect CoreUI with Python Backend

Here is the video timeline: (00:00) Start of the Video (00:07) Tutorial Intro (1:28) GitHub and Starter code review (3:10) Creating Quarkus code from template (6:12) Quarkus code review in IntelliJ IDE (7:50) Running Quarkus code first time (10:11) Adding /version endpoint to quarkus app (13:24) Cloning CoreUI React admin template code (14:34) CoreUI application starts (14:57) Opening CoreUI code in VSCode (16:27) Editing CoreUI code in VSCode (17:26) Step 1 - setupProxy.js added with code (20:27) Step 2 - Implementing Get API connection function to backend (21:45) Step 3 - Implementing Post API connection function to backend (23:50) Step 4.1 - Using GET API in FrontEnd (32:11) Get API connection verification with code (33:38) Step 4 .2- Using Get and Post implementation in code (36:44) Post API connection verification with code (38:00) Pushing code to GitHub repo (39:06) Bonus Tutorial (CoreUI with Python backend) (40:12) Credits

You can get the code used in this tutorial from the link below: https://github.com/prodramp/publiccode/tree/master/java/quarkus-coreui

CoreUI React admin template (v4.1.1): https://github.com/coreui/coreui-free-react-admin-template

Quarkus Template: https://code.quarkus.io/

Please visit: https://prodramp.com | @prodramp https://www.linkedin.com/company/prodramp

Content Creator: Avkash Chauhan (@avkashchauhan) https://www.linkedin.com/in/avkashchauhan

Tags: #webdevelopment, #frontend #react #python #layout #coreUI #flask #webserver #webdevelopment #restful #GET #POST #Quarkus #restful #java #microprofile #graalVM #kubernetes #fullstackdevelopment #pandas #matplotlib #datavisualization #conda #webapp #apply #transform #github #groupby #prodramp #wetogethervc ... https://www.youtube.com/watch?v=-a479_ZbroA