Setup the Frontend

Installation

You can get the latest code from the Sunbird RC UI Repository https://github.com/Sunbird-RC/sunbird-rc-ui

This is an Angular 8 project, and you need to install the dependencies, and run the project.

Steps to follow

  1. Make sure your back-end services are up and running

  2. Keycloak Configuration changes:

  3. Clone the Sunbird RC UI Repository https://github.com/Sunbird-RC/sunbird-rc-ui

  4. First step is to create a ui-config file in the directory sunbird-rc-ui/src/assets/config. We have provided a sample-ui-config in the same directory as a reference.

  5. Sunbird-RC UI is a template that can be used to customise your UI application based on your use case. To do that you have to make changes in the UI-config and the angular application accordingly. You can refer Configuration section below to make the necessary changes based on your use case.

  6. Commands to run :

yarn

npm start
  1. If yarn is not available on you PC you can also use npm install.

  2. Once the project is up and running - you can access it at http://localhost:4200.

Configuration

The application needs to be configured with the appropriate fields to be able to use it. Example configuration is provided in the src/examples folder.

Environment Config

Forms

The forms.json needs to be placed in src/assets/config. This file defines the schema for various forms used, along with the fields for each. The form rendering is based on the formly.dev library, and the forms.json is a small wrapper on top of the formly schema.

In this file forms is an array with key/value pairs. They key is the code / slug of the form which is used to access the form. Eg: if the key for a form is employee-signup that form can be accessed via /forms/employee-signup. Each form definition will have the below fields -

fieldsets

Form grouping:

You can change the layout of form like add multiple columns in single row add panel using below configuration in form.json file.

Here is example for,

```
{
  "teacher-setup": {
    "api": "/Teacher",
    "type": "entity",
    "fieldsets": [
      {
        "definition": "Teacher",
        "fields": [
          {
            "name": "contactDetails",
            "formclass": " row form-div",
            "class": "col-6"
          },
          {
            "name": "identityDetails",
            "wrappers": [
              "panel"
            ],
            "children": {
              "definition": "IdentityDetails",
              "title": true,
              "formclass": " row form-div line",
              "fields": [
                {
                  "name": "fullName",
                  "required": true,
                  "class": "col-6",
                }
              ]
            }
          }
```

fields

Layouts

The layouts.json is used to define how the public and private profile pages look like. For each entity in Sunbird backend, a layout file should be defined with the fields and the order in which they should display.

In this file layouts is an array with key/value pairs. They key is the code / slug of the layout page which is used to access the form. Eg: if the key for a layout is employee-profile that page can be accessed via /profile/employee-profile. Each layout definition will have the below fields -

blocks

fields

FAQs

Proxy configuration

To avoid CORS issues you can use proxy configuration. Run npm start or ng serve --proxy-config proxy.conf.json. For additional configuration please check proxy.conf.json file.

Hosting the Frontend

The frontend may be hosted any of the below ways

  • As a container. You may create an image with the angular build files.

  • On a VM

  • In blob storage (eg: S3, with a CDN in front)

Last updated

Copyright (c) 2023 EkStep Foundation under MIT License