How can node JS communicate with VueJs (appwrite SDK Question)

Question

I'm trying to make users profiles dynamic in appwrite app. I want each user profile page to be accessible to all users so it goes like this (www.appname.com/users/{userid}).

I'm very new to node JS but i managed to install appwrite SDK for node and created a seperate folder for node and when i run the below code in node it gets me the user as expected in the terminal.

const sdk = require("node-appwrite");

// Init SDK
let client = new sdk.Client();

let users = new sdk.Users(client);

client
  .setEndpoint("http://localhost/v1") // Your API Endpoint
  .setProject("myProjectId") // Your project ID
  .setKey(
    "mykey"
  ); // Your secret API key

let promise = users.get("myUserId");

promise.then(
  function (response) {
    console.log(response);
  },
  function (error) {
    console.log(error);
  }
);

But I want to be able to use Vuejs to call out this outcome! I want to be able to use (users.get) from Vue component. How can I make this happen?

here is what I have tried till now: I have created UserService.js file and added the below function to grab users.get from node Js

import users from "../../../api/server";

export async function getUser(userId) {
  let promise = users.get(userId);

  promise.then(
    function (response) {
      console.log(response);
    },
    function (error) {
      console.log(error);
    }
  );
}

And I called it from my VueJS component

<script>
import { getUser } from "../../services/UserService";
export default {
  name: "Profile",
  props: ["id"],
  data() {
    return {
      userprfile: false,
    };
  },
  mounted() {
    this.getUser();
  },
  methods: {
    getUser() {
      getUser(this.id).then((response) => {
        console.log(response);
      });
    },
  },
};
</script>

But it doesn't work

All I want is a way that allows me to use appwrite nodeJS SDK in my vueJS component. I need to be able to pass it the userID and get back the user in VueJS component

---

UPDATE:

The below code works and I can get now retrieve the data from appwrite NodeJS SDK to my browser but the problem is that I want this to be dynamic. I need a way to pass on UserID from vue to NodeJS sdk and retrieve the data.

const express = require("express");
const path = require("path");
const app = express(),
  bodyParser = require("body-parser");
port = 3080;

// place holder for the data

const sdk = require("node-appwrite");

// Init SDK
let client = new sdk.Client();

let users = new sdk.Users(client);

client
  .setEndpoint("http://localhost/v1") // Your API Endpoint
  .setProject("myProjectID") // Your project ID
  .setKey(
    "MySecretApiKey"
  ); // Your secret API key


app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, "../appwrite-app/build")));

app.get("/v1/users", (req, res) => {
  console.log("api/users called!");
  let promise = users.get("userId");
  promise.then(
    function (response) {
      res.json(response);
    },
    function (error) {
      console.log(error);
    }
  );
});

app.listen(port, () => {
  console.log(`Server listening on the port::${port}`);
});

Answer 1

It looks like you are trying to use a node only module on the client (browser). You cannot use any module on the client that uses native node modules - in this case fs.

So what you need to do from your frontend application is send a request to your server application (API). On the API do any file system/database retrieval, then send the results back to the client.

It's very common to write the backend/frontend as separate applications - in separate folders and even store in separate repositories.

You should also never expose any secret keys on the client.

There may also be some confusion about the term 'client'. Most of the time it's used to refer to an application run in a web browser but you also get node sdk's which are 'clients' of the services they use - like node-appwrite in your case.