localhost to env

frontend/.gitignore

@@ -13,7 +13,7 @@ dist
 dist-ssr
 coverage
 *.local
-
+.env
 /cypress/videos/
 /cypress/screenshots/
 

frontend/cypress.config.ts

@@ -3,6 +3,6 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
   e2e: {
     specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
-    baseUrl: 'http://localhost:4000'
+    baseUrl: process.env.CYPRESS_BASE_URL
   }
 })

frontend/cypress/cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

frontend/cypress/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

frontend/cypress/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

frontend/cypress/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

frontend/cypress/e2e/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["./**/*", "../support/**/*"],
   "compilerOptions": {
+    "baseUrl": "./",
     "isolatedModules": false,
     "target": "es5",
     "lib": ["es5", "dom"],

frontend/env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

frontend/package.json

@@ -4,16 +4,18 @@
   "private": true,
   "scripts": {
     "build": "run-p type-check build-only",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run --e2e",
     "test:unit": "vitest",
-    "test:e2e": "start-server-and-test preview http://localhost:4000 'cypress run --e2e'",
+    "test:e2e": "start-server-and-test preview  'cypress run --e2e'",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "build-only": "vite build",
     "build-storybook": "storybook build",
-    "dev": "vite",
+    "dev": "vite ",
     "format": "prettier --write src/",
-    "preview": "vite preview --host --port 4000",
+    "preview": "vite preview --host ",
     "storybook": "storybook dev -p 6006",
-    "test:e2e:dev": "start-server-and-test 'vite dev --port 4000' http://localhost:4000 'cypress open --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --host' $VITE_DEV_SERVER_URL 'cypress open --e2e'",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
   },
   "dependencies": {

frontend/src/components/BasisHeader.vue

@@ -25,6 +25,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import { userSessionStore } from '@/store/session'
+import { API_URL } from '@/utils/config.ts'
 import axios from 'axios'
 export default defineComponent({
   name: 'Header',
@@ -36,7 +37,7 @@ export default defineComponent({
   methods: {
     async logout() {
       try {
-        const response = await axios.post('http://localhost:8080/logout')
+        const response = await axios.post(API_URL + '/logout')
         this.sessionStore.logout()
       } catch (error) {
         console.error(error)

frontend/src/components/BasisLogin.vue

@@ -34,6 +34,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { userSessionStore } from '@/store/session'
+import { API_URL } from '@/utils/config.ts'
 import axios from 'axios'
 
 export default defineComponent({
@@ -46,16 +47,17 @@ export default defineComponent({
 
   data() {
     return {
-      email: '', //'[email protected]',
-      password: '', //'password1234',
+      email: '[email protected]',
+      password: 'password1234',
       errorMessage: ''
     }
   },
 
   methods: {
     async login() {
       try {
-        const response = await axios.post('http://localhost:8080/login', {
+        console.log('API URL:', API_URL)
+        const response = await axios.post(API_URL + '/login', {
           username: this.email,
           password: this.password
         })

frontend/src/components/CreateLink.vue

@@ -29,7 +29,7 @@
 <script lang="ts">
 import axios from 'axios'
 import { defineComponent } from 'vue'
-
+import { API_URL } from '@/utils/config.ts'
 interface Data {
   url: string
   success: boolean
@@ -57,7 +57,7 @@ export default defineComponent({
           return
         }
         const payload = { url: this.url, path: this.path }
-        const response = await axios.post('http://localhost:8080/link', payload)
+        const response = await axios.post(API_URL + '/link', payload)
 
         if (!response) {
           throw new Error('Network response was not ok')

frontend/src/components/EditLink.vue

@@ -22,6 +22,7 @@
 <script lang="ts">
 import axios from 'axios'
 import { defineComponent } from 'vue'
+import { API_URL } from '@/utils/config'
 
 interface Data {
   url: string
@@ -57,7 +58,7 @@ export default defineComponent({
     async loadLinkData() {
       console.log(`Loading data for ID: ${this.id}`)
       try {
-        const response = await axios.get(`http://localhost:8080/link/${this.id}`)
+        const response = await axios.get(API_URL + `/link/${this.id}`)
         console.log(response)
         if (response.data) {
           this.url = response.data.url
@@ -79,7 +80,7 @@ export default defineComponent({
         path: this.path
       }
       try {
-        const response = await axios.put(`http://localhost:8080/link/${this.id}`, payload)
+        const response = await axios.put(API_URL + `/link/${this.id}`, payload)
 
         if (response && response.data) {
           alert('Link updated succesfully')

frontend/src/components/LinkList.vue

@@ -75,7 +75,7 @@
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue'
 import axios from 'axios'
-
+import { API_URL } from '@/utils/config.ts'
 interface LinkRow {
   _id: string
   url: string
@@ -125,7 +125,7 @@ export default defineComponent({
     async fetchLinks() {
       console.log('Stored token:', localStorage.getItem('access_token'))
       try {
-        const response = await axios.get('http://localhost:8080/link')
+        const response = await axios.get(API_URL + '/link')
 
         console.log('Response data:', response.data)
         this.rows = response.data.sort(
@@ -138,7 +138,7 @@ export default defineComponent({
     async deleteRow(rowToDelete: LinkRow) {
       if (confirm('Are you sure you want to delete this link?'))
         try {
-          const response = await axios.delete(`http://localhost:8080/link/${rowToDelete._id}`)
+          const response = await axios.delete(API_URL + `/link/${rowToDelete._id}`)
           console.log(this.rows)
           if (response.status === 200) {
             this.rows = this.rows.filter((row) => row._id !== rowToDelete._id)

frontend/src/store/link.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import router from '@/router/index'
 import axios from 'axios'
-
+import { API_URL } from '@/utils/config'
 interface LinkRow {
   _id: string
   url: string
@@ -27,7 +27,7 @@ export const useLinkStore = defineStore({
     async fetchLinks() {
       console.log('Stored token:', localStorage.getItem('access_token'))
       try {
-        const response = await axios.get('http://localhost:8080/link')
+        const response = await axios.get(API_URL + '/link')
 
         console.log('Response data:', response.data)
         this.rows = response.data
@@ -39,7 +39,7 @@ export const useLinkStore = defineStore({
     async deleteRow(rowToDelete: LinkRow) {
       if (confirm('Are you sure you want to delete this link?'))
         try {
-          const response = await axios.delete(`http://localhost:8080/link/${rowToDelete._id}`)
+          const response = await axios.delete(API_URL + `/link/${rowToDelete._id}`)
           console.log(this.rows)
           if (response.status === 200) {
             this.rows = this.rows.filter((row) => row._id !== rowToDelete._id)

frontend/src/utils/config.ts

@@ -0,0 +1,3 @@
+const env = import.meta.env
+
+export const API_URL = env.VITE_API_URL

frontend/src/utils/cypress.config.ts

@@ -0,0 +1 @@
+baseUrl: process.env.CYPRESS_BASE_URL

frontend/test/test.js

@@ -0,0 +1,2 @@
+const env = process.env
+console.log(env.USER)

frontend/tsconfig.node.json

@@ -5,7 +5,8 @@
     "vitest.config.*",
     "cypress.config.*",
     "nightwatch.conf.*",
-    "playwright.config.*"
+    "playwright.config.*",
+    "cypress/e2e/cypress.config.ts"
   ],
   "compilerOptions": {
     "composite": true,