Add CORS (#277)

Author: Jayprakash-SE

deployment_v2.md renamed to deployment.md

@@ -17,7 +17,7 @@ The **Montage Project** is a web application with two main components:
    - Built with **Clastic**, a Python framework.
    - Uses various Python libraries such as:
      - **SQLAlchemy**: Database interactions.
-     - **mwoauth**: Used for authentication with MediaWiki’s OAuth.
+     - **mwoauth**: Used for authentication with MediaWiki's OAuth.
      - **pymysql**: MySQL driver.
    - Serves the frontend and exposes API endpoints for application functionality.
 
@@ -40,20 +40,32 @@ git clone [email protected]:hatnote/montage.git
 cd montage
 ```
 
-### 2. Start the Frontend Build Watcher
+### 2. Set up the Frontend
 ```bash
 cd frontend
 npm install
-npm run watch:build
 ```
 
-⚠️ **Frontend does not run in dev mode**: `npm run watch:build` above will watch for changes by using `chokidar` command and automatically copied to the backend's `static` and `template` directories. So there will not be any hot reloading. Developers must refresh the browser to see updates.
+### 3. Configure Environment Variables
+```bash
+cp .env.default .env
+```
+
+Edit the `.env` file to match your development environment. By default, it's configured to connect to a locally running backend at `http://localhost:5001`.
+
+### 4. Run the Frontend in Development Mode
+```bash
+npm run dev
+```
+
+This will start the Vite development server with hot module replacement.
 
-Apart from `npm watch:build`, these are other commands:
+Other frontend development commands:
+* `npm run build`: Build for production
 * `npm run lint`: Lint the code
 * `npm run format`: Format the code
 
-### 3. Use the Makefile to start the backend
+### 5. Use the Makefile to start the backend
 * Open a new terminal tab and change directory to root of repo
 * Copy and edit `config.dev.yaml` based on `config.default.yaml`
 * (Optional) In `config.dev.yaml` there is a line for `dev_local_cookie_value`. To get it,
@@ -76,15 +88,16 @@ This will build the docker image for the montage backend and start the container
 * `make logs` : Stream the backend container logs in real-time.
 * `make restart` : Restart the backend container
 
-### 4. Access the Application
-* Open http://localhost:5001 in your browser.
+### 6. Access the Application
+* With development server: Open http://localhost:5173 in your browser (frontend)
+* With backend serving frontend: Open http://localhost:5001 in your browser
 
 The application server runs on localhost port 5001, visit [http://localhost:5001/meta](http://localhost:5001/meta) to see a list
 of valid URL patterns and other details.
 
 Almost all endpoints from backend (except for OAuth and `/static/`) return JSON as long as the proper Accept header is set (done by most libraries) or `format=json` is passed in the query string.
 
-## Project struture (v2 only)
+## Project structure
 ```bash
 ├── DEV.md
 ├── Dockerfile
@@ -105,6 +118,8 @@ Almost all endpoints from backend (except for OAuth and `/static/`) return JSON
 │   ├── jsconfig.json
 │   ├── package-lock.json
 │   ├── package.json
+│   ├── .env.default
+│   ├── .env
 │   ├── public
 │   ├── src
 │   └── vite.config.js
@@ -184,6 +199,8 @@ These provides a detailed explanation of the main components in the **Montage Pr
 - **`src/`**: Source code, including components, routes, and utilities.
 - **`public/`**: Static assets, such as images and global styles.
 - **`vite.config.js`**: Configuration for the Vite build tool.
+- **`.env.default`**: Template for environment configuration.
+- **`.env`**: Local environment configuration.
 
 
 #### Directory: `tools`

dev_v2.md renamed to dev.md

@@ -0,0 +1 @@
+VITE_API_ENDPOINT=http://localhost:5001

frontend/.env.default

@@ -7,7 +7,6 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "watch:build": "chokidar 'src/**/*' -c 'npm run build && cp -r dist/* ../montage/static' --initial",
     "toolforge:build": "export SHELL=/bin/sh && npm run build && cp -r dist/* ../montage/static",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
     "format": "prettier --write src/"

frontend/package.json

@@ -61,9 +61,9 @@ onMounted(() => {
 
       // Order campaigns by open date (more recent at the top)
       coordinatorCampaigns.value.sort((campaign1, campaign2) => {
-        if (campaign1.open_date === campaign2.open_date) {
+        if (campaign1.create_date === campaign2.create_date) {
           return 0
-        } else if (campaign1.open_date < campaign2.open_date) {
+        } else if (campaign1.create_date < campaign2.create_date) {
           return 1
         } else {
           return -1

frontend/src/components/Campaign/AllCampaign.vue

@@ -1,40 +1,33 @@
 import { createI18n } from 'vue-i18n';
 import en from '@/i18n/en.json';
 
-// Initialize with default English messages in case of error
-const messages = { en }; 
+const messages = { en };
 
-// Dynamically load all other messages
-async function loadMessages() {
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages
+});
+
+// Dynamically load additional messages after initialization
+const loadMessages = async () => {
   try {
     const modules = import.meta.glob('./i18n/*.json');
     await Promise.all(
       Object.entries(modules).map(async ([path, importFn]) => {
         const lang = path.replace('./i18n/', '').replace('.json', '');
         if (lang !== 'en' && lang !== 'qqq') {
           const module = await importFn();
-          messages[lang] = module.default;
+          i18n.global.setLocaleMessage(lang, module.default);
         }
       })
     );
+    return i18n;
   } catch (error) {
     console.error('Error loading i18n messages:', error);
+    return i18n;
   }
-}
-
-// Initialize i18n instance
-async function initializeI18n() {
-  try {
-    await loadMessages();
-  } catch (error) {
-    console.error('Error initializing i18n:', error);
-  }
-
-  return createI18n({
-    locale: 'en',
-    fallbackLocale: 'en',
-    messages
-  });
-}
+};
 
-export default initializeI18n;
+export { i18n, loadMessages };

frontend/src/i18n.js

@@ -3,7 +3,7 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
-import initializeI18n from './i18n'
+import { i18n, loadMessages } from './i18n'
 import Toast from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
 
@@ -13,21 +13,21 @@ import ClipLoader from 'vue-spinner/src/ClipLoader.vue'
 import DatePicker from 'vue-datepicker-next'
 import 'vue-datepicker-next/index.css'
 
-(async () => {
-  // Wait for i18n initialization
-  const i18n = await initializeI18n()
-  const app = createApp(App)
+const app = createApp(App)
 
-  app.use(createPinia())
-  app.use(router)
-  app.use(Toast)
-  app.use(i18n)
+app.use(createPinia())
+app.use(router)
+app.use(Toast)
+app.use(i18n) // Use i18n immediately with English locale
 
-  // Global directive
-  app.directive('tooltip', CdxTooltip)
-  app.component('clip-loader', ClipLoader)
+// Global directive
+app.directive('tooltip', CdxTooltip)
+app.component('clip-loader', ClipLoader)
+app.component('date-picker', DatePicker)
 
-  app.component('date-picker', DatePicker)
+app.mount('#app')
 
-  app.mount('#app')
-})()
+// Load additional language messages dynamically
+loadMessages().then(() => {
+  console.log('All language messages loaded');
+});

frontend/src/main.js

@@ -3,11 +3,12 @@ import { useLoadingStore } from '@/stores/loading'
 
 // Create Axios instance for Backend API
 const apiBackend = axios.create({
-  baseURL: '/v1/',
+  baseURL: import.meta.env.VITE_API_ENDPOINT + '/v1/',
   headers: {
     'Content-Type': 'application/json',
     Accept: 'application/json'
-  }
+  },
+  withCredentials: true
 })
 
 // Create Axios instance for Commons API

frontend/src/services/api.js

@@ -9,14 +9,14 @@ export const useUserStore = defineStore('user-store', () => {
 
   function login(userObj) {
     if (!userObj) {
-      window.location =  window.location.origin + '/login'
+      window.location =  import.meta.env.VITE_API_ENDPOINT + '/login'
     }
     user.value = userObj
     isAuthenticated.value = true
   }
 
   function logout() {
-    window.location = window.location.origin + '/logout'
+    window.location = import.meta.env.VITE_API_ENDPOINT + '/logout'
     user.value = null
     isAuthenticated.value = false
     authChecked.value = true

frontend/src/stores/user.js

@@ -12,5 +12,8 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  server: {
+    port: 5173,
   }
 })