localhost to env (#35)

* localhost to env

* atlas config

* refactor config.ts

* fix login

backend/.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .env
+.env.prod
 dist

backend/src/config.ts

@@ -1,13 +1,28 @@
 import dotenv from "dotenv";
 
-dotenv.config();
-
-export const PORT: number = parseInt(process.env.PORT || "8080", 10);
-export const MONGODB_URI: string =
-  process.env.MONGODB_URI || "mongodb://localhost:27017/suriya";
-export const API_VERSION: string = process.env.API_VERSION || "1.5.5";
-export const PASSPORT_SECRET: string = "nodeauthsecret";
-export const config = {
+dotenv.config({});
+
+const baseConfig = {
+  PORT: parseInt(process.env.PORT || "8080", 10),
+  API_VERSION: process.env.API_VERSION || "1.5.5",
+  PASSPORT_SECRET: "nodeauthsecret",
   jwtSecret: "JWT Secret",
   jwtSession: { session: false },
 };
+let envConfig;
+switch (process.env.PROD_ENV) {
+  case "prod":
+    envConfig = {
+      MONGODB_URI: process.env.MONGODB_URI_PROD,
+    };
+    break;
+  default:
+    envConfig = {
+      MONGODB_URI:
+        process.env.MONGODB_URI || "mongodb://localhost:27017/suriya",
+    };
+}
+
+const config = { ...baseConfig, ...envConfig };
+
+export default config;

backend/src/controller/accountController.ts

@@ -1,10 +1,9 @@
 import { Request, Response } from "express";
 import { UserModel } from "../models/Users";
 import jwt from "jwt-simple";
-import { config } from "../config";
+import config from "../config";
 import mongoose from "mongoose";
 import { Status } from "../models/Status";
-import { API_VERSION } from "../config";
 
 export default {
   login: async (req: Request, res: Response) => {
@@ -61,7 +60,7 @@ export default {
       res.json({
         message: "Status retrieved successfully",
         status: { db: dbStatus },
-        api_version: API_VERSION,
+        api_version: config.API_VERSION,
         user: {
           username,
           id: _id,

backend/src/db.ts

@@ -1,13 +1,13 @@
 import mongoose from "mongoose";
-import { PORT, MONGODB_URI, API_VERSION } from "./config";
+import config from "./config";
 import { Status } from "./models/Status";
 
 const connectToDB = async () => {
   try {
-    const instance = await mongoose.connect(MONGODB_URI);
+    const instance = await mongoose.connect(config.MONGODB_URI);
     console.log("Connected to MongoDB");
 
-    const status = new Status({ db: true, version: "1.0.0" });
+    const status = new Status({ db: true, version: config.API_VERSION });
     await Status.createCollection();
 
     const session = await instance.startSession();

backend/src/index.ts

@@ -2,7 +2,7 @@ import express, { Request, Response } from "express";
 import bodyParser from "body-parser";
 import cors from "cors";
 import connectToDB from "./db";
-import { PORT, PASSPORT_SECRET } from "./config";
+import config from "./config";
 import passport from "passport";
 import { Strategy as LocalStrategy } from "passport-local";
 import { UserModel } from "./models/Users";
@@ -31,7 +31,7 @@ app.get("/corstest", (req: Request, res: Response) => {
 
 app.use(
   session({
-    secret: PASSPORT_SECRET,
+    secret: config.PASSPORT_SECRET,
     resave: false,
     saveUninitialized: false,
   })
@@ -48,6 +48,6 @@ app.use("/", statusRoutes);
 app.use("/", linkRoutes);
 
 //Express-Server
-app.listen(PORT, () => {
-  console.log(`Server is running on port ${PORT}`);
+app.listen(config.PORT, () => {
+  console.log(`Server is running on port ${config.PORT}`);
 });

backend/src/middleware/auth.ts

@@ -5,7 +5,7 @@ import {
 } from "passport-jwt";
 import passport from "passport";
 import { UserModel, User } from "../models/Users";
-import { config } from "../config";
+import config from "../config";
 
 const jwtOptions: StrategyOptions = {
   //Authorization: Bearer in request headers

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)