Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • W Wiki Home
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Issues 0
    • Issues 0
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Create a new issue
  • Jobs
  • Issue Boards
Collapse sidebar
  • SDK4ED WikiSDK4ED Wiki
  • Wiki Home
  • Wiki
  • Frontend Installation

Frontend Installation · Changes

Page history
Update Frontend Installation authored Dec 18, 2020 by Dimitris Tsoukalas's avatar Dimitris Tsoukalas
Hide whitespace changes
Inline Side-by-side
Frontend-Installation.md
View page @ de8e18a1
The SDK4ED Dashboard is built using React, a JavaScript library for building user interfaces, combined with Material Design for Bootstrap (MDBootstrap), which is considered one of the most popular frameworks for building responsive websites and applications.
The SDK4ED Dashboard is built using [React](https://reactjs.org/), a JavaScript library for building user interfaces, combined with Material Design for Bootstrap ([MDBootstrap](https://mdbootstrap.com/docs/react/)), which is considered one of the most popular frameworks for building responsive websites and applications.
Keycloak is used for the user management of the SDK4ED dashboard. Keycloak is an open source identity and access management solution that provides a single-sign on way of authentication. This means that the application (SDK4ED dashboard) does not need to handle login/logout, user accounts etc. All these are handled directly by Keycloak.
[Keycloak](https://www.keycloak.org/) is used for the user management of the SDK4ED dashboard. Keycloak is an open source identity and access management solution that provides a single-sign on way of authentication. This means that the application (SDK4ED dashboard) does not need to handle login/logout, user accounts etc. All these are handled directly by Keycloak.
Project management functionalities are handled by a project management API developed in ASP.NET Core 2.0 and a PostgreSQL that acts as the projects’ object-relational DB system. Through the project management API it is possible to perform Create Read Update Delete (CRUD) operations such as list projects, create new project, update project etc.
More details on User and Project Management functionalities of the SDK4ED Dashboard can be found in (User-Project-Management)[User-Project-Management] section.
- **Step 1**: Clone the latest SDK4ED Dashboard version that can be found in the present Gitlab repository and navigate to the root directory.
- **Step 2**: To deploy the application you have to first install all the dependencies used. Open cmd and run the following command:
```bash
npm install
```
- **Step 3**: Next, you must create an empty `.env` file in the root directory of the application. Then, copy the contents of the `.env-default` file (also found in root directory) inside the `.env` file. The `.env` file contains all environment variables that hold host configurations for each toolbox, so you should modify environment variables accordingly. Remember to restart the application each time you modify this file.
- **Step 4**: Finally, you can start the server and a web page should open on your favorite browser. Open cmd and run the following command:
- **Step 4**: Finally, you can start the SDK4ED Dashboard server and a web page should open on your favorite browser. Open cmd and run the following command:
```bash
npm start
```
\ No newline at end of file
Clone repository
  • Advanced
  • Architectural Toolbox Description
  • Architectural Toolbox Front End
  • Architectural Toolbox Home
  • Architectural Toolbox Installation
  • Architectural Toolbox Usage
  • Decision Support Toolbox Description
  • Decision Support Toolbox Front end
  • Decision Support Toolbox Installation
  • Decision Support Toolbox Usage
  • Decision Support Toolbox
  • Energy Toolbox Description
  • Energy Toolbox Front end
  • Energy Toolbox Installation
  • Energy Toolbox Usage
View All Pages