React Client implementation details

Continuing the discussion from Portal module example:

It’s a similar approach, try to have a look at the generated code. You’ll have to create additional elements manually. And you’ll need to learn TypeScript language and ReactJS framework in order to understand it better.

CUBA Portal == Spring MVC, CubaFront == ReactJS

Architecture approaches are different, development frameworks are different. You can have BOTH portal and front UI for the same application, have a look at the CUBA architecture

Yes, it’s OK. Please have a look at the documentation

Yes, it is an abbreviation for TypeScript

Thank you!
Still…is there any git example with ReactJS frontend? Can you please indicate a controller (REST) location in this Cuba generated code? Apart of learning typescript it’s important to have a hint.

In Spring MVC, the View can be also made with ReactJS? Is this correct?

Another issue: if I go to http://localhost:3000 I have the start menu but I cannot enter (Admin, admin): I have Login Failed. I can enter into frontend application only if I run Cuba and start the Tomcat server at localhost: 8080.
I imagine that page of http://localhost:3000 address is served by the npm (also Tomcat? ) but why this behaviour?

Yes, here is the Petclinic sample project

You mean REST API Add-on controller?

Probably it happens because Admin doesn’t have the REST API role. You need to assign the role with REST API scope to the admin user. Please note that for the CUBA React client REST API Add-on installation is required.

I mean the controller that comunicate with Cuba middleware. I suppose that should be somewhere inside frontend folders.
I have installed REST API Add-on (but it’s empy).

<?xml version="1.0" encoding="UTF-8"?>
<services xmlns="">


The http://localhost:3000 is served by npm Tomcat? Should I started and stop it with

npm run start


npm run stop?

How can I assign the role with REST API scope to the admin user?

Yes, please have a look here

Nope, it is node server, it executes TypeScript code. You can start and stop it independently from tomcat.

You can do it using standard roles management screen, just pay attention to roles scope. There should be rest-api-access role, assign it to admin user. You can add more roles to allow access to different entities via REST API

From modules/front - npm start - seems that starts server side javascript - serves the main page
From deploy/tomcat/bin - startup - without Tomcat started - login failed - with Tomcat started - everything works fine - I don’t know exacltly Tomcat role here (maybe could detail a little bit). However in order to run the application, both servers should be started (anyway I don’t know how can add more roles to allow access to different entities via REST API.). When you say REST API are you reffering to REST API add-on or CUBA REST JS?
In order to communicate with middleware from front module is mandatory to install CUBA REST JS?

Thank you!

Tomcat runs your CUBA application, therefore you cannot log in without Tomcat running.

I mean REST API add-on and services published using this add-on.

If you want to use the front-end client generated by CUBA tools, the REST API add-on is mandatory. It also controls permissions using rest-api role scope.

If you plan to implement your own JS client from scratch and use your custom REST API defined in portal - REST API add-on is not required and you don’t need to add permissions to roles with rest-api scope. Generic roles will work here.

Andrey, I really appreciate your support. The more info. I find out, the more I like Cuba. Last questions:

I run the petclinic-front application. I saw that frontend starts at http://localhost:8080/petclinic-front address (so it’s not mandatory to start node.js server and run at http://localhost:3000 address). How did you this trick and how is it possible? I think in this way it’s easier to deploy into an uberjar…

As a bottom line can I re- use the logic (Services) from Middleware and/or logic controllers from Cuba backednd (through REST) or it’s mandatory to redo all this functions directly from Frontend?

I imagine that Cuba frontend can be used on mobile phones (for basic CRUD operation). Is this true? ( I think this frontent approach is more appropriate for my goals than Portal.)

Please consider front-end client as a separate application. Because it is a completely separate application - different technology, different language, different runtime.

It is mandatory to re-use business logic from CUBA application via the REST API :slight_smile: Client should delegate all business logic to the server-side.

You can implement a fully-functional mobile UI using both portal or ReactJS front-end. No limitations here. But you can create the app using react-native.

Please have a look at this tutorial or this one to understand the development model better and find out how REST, JS, Controllers, etc. interact with each other.