---
title: "Javascript CRUD Generation Utility for the Platform's APIs"
canonical: "https://onesaitplatform.refined.site/space/DOCT/2220197577/Javascript%20CRUD%20Generation%20Utility%20for%20the%20Platform's%20APIs"
format: markdown
---
> ℹ️ Available in version **2.1.0-gradius**

> Macro (toc)

## Introduction

Aiming to make working with the Platform more and more of a product, this capacity has been incorporated. Thus, from version **2.1.0-gradius **onward, you will have the option to generate JS clients from platform APIs, first in React JS, and later also in Vue JS.

This functionality allows you to select the APIs from which you want to generate that Ontology’s CRUD, that is, the Create, Read, Update and Delete operations.

![image](media://dd5d9797-27b1-4387-9e04-ca4e6d04ed4d)

A Javascript client is generated. It will attack those APIS, also including the Login on the Platform Identity Manager.

The content of the downloaded file, after decompression, is as follows:

![image](media://643372ee-ed0a-4764-b582-9d3c830db407)

The first thing to do is download the dependencies by executing the following from the client-js directory:

> **npm install**


Once executed, we will have a new directory, node_modules, with all the required dependencies:

![image](media://2748270b-e914-434b-94c3-51685e3c0fbe)

## Local execution

If you want to run the app locally, modify the .env.development file, which has the following properties:

REACT_APP_BASE_URL=

- base url of the application.

REACT_APP_SERVER=[http://localhost:19100](http://localhost:19100)

- url of the op's ApiManager. If you do not have the ApiManager deployed locally, you can point to the ApiManager in an environment where you know it is deployed, such as [https://development.onesaitplatform.com](https://development.onesaitplatform.com) , for example.

REACT_APP_SERVER_OAUTH=[http://localhost:21000](http://localhost:21000)

- url of the oauth server. If you do not have the oauth server deployed locally, you can point to the oauth server in an environment where you know it is deployed, like [https://development.onesaitplatform.com](https://development.onesaitplatform.com) , for example.

Then, execute the following command:

> **npm start**


This command will launch your application and open it in the browser, redirecting you to the Login screen:

![image](media://ab6bd991-5d2b-427b-b6af-80355532f34d)

If you are not redirected to the home page after logging in, then you will have to validate that the response of the authentication service is not being blocked by CORS policy.

![image](media://9236c071-5d3e-4bc8-8613-e8c5330c5c11)

![image](media://f4053190-bc71-4fb1-b066-ea070097ee74)

If you pay attention to the error message it indicates that our domain name does not match the allowed one, in this case ‘http://localhost:3000, http://localhost:3000'. This is an error due to duplicated headers. If you look at the reply message’s headers, you will see that it is duplicated:

![image](media://05e5f30a-2f6f-46e2-9956-5a80b06d6213)


To solve this, you must comment the directives in the nginx configuration file for the OAuth2-server, because those are defined in the application.

![image](media://aa1b16c7-ee18-410f-acef-fa32ae08b44f)

Once solved, you can authenticate against the Identity Manager:

![image](media://563213b5-4d7b-4e44-9133-0ec4bbb5b508)

If the calls to the APIs fail due to CORS policy, you will have to **add **the headers to the nginx configuration for the location **api-manager.**

## Execution in Production Environment

If you want to generate the app for a productive environment, modify the .env.production file, which has the following properties:

REACT_APP_BASE_URL=/web/api-client

- base url of the application.

REACT_APP_SERVER=[https://gradius.onesaitplatform.com/](https://gradius.onesaitplatform.com/)

- url of the server on which the application is served.

REACT_APP_SERVER_OAUTH=[https://gradius.onesaitplatform.com/](https://gradius.onesaitplatform.com/)

- url of the OAuth server.

PUBLIC_URL=[https://gradius.onesaitplatform.com/web/api-client](https://gradius.onesaitplatform.com/web/api-client)

- public url of the application.


Once the properties have been configured, from the parent directory, execute this command:

> **npm run build**

Which is an alias for the 'react-scripts build' command, which generates the app in production mode within the **build **folder.

![image](media://f886c83f-c06c-4290-acf0-b64c0217c599)

Then, generate a zip file with the folder’s contents, and upload it to the platform. Inside the **build **directory, execute:

> zip -r client-react.zip ./*

Lastly, you must create a new WebProject, to which you will pass the zip file you have just generated. Within the WebProjects management screen, create a new one:

![image](media://245e928d-e576-40c2-8950-b41a8cd2a42b)

As the project name, you must indicate the name you defined in the parameter REACT_APP_BASE_URL, after the path /web/ :

REACT_APP_BASE_URL=/web/**api-client**

![image](media://057927ae-866a-4773-93b6-85fc8ad0a49b)

Click on NEW and you will have your WebProject generated and ready to use:

![image](media://32a209b1-4724-46de-a80a-f18526dc240f)

![image](media://dfffce38-b22b-48ba-92fc-923e250dea66)


![image](media://73236622-19a6-44ed-9552-afba76d106e0)

![image](media://83549849-d93b-4eff-acb1-ae115621f742)

|  |
| --- |
|  |

![image](media://313b7ff0-f5db-4052-88c8-b02f3032ff49)

![image](media://448cf9fd-5b98-44b3-978a-c997200e529c)

## Video tutorial

Here is a video tutorial that explains how to use this tool.

> Macro (widget)