Skip to main content

Getting Started

System requirements​

  • Operating System: Windows 10+, Linux
  • Node.js: Version 16 or higher
  • npm: Version 8 or higher
  • Java JDK: Version 21(required for RASP Platform)
  • Git: For cloning repositories
  • Docker: Required to run Keycloak for authentication
  • Database: MySQL (preferred download using docker) / MongoDB
  • IDE/Code Editor: For editing generated projects. VS Code for frontend and intellij for Backend.

How to access RASP Designer and Backend Generator​

RASP Designer is an open-source low-code platform available via GitHub. You can either clone the repository (ideal for development) or download the source code (for quick access).

RASP Designer

Option 1: Download the Release

  • Visit the RASP Designer GitHub Repository.

https://github.com/IIITBangalore/rasp-fe

  • Navigate to the Releases section.
  • Download the source code from the RASP FE 0.6 which is Rasp-v0.6 tagged release (Source code (zip)).
  • Extract the ZIP file and open the folder in your preferred code editor (e.g., Visual Studio Code).

Option 2: Downloading the Source Code

  • Go to: https://github.com/IIITBangalore/rasp-fe
  • Navigate to tags
  • Select Rasp-v0.6
  • Click on the “Code” button, then select “Download ZIP”.
  • Extract the ZIP file from your system.
  • Open the extracted folder in a code editor (e.g., VS Code).

Backend Generator

Configure​

Frontend Configuration​

  • Navigate to Drag-Drop (RFE) folder.
  • Install frontend dependencies by running:
    • npm install
  • This prepares your frontend for local development.

Backend Configuration​

1.Install Docker:

    • Run Docker
      • For Windows
        • Open terminal and run the following command to start Keycloak:
          docker run -p 4000:8080 -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN_PASSWORD=admin quay.io/keycloak/keycloak:latest start-dev
      • For Linux
        • Open terminal and run the following command to start Keycloak:
          • -curl https://quay.io/v2/ - sudo docker run -p 4000:8080 \ -e KEYCLOAK_ADMIN=admin \ -e KEYCLOAK_ADMIN_PASSWORD=admin \ quay.io/keycloak/keycloak:latest start-dev
      • Keycloak will be available at http://lozcalhost:4000

3. Configure Keycloak:

    • Log in to Keycloak using:
  • Username: admin
  • Password: admin
    • Go to Manage Realm.
      • Create a realm named myRealm.
    • Go to Clients.
      • Create a client by entering the Client ID as “myClient” and press next.
      • Enable Client authentication and authorization and press next.
      • Set Valid redirect URIs: http://localhost:8000/auth/callback> and click save.
    • Go to the Credentials tab of the client and copy the client secret (which will be used after MySQL installation).
    • Enable user registration by going to:
      • Realm Settings → Login → Enable "User Registration"

4. Install MySQL:

Method 1: Use MySQL with Docker (mostly preferred)

    • Open terminal.
      • For Windows
        • Run the following command to start a MySQL container:

docker run --name mysql-container -e MYSQL_ROOT_PASSWORD=root -e MYSQL_DATABASE=visual_app_design -p 3306:3306 -d mysql:latest

      • If you are facing an error regarding the port number here, please do the following things.
        • Maybe local mysql be running and using port 3306.
        • Go to services->mysql and stop mysql if it is running and then run the above docker command
        • If you are facing an error where it says a container with the same name already exists.
          • Delete the existing mysql-container and then again run the mysql container creation docker command.
      • For Linux
        • Run the following command to start a MySQL container:

docker run --name mysql-container \ -e MYSQL_ROOT_PASSWORD=root \ -e MYSQL_DATABASE=visual_app_design \ -p 3306:3306 \ -d mysql:latest

      • If you are facing an error regarding the port number here, please do the following things.
        • Check what is running on port 3306:
          • sudo lsof -i:3306
        • To remove or stop whatever is using the port on a permanently- sudo systemctl stop mysql

sudo systemctl disable mysql

This stops MySQL service immediately.
It also prevents MySQL from starting automatically at boot.

Now run the docker command again, it will work.

      • If you are facing an error where it says a container with the same name already exists.
        • Either remove the container by running docker rm mysql-container and then run the mysql container creation docker command
        • Or, if u had previously already created a mysql-container, run this command to stop it: docker stop mysql-container
        • Run this command to start it again: docker start mysql-container
      • The container and the database would have been created.
      • The container will:
        • Set root password to root
        • Automatically create a database named visual_app_design
      • MySQL is connected using the following details:
        • Host: localhost
        • Port: 3306
        • Username: root
        • Password: root
        • Database: visual_app_design
      • To cross check, run the command-
        • For Windows
          • docker exec -it mysql-container mysql -u root -p, enter the password as - root
        • For Linux
          • sudo docker exec -it mysql-container mysql -u root -p, enter the password as - root
        • Then type show databases; you will find visual_app_design listed

Method 2: Install MySQL (Installer)

    • Download and install MySQL from: https://dev.mysql.com/downloads/installer/> complete the necessary steps of installation.
      • Start the MySQL Server using the installed MySQL Workbench or system service.
      • Open your MySQL shell or terminal and run:
        • mysql –u root –p
        • Enter password as local password (default password)
        • Now create visual-app-design database using command CREATE DATABASE visual-app-design;

5. Update Environment Variables in Backend:

    • Navigate to Drag-Drop(RBE) folder
      • Open the .env file and add/update the following:

DATABASE_URL="mysql://<username>:<password>@localhost:3306/visual-app-design" KEYCLOAK_URL=http://localhost:4000
REALM=myRealm
CLIENT_ID=myClient
CLIENT_SECRET= <paste client secret here>
REDIRECT_URI=http://localhost:8000/auth/callback Note: Whenever a new client is created, the client id changes, so copy it from keycloak and paste it <client secret> in the code

Use default username and password which is set during MySQL installation i.e. root and root respectively

6. Configure Prisma for the Database (run these commands in Drag-Drop(RBE))

    • If Prisma schema exists, run:
  • npx prisma db pull
    • If starting fresh, run:
  • npx prisma generate
  • npx prisma migrate dev --name init
  • Note: Check if the prisma and prisma/client are in same version (see package.json of Drag-Drop(RBE)), if not then update them individually
    • This sets up the tables inside the visual_app_design database.

7. Install Backend Dependencies:

    • run:
  • npm i --force
  • If getting error related to prisma version,
    • Then update prisma and client and make sure they are of same version.

Backend Generator configuration​

  • Open RASP-Platform in intellij and generate JAR using “mvn install” command.
  • create client in in keycloak
    • After Creating client do some configurations as shown in bellow screen shots

  • Go to Service account roles and configure like shown in screen shot
    • Click on Assign role and select client role,assign all permissions shown in screen shot
    • open backend generator application(rasp-rbac) and open application.yml make changes like shown in below screen shot
    • In this screen shot “new” in some api endpoints is realm name replace it with your realm name
    • Replace clientId and client secret
    • Replace project_path ,which is where your backend generating app is running which is (rasp_rbac) and replace generate_resource_path where you want to generate the project
  • MongoDB
  • Connect MongoDB with port 23017 using command:
    • mongod –-port 23017 –-dbpath “<MongoDB path>”
    • <MongoDB path>: Create a folder anywhere (usually in C drive in windows) and give this path in the above command.
  • If getting and error in running the above command, then change default MongoDB port number to 23017
    • Steps to edit the MongoDB Configuration File. The configuration file is usually located at:
      • sudo rm /tmp/mongodb-23017.sock
      • Windows: C:\ProgramFiles\MongoDB\Server\<version>\bin\mongod.cfg
  1. Open the file in a text editor with administrative privileges.
  2. Find the net section under network interfaces section.
  3. Change the port value:
    net:
    port:23017
  4. Save the file

Restart MongoDB Service

  • Linux(systemd): sudo systemctl restart mongod
  • macOS (Homebrew): brew services restart mongodb-community
  • Windows
    • Open Services
    • Find MongoDB Server
    • Right-click->Restart

Or use PowerShell:

    • Restart-Service -Name "MongoDB"
  • Verify the Port Change
    • Linux/macOS: netstat -tulnp | grep 23017
    • Windows: mongo --port 23017

Fig –1: - RASP Components

Run – Designer FE, Designer BE, Backend Generator​

This section outlines how to start the frontend, backend, and backend generator components of the RASP Designer platform.

Run Frontend (Designer FE)​

  • Change directory to rasp-fe/Drag-Drop(RFE):
    • Install Dependency
      • npm i
      • Note: If you are getting error then run: npm i –force
      • (Linux) If you are getting error w.r.t permissions: sudo npm i -- force
    • Start
      • npm start
    • Access it at:

Run Backend (Designer BE)​

  • Change directory to rasp-fe/Drag-Drop(RBE):
    • Install Dependency
      • npm i
      • Note: If you are getting error then run: npm i –force
      • (Linux) If you are getting error w.r.t permissions: sudo npm i – force.
    • Start
      • npm run dev
    • Backend will run at:

Run Backend Generator​

Once the properties are configured and MongoDB is running:

  • Open the rasp_backend app(rasp_rbac) project in your IDE.
  • Run Application.java file
    • This file is present at:

src/main/java/com/rasp/app/Application.java

  • The backend generator will now be ready to receive instructions from the Designer UI and generate backend applications to the specified generate_resource_path.
  • The Backend Generator is triggered when the “Generate Resource” button is clicked on the Data tab.
  • It automatically:
    • Generates a Spring Boot backend project.
    • Provides full CRUD functionality based on the designed resources.

TO USE THE RASP

  • Make sure mysql container is running in docker on port 3306 (if ports are not manually updated).
  • Make sure MongoDB is running on port 23017 (if ports are not manually updated).
  • Make sure keycloak container is running on http://localhost:4000- To run RASP-Designer:
    • Prisma and prisma/client version should be the same.
    • Navigate to Drag-Drop(RBE)
    • Open .env
    • Database URL should be mysql://root:root@localhost:3306/visual_app_design if you are using docker container to run mysql, else replace it with your local mysql password.
    • Newly generated client secret must match the one in the .env file
    • Then you can type npm start by opening integrated terminal in Drag-Drop(RBE)
    • It should run on port http://localhost:8000 - Then you can type npm start by opening integrated terminal in Drag-Drop(RFE)
    • It should run on port http://localhost:3000- To generate jar for RASP-PLATFORM
    • Make sure you have **jdk 21 installed (**open jdk version)
    • Navigate to rasp-platform
    • Open main menu, and click on open project structure
    • Under sdk, make sure u choose “21 java 21.0.7”, if not available make sure to download it on your system.
  • To Run RASP-SAMPLE
    • Run rasp backend i.e. application .java

General errors encountered:

  • Not getting pop-up for the save&download for selecting path, the code works only in chrome and not on mozilla firefox due to showDirectoryPicker() usage.
  • After running the platform and sample, the user gets prompted to enter credentials, which is later causing user conflicts after downloading the react app and generator resource from the rasp designer.
  • Peer dependency errors are usually due to version conflicts, check the version of the software and update them accordingly.
  • Ensure java jdk 21 is being used. Check this by going to the menu->Project Structure->under SDK->choose open jdk
  • Either run mySQL on docker or run locally, do not run them simultaneously.
  • If error occurs due to permission, use sudo before every command and for password, use your local password
  • While running flightbooking.java we are getting a prompt to register the user in terminal. And if used, we get database error due to the unique key constraint so do not register through the terminal.

Logging In & Navigation​

  • Open http://localhost:3000> in a browser.
  • You’ll be redirected to the Keycloak login screen:
    • New users must register an account using the Register option.
    • Existing users can log in with their credentials.
  • On successful login, you're taken to the Dashboard:
    • View existing applications
    • Create a new application by entering a name and clicking Cr.eate
  • After creating an app, you will navigate to the design workspace.

Overview of Designer UI​

Once inside the workspace, the RASP Designer interface is divided into tabs, where each tab serves as a specific aspect of the app development workflow.

  • Tab Navigation
    1. Data – For creating and managing resource structures and definitions.
    2. Layout – For designing the user interface using visual building blocks.
    3. Users – For configuring user access and permissions. (to be implemented)

LAYOUT​

Left Panel: Components & Page Structure

  • Components Tab:
    • Searchable list of standard UI elements: Input, Text, Button, Navbar, Container, etc.
    • Drag components directly to the canvas to build your layout.
  • Page Structure Tab:
    • Displays a hierarchical view of all components on the current screen.
    • Hovering on each component highlights the component on canvas.
    • Allows to select components for editing properties and deleting.

Center Panel: Canvas

  • Visual workspace where you design and structure the layout.
  • Components dragged from the left appear here.
  • Provides a real-time representation of the screen being built.

Right Panel: Configuration & Styling

  • Displays the settings for the currently selected component.
  • Allows modification of properties depending on the component selected like:
    • For Input
      • Placeholder
  • For Add text
  • Text
  • For Navbar
    • Edit navLogo text and items
    • Styling options like Bootstrap classes or custom CSS.

Top Bar: Navigation & Actions

  • App & Page Dropdowns: Manage applications and pages (App Name, Page Name)
  • Actions Menu (top-right): Additional operations like Save, Preview, and Generate Code.

DATA​

Left Panel: Data Structure

  • Resources List Tab:
    • Displays a list of all user-created data resources.
    • Users can create, edit, and delete these entities.
  • Enum List Tab:
    • Shows all Enum values created by the user.
    • Users can create, edit, and delete these entities.

Center Panel:

  • Shows tabular representations of the selected resource entries.
  • Provides features like:
    • Pagination
    • Add row-level data

Top-Right Panel:

  • Includes a "Generate Resources" button to generate the resource using the RASP platform.