GenericSuite AI for ReactJS
GenericSuite AI (frontend version) has AI ChatBot tools, a customizable CRUD editor, login interface and a suite of tools to kickstart your AI App development process.
Features
- AI ChatBot tools: to implement Chatbot conversations base on NLP (Natural Language Processing), LLM (Large Language Models) and other AI technologies like ChatGPT.
- Customizable CRUD editor: core CRUD (Create-Read-Update-Delete) code that can be parametrized and extended by JSON configuration files. There's no need to rewrite code for each table editor.
- Customizable menu: menu and endpoints can be parametrized and extended by JSON configuration files in the backend side. The API will supply the menu estructure and security check based on the user's security group, and GenericSuite will draw the menu and available options.
- Customizable Login Interface: Easily adapt the login page to match your brand identity with the App logo.
- Development and Production Scripts: Quick commands to start development or build your application for QA, staging production environments on AWS.
- Testing with Jest: Comes pre-configured with Jest for running tests, including an initial test for the
<App />
component. - Inclusion of Essential Files:
.env.example
for environment variables setup,Makefile
to short-cut frequent operations,webpack.config.js
andconfig-overrides.js
to run the App locally withWebpack
orreact-app-rewired
,scripts
with development and production scripts, andCHANGELOG.md
for tracking changes across versions.
The perfect companion for this frontend solution is the backend version of The GenericSuite AI.
GenericSuite AI (frontend version) is based on The GenericSuite.
Pre-requisites
Install same tools described in GenericSuite for ReactJS (frontend version) Pre-requisites
section.
Getting Started
To get started with GenericSuite AI, follow these simple steps:
Create Git repositories
Same steps described in GenericSuite for ReactJS (frontend version) Getting started > Create Git repositories
section.
Initiate your project
Same steps described in GenericSuite for ReactJS (frontend version) Getting started > Initiate your project
section.
Install GenericSuite AI Library
npm install genericsuite-ai
Install additional development dependencies
Same steps described in GenericSuite for ReactJS (frontend version) Getting started > Install additional development dependencies
section.
Prepare the Configuration Files
Copy the template from node_modules/genericsuite-ai
:
cp node_modules/genericsuite-ai/.env.example ./.env
And configure the variables according your needs:
-
Assign the same variables described in described in GenericSuite for ReactJS (frontend version)
Getting started > Prepare the Configuration Files
section. -
Assign the additional
AWS_*
parameters with your AWS data (used by aws_deploy_to_s3.sh and change_env_be_endpoint.sh). You'll need an AWS account.
For more information, check the comments for each variable in the .env.example file.
Prepare the Makefile
Copy the Makefile
template from node_modules/genericsuite-ai
:
cp node_modules/genericsuite-ai/Makefile ./Makefile
Change Scripts in Package.json
Same steps described in GenericSuite for ReactJS (frontend version) Getting started > Change Scripts in Package.json
section.
Create the version file
Create the version.txt
file with the App version:
vi ./version.txt
# or
# code ./version.txt
Add the version number (e.g. 1.0.0
) and save the file.
App structure
The suggested App development repository structure is the same described in GenericSuite for ReactJS (frontend version) App structure
section.
Configure the project
Click here for more information about how to configure the project.
Code examples and JSON configuration files
The main menu, API endpoints and CRUD editor configurations are defined in the JSON configuration files.
You can find examples about configurations and how to code an App in the GenericSuite App Creation and Configuration guide.
Start Development Server
To start the development server:
make run
Deploy QA
To perform a QA deployment over AWS S3:
make deploy_qa
If you receive the error ERROR running aws s3api put-bucket-policy --bucket BUCKET_NAME --policy S3_BUCKET_POLICY
, probably the script was unable to deactivate the 'Block all public access' option on the S3 bucket.
To solve it:
- Go to the AWS Console.
- Go to S3.
- Search for App bucket (e.g.
exampleapp-frontend-website
). - Click on the bucket name.
- Click on the 'Permissions' tab.
- Click on 'Edit' in the 'Block public access (bucket settings)' section.
- Uncheck 'Block all public access'.
- Click on 'Save changes'.
- Confirm the operation.
To link this S3 bucket to the App domain:"
- Go to Route 53.
- Click on the Zone corresponding to the App domain.
- Click on 'Create Record'.
- Enter the subdomain: 'app-qa', 'app-staging', 'app-demo' or 'app' (for production).
- Enable 'alias'.
- In 'Route traffic to' select the 'Alias to CloudFront' option.
- In 'Choose distribution' select the one corresponding to App stage.
- Click on 'Create Records'.