Cannot connect Atlas Mongodb, in qwik framework with express server

Hi, really I need your help with this.
I am building a web app with Qwik framework, Express, Mongodb, and Netlify (also implementing netlify functions). See my site here: https://nexasoft.netlify.app/. Then I am trying to read data from Mongo Atlas so I created a function to connect this DataBase.

import { MongoClient, ServerApiVersion } from "mongodb";
// Variables de entorno
const DB_USER = import.meta.env.VITE_DB_USER;

const MONGO_HOST = `mongodb+srv://${DB_USER}:${DB_PASSWORD}@${DB_HOST}?retryWrites=true&w=majority`;

export const mongoClient = new MongoClient(MONGO_HOST, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  serverApi: ServerApiVersion.v1,
});

const clientPromise = mongoClient.connect();

const connectDB = async () => {
  try {
    const database = (await clientPromise).db(DB_NAME);
    console.log("[db] Conectada con Γ©xito", database);
    const collection = database.collection(MONGODB_COLLECTION);
    const results = await collection.find({}).toArray();
    return {
      statusCode: 200,
      body: JSON.stringify(results),
    };
  } catch (err) {
    console.error("[db] Error", MONGO_HOST, err);
    return { statusCode: 500, body: err.toString() };
  }
};

export default connectDB;

Then from express I use a route to implement this function and get data for my component with a fetch request. But I have not achieve to read my database info.

app.get("/api/allnames", async (req, res) => {
  const docs = await connectDB();
  console.log("Call docs", docs);
  res.json(docs);
});

When I run pnpm start with my local config fetch("http://localhost:5173/api/allnames/"), I get that it returns as response a 404 code with no documents. Then If I run pnpm build with my production config fetch("https://nexasoft.netlify.app/api/allnames/"), my app build correctly in my computer, then I push it to github where the Netlify deploy fails with this:

[ERROR] Could not resolve "/opt/build/repo/adaptors/express/vite.config.ts"

I also run the command, netlify dev, witch opens the content from my site but still I get the 404 message trying to access my data from Mongo.

So I decided to install, Netlyfy functions to serverless. I created a new function get_contacts witch made my MongoDB conection and call (there I import my .env variables like, process.env…). Again running with this configuration, netlify dev or even pnpm start, the explorer shows me, Could not proxy request. Then the terminal closed with this:

TypeError: Failed to parse URL from /.netlify/functions/get_contacts. 
TypeError [ERR_INVALID_URL]: Invalid URL

I have not any idea witch could be my mistake, here my github repository: GitHub - Maikpwwq/nexasoft: ContΓ‘ctenos nos que con gusto le ayudamos, NexaSoft SAS, el futuro en soluciones de software. !Consigue una ventaja competitiva con nosotrosΒ‘ -> https://www.nexasoft.dev/

The latest problem seems unrelated to any of the above. Based on this: Netlify App, your build process expects a vite.config.ts file to exist in adaptors/express/ folder. In your repo, it doesn’t exist.

1 Like

Hi @hrishikesh. Thank you for assist. I looked and folder exist in my local, but searching for it in the repo it doesn’t, so I added there manually. Then the Netlify build process fails again, due to the entry module β€œsrc/entry.express.tsx” it didn’t exist in my repo either, I loaded it too. Then the build process start and end correctly in Netlify platform, but when I visit my deploy site, it send me to: https://main--nexasoft.netlify.app/ and the explorer now show me a 404 message. This is my current deploy: NetlifyApp. Some suggestion?

Qwik on Netlify needs Edge Functions, which your site doesn’t have. Take a look at this example repo: GitHub - brittneypostma/deploy-qwik-ly-on and the example site: https://deploy-qwik-ly-on.netlify.app/ along with this Blog post: How to Deploy the Qwik JavaScript Framework | Netlify on deploying Qwik to Netlify.

Yes, I already have added Netlify Fuctions, with the netlify init command. It now returns me this:

This site has been initialized

Site Name:  nexasoft
Site Url:   https://nexasoft.netlify.app
Site Repo:  https://github.com/Maikpwwq/nexasoft
Site Id:    a4adbe17-0c01-41aa-824a-76fae83ecd01
Admin URL:  https://app.netlify.com/sites/nexasoft

My Netlify functions folder is call, ./netlify/functions where I saved the get_contacts script. In the package has been instaled: @netlify/functions. do you refer the handler function? β†’ Build functions | Netlify Docs

Not Netlify Functions, but Netlify Edge Functions. They’re 2 different things. Take a look at: Qwik City - Netlify Edge Adaptor and Middleware - Qwik

I understand, I had Installed Netlify Edge Functions but was deactivated by adding the express adaptor. I run again pnpm qwuik add netlify-edge, accept the changes, update my fetch request with: fetch("/.netlify/functions/get_contacts"). Then I run: netlify dev, but it returns me an error with URL:

> nexasoft-progresive-web-app@1.0.0 dev
> vite --mode ssr


  VITE v4.0.3  ready in 445 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
βœ” Waiting for framework port 5173. This can be configured using the 'targetPort' property in the netlify.toml
β—ˆ Loaded function get_contacts.
β—ˆ Functions server is listening on 38199

   β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
   β”‚                                                 β”‚
   β”‚   β—ˆ Server now ready on http://localhost:8888   β”‚
   β”‚                                                 β”‚
   β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

β—ˆ Loaded edge function entry.netlify-edge
error: Uncaught (in promise) TypeError: Invalid URL: '/.netlify/functions/get_contacts'

Also, in documentation I find a command to prove the functions: netlify functions:serve, but when visit I got a 404 response:

β—ˆ Loaded function get_contacts.
β—ˆ Functions server is listening on 9999
Request from ::ffff:127.0.0.1: GET /
Response with status 404 in 1 ms.

I am missing something but I don’t know what is. Please help me with this.

I think your correct URL would be (in this case):

http://localhost:8888/.netlify/functions/get_contacts

Since indeed, I also think it is not a valid URL -one that starts with a / :slight_smile:

Hi, I tried with this URL: fetch("http://localhost:8888/.netlify/functions/get_contacts"), then I executed netlify dev, my app load his content in http://localhost:5173/ correctly, but the function still fails in URL path, with this message: There was an error with an Edge Function. Please check the terminal for more details., in the terminal I get: error: Uncaught (in promise) TypeError: Invalid URL: '/.netlify/functions/get_contacts'.

Well, unfortunately, you clearly didn’t change the URL since the error message remains the same :upside_down_face: . I do understand that you tried, but my read is that the attempt was not effective, so you’ll want to keep searching for where you’ve got the invalid URL in your code. To clarify a bit, I think this is not a Netlify problem but a problem with your code, so since we can’t become experts on that code - hopefully you’ll be able to get that part sorted on your own :slight_smile:

As I commented before I changed my url path, even I try a last calling: fetch("http://localhost:8888/api/get_contacts/") and creating it corresponding redirect in netlify.toml file

[functions]
directory = "netlify/functions"

[[redirects]]
from = "/api/get_contacts/*"
to = "/.netlify/functions/get_contacts"
status = "200"

Then I run netlify dev, whitch open http://localhost:8888/ with this, There was an error with an Edge Function. Please check the terminal for more details.
my terminal says:

netlify dev
β—ˆ Netlify Dev β—ˆ
β—ˆ Injecting environment variable values for all scopes
> nexasoft-progresive-web-app@1.0.0 dev
> vite --mode ssr

  VITE v4.0.3  ready in 516 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
βœ” Waiting for framework port 5173. This can be configured using the 'targetPort' property in the netlify.toml
β—ˆ Loaded function get_contacts.
β—ˆ Functions server is listening on 42989

   β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
   β”‚                                                 β”‚
   β”‚   β—ˆ Server now ready on http://localhost:8888   β”‚
   β”‚                                                 β”‚
   β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

β—ˆ Loaded edge function entry.netlify-edge
error: Uncaught (in promise) TypeError: Invalid URL: '/.netlify/functions/get_contacts'
    at getSerialization (deno:ext/url/00_url.js:76:13)
    at opUrlParse (deno:ext/url/00_url.js:67:12)
    at new URL (deno:ext/url/00_url.js:365:29)
    at new Request (deno:ext/fetch/23_request.js:321:27)
    at deno:ext/fetch/26_fetch.js:419:29
    at new Promise (<anonymous>)
    at fetch (deno:ext/fetch/26_fetch.js:415:20)
    at dB (file:///media/oem/MyFiles/8_DEVELOPMENT/nexasoft/.netlify/edge-functions/entry.netlify-edge/assets/@qwik-city-plan-09b001a7.js:278:2744)
    at $t (file:///media/oem/MyFiles/8_DEVELOPMENT/nexasoft/.netlify/edge-functions/entry.netlify-edge/assets/index.qwik-81d1956c.js:10:1154)
    at file:///media/oem/MyFiles/8_DEVELOPMENT/nexasoft/.netlify/edge-functions/entry.netlify-edge/assets/index.qwik-81d1956c.js:11:42408

Check this. How To Redirect Netlify Functions To a Simpler Path

I solved partially by adding this into the netlify.toml file to handle EMS6 sintaxis in my functions:

[functions]
node_bundler = "esbuild"
directory = "netlify/functions"

Also, I had to include my ip adress to the networks access list in Atlas mongodb website and I update my package dependencies. With this changes my app now don’t crashed, that’s good, but it still doesn’t show me in explorer nothing more than a menu, not even the function did what is expected.

What kind of a menu are we talking about?

In any case, I think at this point if you need us to continue debugging this, you’d have to provide us with a minimal reproduction. We do not have the bandwidth to go through a entire complicated codebase (code-level debugging is anyways outside our scope of support).

I think is easy to visit the website URL to notice witch menu I talk in the output.
https://main--nexasoft.netlify.app/

In local my project works correctly and show me full content. It’s no even a mongodb connections problems cuz I get a 200 response to my request.

My current problem is with Netlify host and serverless fuctions provided by netlify edge. But when I deploy my project netlify deploy --prod is when I am getting these troubles.

The site returns a 500 error when visited. Please provide a method to reproduce the error

@katrina-r Try again. I was doing some additional test.

My static site works, https://nexasoft.netlify.app/. I can create and upload functions to netlify serverless. But when I try to call them in my app component, ie contact form, it fails the building process. I can’t made work:

await fetch("https://nexasoft.netlify.app/.netlify/functions/get_contacts")
     .then((res) => { ...

I also had tried with edge-fuctions, taking into account that they use Deno imports. It has been frustrating not getting forward.

Hey @Myke ,

I think you may have misunderstood my colleague, Hrishikesh. We’re looking for a minimal reproduction (ie. a GitHub repo with minimal code that we can reproduce the issue on) and not reproduction steps. We would need this to debug further. Thanks in advance for your help with troubleshooting!

Ok, I understand. Here a minimal repo created with qwik framework. This is my netlify deploy site: https://shimmering-blini-920323.netlify.app/. Also I share the github repository, GitHub - Maikpwwq/SSG-Qwik-Netlify_functions: Qwik app with netlify edge functions to MongoDB access.

I am trying to use function to get data from mongodb. So I implement the function with a fetch call, but returns: ERROR Task timed out after 10 seconds.

It appears that Mongo is taking a little over 10 seconds to respond to your database query. In my local testing, I got the response in like 11 or 12 seconds. Either try to optimise your Mongo queries so they can respond faster, or we can upgrade the function timeout to 26 seconds but that’s for Pro and above plans.

I understand that my query is taking too long to respond. So I tried in this new repo with mongoose connect. I modified my netlify function call, this reach my Atlas mongodb due to the panel show me connections, but in the explorer I get this just a empty array (res). Maybe someone have idea of how to debug this.

This is my function get_mongoose:

import mongoose from "mongoose"; // ,
import * as dotenv from "dotenv";
dotenv.config();

// Variables de entorno
const DB_USER = `${process.env.VITE_DB_USER}`;
const DB_PASSWORD = `${process.env.VITE_DB_PASSWORD}`;
const DB_HOST = `${process.env.VITE_DB_HOST}`;
const DB_NAME = `${process.env.VITE_DB_NAME}`;
const MONGODB_COLLECTION = `${process.env.VITE_MONGODB_COLLECTION}`;

const MONGO_HOST = `mongodb+srv://${DB_USER}:${DB_PASSWORD}@${DB_HOST}/?retryWrites=true&w=majority`;

const schema = new mongoose.Schema({ name: "string", email: "string" });

console.log("MONGOOSE_HOST", MONGO_HOST);
const clientPromise = mongoose.createConnection(MONGO_HOST, {
  dbName: DB_NAME,
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const Contactos = clientPromise.model(MONGODB_COLLECTION, schema);

const handler = async () => {
  console.log("hi mongoose");
  try {
    await Contactos.find().exec().then((res) => {
      console.log("res", res);
    }); // .toArray(); .exec() .clone()
    // You don't need callbacks in Mongoose, because Mongoose supports promises and async/await.
    // , function (err, docs) { if (err) console.log("Error getting the data", err);
    // docs.forEach
    const results = [];
    console.log("mongoClient", results);
    return {
      statusCode: 200,
      body: JSON.stringify(results),
    };
  } catch (err) {
    console.error("[db] Error", MONGO_HOST, err);
    return { statusCode: 500, body: err.toString() };
  }
};

export { clientPromise, handler };