Portal View Tutorial

This is a very long tutorial that documents the steps we build light-portal UI with React and other related libraries. It is not part of the core features of our light-4j platform; however, I think it is essential for the following reasons.

Most of our developers are backend focused, and the front end Javascript is not the strength for us. When starting the UI for the portal, I am going to document the steps so that our team members can learn from the tutorial. Also, for contributors, it is an essential document to learn how the UI is constructed before contributing. For the customers who are deploying the light-portal on-premise with customizations or with customized view on our virtual host cloud, this document will give them an entry point to start their work.

I have used the earlier versions of React in 2015 and created react-schema-form to ease the pain for UI form development. Since then, most of my focus is on the light-4j platform in Java and Kotlin. The entire landscape of React ecosystem changed a lot these days, and I am in a learning process. By writing the tutorial, I am hoping some experts can point out my errors and provide recommendations for improvement.

While re-learning React, I found there are a lot of tutorials focus on a specific area; however, it is tough to find one that glues everything together. For example, how to integrate React, Redux, Router with Async API interactions. This tutorial is aiming to document all the small details so that developers can have a big picture of the interactions between components.

As this is a live project, the scope is not fixed and we might add certain topics according to readers’ feedbacks. We want to build the portal UI as front-end microservices so that we can add more services once they are available without major refactor of the UI. React is our choice of the library as it is component based and very flexible. Other libraries used in the view are react-redux, material-ui, react-router and react-schema-form etc.

Create React App

The first step is to scaffold the react application, and the easiest way is to do it with create-react-app command line tool provided by Facebook. First, you need to ensure that you have Nodejs installed on your computer. Also, you need to choose a workspace for your project. I am creating a view subfolder in the light-portal repository to group the UI and backend services for easy management. cd ~/networknt/light-portal npx create-react-app view After the project is created and all dependencies are installed, you can go to the view folder and start the application. Read More »

Build and Deploy

In the previous create-react-app section, we had scaffolded a React application and modified it a little bit on the App.js file. In this section, we are going to deploy it to the light-portal server so that everybody from the Internet can access it. Build The first step is to build the react application with npm run build command line. cd ~/networknt/light-portal/view npm run build After a few second the build will complete and a new folder build will be created in the view folder. Read More »

Jest Test Runner

In the previous tutorial build and deploy, we have scaffold the view application, built and deployed it to the light-portal site. Before we start adding code to the project, we are going to hook up the Jest Test Runner to watch the file changes and run tests automatically in the background. For a simple application, you can always test it on the browser manually after each change; however, for a large application, it is much more efficient to test with unit and integration test cases. Read More »

Wire in Redux

In the previous tutorial, we have hooked up the Jest Test Runner and watch the file change to rerun all test cases. In this tutorial, we are going to wire in Redux to manage the state of the application. Install Redux First we need to add dependencies. cd ~/networknt/light-portal/view yarn add redux react-redux redux-thunk redux-logger If you are using npm, then you can run npm install --save redux react-redux redux-thunk redux-logger After it is done, you should see the following dependencies in your package. Read More »

Add material-ui

In the previous tutorial, we have wired in Redux into the application. Bofore adding any component, we want to add material-ui into the picture. Dependencies Let’s go to the view folder and add the dependencies. cd ~/networknt/light-portal/view yarn add @material-ui/core @material-ui/icons If you are using npm. npm install --save @material-ui/core @material-ui/icons Once the material-ui is installed, your dependencies should look like the following in package.json "dependencies": { "@material-ui/core": "^3.8.1", "@material-ui/icons": "^3. Read More »

Add React Router

The light-portal has a lot of services and that means there would be a lot of menus on the UI and we need react-route to manage the routing in between components. Dependencies Run the following command to install the react-router. cd ~/networknt/light-portal/view yarn add react-router react-router-dom If you are using npm. npm install --save react-router react-router-dom After the installation, the dependencies in package.json should look like this. "dependencies": { "@material-ui/core": "^3. Read More »

Tree View Menu

In the previous section, we have added react-router into the application with a responsive drawer implemented. We also added two menu links Home and Abort to route to these components. As we are building a portal site, we might have a lot of services integrated into the portal with menus. Also, we are planning to support multi-tenants on the site so that each host can define its customized menu items to choose which services to be available. Read More »

React Schema Form

In the previous tree-view-menu section, we have added several menu items into the ResponsiveDrawer to form a hierarchical navigation component with react-router integrated. In this section, we are going to hook up react-schema-form to have generic form generation for most of the menu items. The react-schema-form is a react component we built on top of material-ui to help us to build SPA that interacts with backend services built on top of light-hybrid-4j and light-rest-4j. Read More »