Versions Compared

Old Version 2

changes.mady.by.user Luis Valverde

Saved on

compared with

New Version 3

changes.mady.by.user Luis Valverde

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Warning

THIS SIDE IS UNDER CONSTRUCTION

Understanding the Project Structure

When working with an accelerator such Search UI it is important to understand the project structure and each of the parts that conforms it.

config

This config is not as complete as the previous ESUI config, you can still have custom environment configs but most of the config comes from the backend. Here you can configure links for backend connections and others.

Constants

Constant NameValue
PROTOCOL'http'
DOMAIN_NAME'localhost'
SAPI_PORT'8085'
PORT'3000'

Config Models

AppConfig

PropertyTypeDescription
portstringPort of the UI.
domainstringDomain of the UI.
searchAPISapiConfigConfiguration for SearchAPI related stuff.

SapiConfig

PropertyTypeDescription
baseUrlstringThe base URL of the search API built with PROTOCOL, DOMAIN_NAME and SAPI_PORT constants.

ConfigExample

Code Block
languagepy
themeDJango
const config = {
    port: PORT,
    domain: DOMAIN_NAME,
    searchAPI:{
        baseUrl: `${PROTOCOL}://${DOMAIN_NAME}:${SAPI_PORT}`
    }
};

export default config;

public

Here we share public resources, this folder is not going to be used that much in any projects.


Table of Contents

src

Here is where one of the places where the magic happens, src will contain all the source code of the React Project's components. Here we're going to talk about the API which contains interceptors, the components folder which contains most of functional components, the frameworks, React Hooks, routes, and others.

api

Put here your axios apis, here we have some interceptors that you may use to modify outgoing requests with headers and authentication and also to receive and process responses coming from the backend.

assets

Put here icons, images, resources, etc.

components

Here we have 3 folders, the auth folder for authentication screens and login pages, layouts for our different views in the application and the UI folder which is where we have views and functional components for those views.    

framework

This folder section goes along with the Dynamic Frameworks from the backend. The files here are the ones in charge of interpreting and displaying the responses coming from those Dynamic Frameworks, hence this is the place to look for if you want to modify appearances of the results in the UI.

Note

This only applies if you're using the frameworks provided by us, you can also build your own UI from scratch in the components section and get rid of the frameworks code for your project using the plain responses from the API.

hooks

React Hooks are simple JavaScript functions that we can use to isolate the reusable part from a functional component. React has plenty of hooks you can use. This section is for custom hooks that can be programmed by any user to make modular and reusable code.

routes

Here we have the routes to the different views of the application, you can create your own routes here or modify the ones we provide. Routes are made with React Router.

store

This is the other important place to look at and it's really important that you understand React Redux with Typescript before even looking at this. Redux is a paradigm that can be applied to several frameworks. The Store is a mechanism that allows you to control all the states of the application in a single place with a single data flow. To build this Store we used Redux Toolkit which gives us packages and methods that make the creation of Slices a lot easier. Make sure to study both Redux and Redux Toolkit before exploring this code.