How to develop a complete webapp with Vue & Spring Boot & onesait Platform?

Owned by DevPortal Editor (Unlicensed)
13/09/21
3 min read

EN | ES


Intro

In this example, we will explain how to compile and run a project built with the following technologies:

  • Vue (+ UX Components) to develop the Front Layer,
  • Spring Boot to develop REST services accessed from Front Layer and to invoke ontologies,
  • onesait Cloud Platform to model ontologies (entities), security (Realms), dashboards and analytrics.

As an example, we used the Platform Governance Console project, which includes these parts.

The example has been developed using the Platform's Windows Development Environment, that offers all the tools to run a local instance of the Platform and to develop verticals on it. This IDE contains all the technologies needed for this:

  • Java for Platform and Backend development,
  • Maven as the tool to compile the whole project,
  • NPM to compile the Vue project,
  • Eclipse as development IDE for Backend and Platform,
  • Visual Studio Code as Front development IDE,
  • jProfile to profile Backend.

Download code

Let's start!!!

  1. Download ad install the last version of the SDK of the platform as in Guide  /wiki/spaces/DOCT/pages/2283668116
  2. Clone the repository https://cicd.onesaitplatform.com/gitlab/onesait-platform/onesait-governance-console by running git clone on the repo:
    The structure will be:
  3. I download the branch develop with git checkout develop

  4. And I do git pull

    The project has this structure:

    I have this structure under sources:

    including the backend module (Spring Boot) and the frontend module (Vue). The compiling of these two modules is performed from the parent pom.xml, which will compile both the Front and the Back.

Execute it!

  1. From the sources folder I will run npm login to connect to the NPM record and download the UX components for Vue. I provide the data that the CMD asks for  Username: onesaitux Password: OnesaitDesignSystem  Mail: onesaitux@minsait.com
  2. Now I can compile my project. From sources run> mvn clean install
  3. If everything is correct, the project has been compiled. Besides, the Vue.js frontend compilation is compied to backend so that Front and Back can both be run from the Spring Boot application:
  4. I can run the project with >java -jar backend/target/onesait-gov-console-backend-1.0.0-SNAPSHOT-exec.jar

  5. If everything is correct, my application has been deployed in http://localhost:17000/gov-console/