Update vue3 boilerplate

.env

@@ -1,5 +1,5 @@
 EXTENSION_API_KEY=<api_key>
 EXTENSION_API_SECRET=<api_secret>
 EXTENSION_BASE_URL=<base_url>
-EXTENSION_CLUSTER_URL="https://api.fynd.com"
-PORT=8080
+BACKEND_PORT=8080
+FRONTEND_PORT=8081

.github/workflows/call_test_cases.yml

@@ -0,0 +1,40 @@
+name: Run test cases
+
+on: [pull_request, push]
+
+jobs:
+  run-test-cases:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [
+          ubuntu-latest, 
+          windows-latest,
+          macos-latest, 
+          ]
+        node-version: [16.x, 18.x, 20.x]
+
+    steps:
+    - name: Get branch name
+      shell: bash
+      run: echo "##[set-output name=branch;]$(echo ${GITHUB_REF#refs/heads/})"
+      id: get_branch
+
+    - uses: actions/checkout@v2
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install packages and run tests for node
+      run: |
+        npm install
+        npm run test
+
+    - name: Coveralls (Uploading test report)
+      if: ${{ steps.get_branch.outputs.branch == 'main' }}
+      uses: coverallsapp/github-action@main
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -21,10 +21,16 @@ pnpm-debug.log*
 *.sln
 *.sw?
 
-/dist
+frontend/dist
+
 
 # ignore snapshots
 __snapshots__/
 
 # ignore coverage
-coverage/
+coverage/
+
+# ignore coverage_output.json
+coverage_output.json
+#SQLite DB
+session_storage.db

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 frontend && npm install && npm run build
+CMD ["npm", "run", "start:prod"]

README.md

@@ -1,24 +1,105 @@
-# groot
 
-## Project setup
+# Build a Fynd Extension using node.js + vue.js(vue3)
+
+[![Coverage Status][coveralls-badge]]([coveralls-url])
+
+This project outlines the development process for a Fynd extension that displays product listings for a company and its associated applications. By following this guide, you'll be able to set up the development environment, build the extension locally, and understand the testing procedures.
+
+## 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 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.
+* 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
+```
+Using npm:
 ```
 npm install
 ```
 
-### Compiles and minifies for production
+**Install frontend dependency**
+
+Using yarn:
+```
+yarn install --cwd ./frontend
+```
+Using npm:
+```
+npm install --prefix ./frontend
+```
+
+
+### 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  
+
+> Before visiting partners panel URL provided by preview-url command you need to hit below command in new terminal
+
+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 build
+node start-dev.js
 ```
 
-### Lints and fixes files
+### Build for production deployment
+Build frontend.
+
+Using yarn:
+```
+cd frontend && yarn run build
 ```
-npm run lint
+Using npm:
 ```
+cd frontend && npm run build
+```
+
+
+### Backend API Proxying
+
+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.
 
-### start server
+### Proxy Configuration
+
+The Vite development server uses the following proxy configuration to direct API requests:
 ```
-npm start
+const proxyOptions = {
+  target: `http://127.0.0.1:${process.env.BACKEND_PORT}`,
+  changeOrigin: false,
+  secure: true,
+  ws: false
+}
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+### Database Configuration
+
+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=main&&kill_cache=1
+[coveralls-url]: https://coveralls.io/github/gofynd/example-extension-javascript?branch=main