Skip to main content

Spring+Vue App

info

Make sure you have followed the installation guide before continuing.

(Optional) Chinese users​

Chinese users may have network access problems, please run first:

export NETWORK_TYPE=china_network

Step1. Create a Spring+Vue App​

Create your application interactively:

hln up spring-vue-hello-world -s spring-vue -i

Input the values one by one according to the prompt:

Which github organization do you want to use(Can be set as personal github id)? (required):

> [organization name or github id, e.g. yni9ht]

Which domain do you want to use?:

> [default: h8r.site]

Then it will start executing the setup instructions. Output looks like:

create-application

Finally, Output looks like:

Heighliner application spring-vue-hello-world is ready! access URL: spring-vue-hello-world.h8r.site

There are 2 services have been deployed:
● spring-vue-hello-world-frontend
● access URL: spring-vue-hello-world.h8r.site
● resource code: https://github.com/ni9ht-org/spring-vue-hello-world-frontend

● spring-vue-hello-world-backend
● access URL: spring-vue-hello-world.h8r.site/api
● resource code: https://github.com/ni9ht-org/spring-vue-hello-world-backend

There are 3 addons have been deployed:
● argocd
● access URL: argocd.h8r.site
● credential: [Username: admin Password: xCb2E0XJ9Frl3D1A]

● prometheus-stack
● access URL: grafana.h8r.site
● credential: [Username: admin Password: prom-operator]
● prometheus URL: prometheus.h8r.site [Username: admin Password: heighliner123!], alertManager URL: alert.h8r.site [Username: admin Password: heighliner123!]

● loki

Congrats! Application is ready!

Step2. (Optional) Set Domain Routing​

  • If you are using h8r.site, you don't have to do anything.

  • If you are using your own domain name, put the following lines into your /etc/hosts:

    127.0.0.1 spring-vue-hello-world.<your-domain>
    127.0.0.1 argocd.<your-domain>
    127.0.0.1 nocalhost.<your-domain>
    127.0.0.1 grafana.<your-domain>
    127.0.0.1 prometheus.<your-domain>
    127.0.0.1 alert.<your-domain>

Step3. Access application​

Vue App​

View your vue app site spring-vue-hello-world.h8r.site

vue-app

SpringBoot App​

View your springBoot app Swagger UI spring-vue-hello-world.h8r.site/api/swagger-ui/index.html#

springboot-app

ArgoCD App​

View your ArgoCD dashboard argocd.h8r.site

argo-cd

Git Repository​

View your git repository in GitHub

git-repo

Monitoring​

View your monitoring dashboard grafana.h8r.site/d/o6mCW9_7k/spring-boot-statistics

Login account in Output:

  ● prometheus-stack
● access URL: grafana.h8r.site
● credential: [Username: admin Password: prom-operator]

grafana-dashboard

Cleanup​

hln down spring-vue-hello-world
  20:02:08  INFO    cmd/down.go:128 delete app spring-vue-hello-world...
20:02:08 INFO cmd/down.go:128 delete app loki...
20:02:08 INFO cmd/down.go:128 delete app prometheus-stack...
20:02:08 INFO cmd/down.go:145 delete repo spring-vue-hello-world-backend...
20:04:01 INFO cmd/down.go:145 delete repo spring-vue-hello-world-deploy...
20:04:08 INFO cmd/down.go:145 delete repo spring-vue-hello-world-frontend...