REFACTOR: prod dist package and dist

.gitignore

@@ -11,8 +11,10 @@ node_modules
 .DS_Store
 dist
 dist-ssr
+server-dist
 coverage
 *.local
+.env
 
 /cypress/videos/
 /cypress/screenshots/

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

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",

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
           >