Setup for HMR

app/.env → .env

@@ -1,4 +1,5 @@
 EXTENSION_API_KEY=<api_key>
 EXTENSION_API_SECRET=<api_secret>
 EXTENSION_BASE_URL=<base_url>
-PORT=8080
+BACKEND_PORT=8080
+FRONTEND_PORT=8081

.github/workflows/call_test_cases.yml

@@ -1,6 +1,6 @@
 name: Run test cases
 
-on: pull_request
+on: [pull_request, push]
 
 jobs:
   run-test-cases:
@@ -29,20 +29,13 @@ jobs:
         node-version: ${{ matrix.node-version }}
 
     - name: Install packages and run tests for node
-      working-directory: ./app
       run: |
         npm install
         npm run test
 
-    # - name: Install packages and run tests for vue
-    #   working-directory: ./src
-    #   run: |
-    #     npm install
-    #     npm run test
-
     - name: Coveralls (Uploading test report)
-      #if: ${{ steps.get_branch.outputs.branch == 'master' || steps.get_branch.outputs.branch == 'fpco-38359-test-case-setup' }}
-      uses: coverallsapp/github-action@master
+      if: ${{ steps.get_branch.outputs.branch == 'main' }}
+      uses: coverallsapp/github-action@main
       with:
         github-token: ${{ secrets.GITHUB_TOKEN }}
         path-to-lcov: ./app/coverage/lcov.info

.gitignore

@@ -21,7 +21,7 @@ pnpm-debug.log*
 *.sln
 *.sw?
 
-/dist
+web/dist
 
 # ignore snapshots
 __snapshots__/
@@ -30,4 +30,4 @@ __snapshots__/
 coverage/
 
 # ignore coverage_output.json
-app/coverage_output.json
+coverage_output.json

Dockerfile

@@ -0,0 +1,9 @@
+FROM node:18-alpine
+EXPOSE 8080
+WORKDIR /app
+COPY ./package.json .
+COPY ./package-lock.json .
+RUN npm install
+COPY . .
+RUN cd web && npm install && npm run build
+CMD ["npm", "run", "start:prod"]

README.md

@@ -1,3 +1,4 @@
+
 # Build a Fynd Extension using node.js + vue.js(vue3)
 
 [![Coverage Status][coveralls-badge]]([coveralls-url])
@@ -6,19 +7,23 @@ This project outlines the development process for a Fynd extension that displays
 
 ## Quick start
 ### Prerequisites
+* You have installed [Node 16.X.X](https://docs.npmjs.com/) or above version.
+* You have fdk-cli installed [install](https://github.com/gofynd/fdk-cli)
 * You have created a [partner account](https://partners.fynd.com).
 * You have created a [development account](https://partners.fynd.com/help/docs/partners/testing-extension/development-acc#create-development-account) and [populated test data](https://partners.fynd.com/help/docs/partners/testing-extension/development-acc#populate-test-data) in it.
-* You’ve installed [Node 16.X.X](https://docs.npmjs.com/) or above version.
 * You have created an [extension](https://partners.fynd.com) in partner panel. if not, you can follow [extension guide](https://partners.fynd.com/help/docs/partners/getting-started/create-extension) to create an extension.
-* You have setup ngrok account to creates a tunnel and updated `EXTENSION_BASE_URL` env variable value to the ngrok URL.
-* Update below environment variable value in `.env` file
-    - EXTENSION_API_KEY:`extension api key`
-    - EXTENSION_API_SECRET: `extension api secret`
-    - EXTENSION_BASE_URL: `ngrok url`
-    - PORT: `port of an application. defaults to 8080`
+* Update below environment variable value in `.env` file, This details you can get from partners panel
+    - EXTENSION_API_KEY:`Extension api key`
+    - EXTENSION_API_SECRET: `Extension api secret`
+
 
 
 ### Project setup
+
+### Install dependencies
+
+**Install backend dependency**
+
 Using yarn:
 ```
 yarn install
@@ -28,93 +33,73 @@ Using npm:
 npm install
 ```
 
-### Start local server
-Starts the local server in watch mode, meaning it will automatically restart when changes are detected.
+**Install frontend dependency**
 
 Using yarn:
 ```
-yarn run start
+yarn install --cwd ./web
 ```
 Using npm:
 ```
-npm run start
+npm install --prefix ./web
 ```
 
-### Serve frontend
-Serves the frontend of the application in watch mode, automatically refreshing when changes are made.
 
-Using yarn:
-```
-yarn run serve
-```
-Using npm:
-```
-npm run serve
-```
+### Local development
+To start development locally you need to start tunnel on `FRONTEND_PORT` defined in .env file to start tunnel you can use `fdk extension preview-url --port  <FRONTEND_PORT>`, it will provide partners panel URL  
 
-### Start local server and serve frontend
-Starts both the local server and serves the frontend in watch mode.
+> Before visiting partners panel URL provided by preview-url command you need to hit below command in new terminal
 
-Using yarn:
-```
-yarn run dev-start
-```
-Using npm:
+This command will start backend and frontend server in watch mode and changes you make locally will be directly visible in partners panel
 ```
-npm run dev-start
+node start-dev.js
 ```
 
-### Build
-Compiles the application for production.
+### Build for production deployment
+Build frontend.
 
 Using yarn:
 ```
-yarn run build
+cd web && yarn run build
 ```
 Using npm:
 ```
-npm run build
+cd web && npm run build
 ```
 
-### Lints and fixes files
-Checks for linting errors and automatically fixes them if possible.
 
-Using yarn:
-```
-yarn run lint
-```
-Using npm
-```
-npm run lint
-```
+### Backend API Proxying
 
-### Testing
-**Test backend**
+When developing your application, the Vite development server is configured to handle API requests through a proxy. This setup forwards API calls to a backend server, specified by the  `BACKEND_PORT` environment variable, ensuring a smooth integration between your frontend and backend during development.
 
-Using yarn
-```
-yarn run test:node
-```
-Using npm
+### Proxy Configuration
+
+The Vite development server uses the following proxy configuration to direct API requests:
 ```
-npm run test:node
+const proxyOptions = {
+  target: `http://127.0.0.1:${process.env.BACKEND_PORT}`,
+  changeOrigin: false,
+  secure: true,
+  ws: false
+}
 ```
 
-**Test Frontend**
+### Database Configuration
 
-Using yarn
-```
-yarn run test:vue
-```
-Using npm
-```
-npm run test:vue
-```
+By default, this template uses an `SQLite` database to store session data. SQLite is sufficient for development purpose only, it may not be suitable for all production scenarios. The best database for your application depends on your data requirements and query patterns.
+
+If your app requires a more robust database solution, you can easily extend the base storage class provided by the `fdk-extension-javascript` library to use a database of your choice for session data. Here are some databases that we support by default:
+
+- SQLite
+- Memory Storage
+- Redis
+
+Feel free to configure and run your preferred database on your server to meet your specific needs.
 
 ### Tech Stack
 1. [fdk-client-javascript](https://github.com/gofynd/fdk-client-javascript): This library contains all the methods to call Fynd platform APIs.
 2. [fdk-extension-javascript](https://github.com/gofynd/fdk-extension-javascript): This library streamlines the setup of authentication for accessing Fynd Platform APIs. It also simplifies the process of subscribing to webhooks for receiving real-time notifications.
 
 
-[coveralls-badge]: https://coveralls.io/repos/github/gofynd/example-extension-javascript/badge.svg?branch=fpco-38359-test-case-setup&&kill_cache=1
-[coveralls-url]: https://coveralls.io/github/gofynd/example-extension-javascript?branch=fpco-38359-test-case-setup
+[coveralls-badge]: https://coveralls.io/repos/github/gofynd/example-extension-javascript/badge.svg?branch=main&&kill_cache=1
+[coveralls-url]: https://coveralls.io/github/gofynd/example-extension-javascript?branch=main

app/index.js → index.js

@@ -3,7 +3,7 @@
 require("dotenv").config();
 require('./sqlite.init');
 const app = require("./server");
-const port = process.env.PORT || 8080;
+const port = process.env.BACKEND_PORT || 8080;
 
 app.listen(port, () => {
     console.log(`Example app listening at http://localhost:${port}`)

app/jest.config.js → jest.config.js

@@ -3,6 +3,7 @@ module.exports = {
     testEnvironment: 'node',
     coverageReporters: ['json-summary', 'lcov'],
     globalTeardown: './__tests__/unit/global/test-teardown-globals.js',
+    testPathIgnorePatterns: ['/web/'],
     setupFiles: ['./jest.init.js'],
     testMatch: [
         '**/__tests__/**/*.spec.[jt]s?(x)',
@@ -23,7 +24,8 @@ module.exports = {
         '!**/index.js',
         "!**/coverage/**",
         "!**/coverage_output.js/**",
-        "!**/coverage_output.json/**"
+        "!**/coverage_output.json/**",
+        "!**/start-dev.js"
     ],
     bail: true
 };

jsconfig.json

@@ -6,7 +6,7 @@
     "moduleResolution": "node",
     "paths": {
       "@/*": [
-        "src/*"
+        "web/*"
       ]
     },
     "lib": [