From c4fbed1dc362e1148134c4b80f1c94330ee907b3 Mon Sep 17 00:00:00 2001
From: ma-silva <mark_silva@outlook.com>
Date: Fri, 5 May 2023 15:09:16 +0800
Subject: [PATCH] REFACTOR: prod dist package and dist

---
 .gitignore                   |  2 +
 README.md                    | 89 ++++++++++++++++++++++++++++++++----
 package.json                 |  1 +
 src/components/SearchNav.vue | 13 +++++-
 4 files changed, 94 insertions(+), 11 deletions(-)

diff --git a/.gitignore b/.gitignore
index 38adffa..fa8ae35 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,8 +11,10 @@ node_modules
 .DS_Store
 dist
 dist-ssr
+server-dist
 coverage
 *.local
+.env
 
 /cypress/videos/
 /cypress/screenshots/
diff --git a/README.md b/README.md
index d1b9652..89b8b40 100644
--- a/README.md
+++ b/README.md
@@ -10,41 +10,112 @@ This application is used to explore OBP APIs and interact with the data and serv
 ## Development Project Setup
 
   * Setup your .env (see .env.example)
-  * Symlink OBP-TypeScript (see https://github.com/OpenBankProject/OBP-TypeScript)
+
+##### Install dependencies
 
 ```sh
 yarn install
 ```
+or
+```sh
+npm install
+```
 
-### Compile and Hot-Reload for Development
+##### Compile and Hot-Reload for Development
 
 ```sh
 yarn dev
 ```
-
-### Compile and Minify for Production
-
+or
 ```sh
-yarn build
+npm dev
 ```
 
-### Run Unit Tests with [Vitest](https://vitest.dev/)
+##### ~~Run Unit Tests with [Vitest](https://vitest.dev/)~~
+
+<strike>
 
 ```sh
 yarn test:unit
 ```
+</strike>
 
-### Lint with [ESLint](https://eslint.org/)
+or
+<strike>
+
+```sh
+npm test:unit
+```
+</strike>
+
+
+##### Lint with [ESLint](https://eslint.org/)
 
 ```sh
 yarn lint
 ```
+or
+```sh
+npm lint
+```
 
-### Format with [Prettier](https://prettier.io/)
+##### Format with [Prettier](https://prettier.io/)
 
 ```sh
 yarn format
 ```
+or
+```sh
+npm format
+```
+
+## Compile and Minify for Production
+
+##### Build the frontend
+
+```sh
+yarn build
+```
+or
+```sh
+npm build
+```
+
+##### Build the backend
+
+```sh
+yarn build-server
+```
+or
+```sh
+npm build-server
+```
+
+##### Start the backend server
+```sh
+your-absolute-path-to-server-dist> node app.js
+```
+
+##### Nginx deployment
+
+```config
+server {
+    # Frontend
+    location / {
+        root    /your_absolute_path_to_dist/dist;
+        try_files $uri $uri/ /index.html;
+    }
+    
+    # Proxy API
+    location /api {
+        proxy_pass http://localhost:8085;
+    }
+}
+```
+
+```sh
+nginx -s reload //Restart your nginx
+```
 
 
 # LICENSE
diff --git a/package.json b/package.json
index b26b535..12a9dd4 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite & ts-node server/app.ts",
     "build": "run-p build-only",
+    "build-server": "tsc --project tsconfig.server.json",
     "preview": "vite preview",
     "test:unit": "vitest",
     "build-only": "vite build",
diff --git a/src/components/SearchNav.vue b/src/components/SearchNav.vue
index 99cae8a..23109c2 100644
--- a/src/components/SearchNav.vue
+++ b/src/components/SearchNav.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onBeforeMount, onMounted, inject } from 'vue'
 import { Search } from '@element-plus/icons-vue'
+import { useRoute } from 'vue-router'
 
+const route = useRoute()
 const docs = ref({})
 const groups = ref({})
 const sortedKeys = ref([])
@@ -18,8 +20,14 @@ onBeforeMount(() => {
 })
 
 onMounted(() => {
-  const element = document.getElementsByClassName('api-router-link').item(0)
-  element.click()
+  const elements = document.getElementsByClassName('api-router-link')
+  const id = route.params.id
+  for (const element of elements) {
+    if (element.id === id) {
+      element.click()
+      break
+    }
+  }
 })
 
 const sortLinks = (items: any) => {
@@ -99,6 +107,7 @@ const searchEvent = (event) => {
           <RouterLink
             active-class="active-api-router-link"
             class="api-router-link"
+            :id="value"
             :to="{ name: 'api', params: { id: value } }"
             >{{ key }}</RouterLink
           >