¿How to connect my page to Github repo with Database in cloudflare page?

Website, Application, Performance
1

Hello, I am developing a website by testing the new functions of Cloudflare, and I already have my website integrated in their beta version. However, I would like to finalize the system I want to compose based on:

  1. Teleporthq
  2. Github Repository
  3. Cloudflare Page
  4. Cloudflare D1 or MongoDB

I have the first three items on the list for the new site system application, but I have been researching and trying to follow the steps to connect my website to a database, either Cloudflare D1 or MongoDB. I am encountering an error in the deployment due to not having the dependencies of Mongoose or because Cloudflare Workers is not being used correctly. I have been searching for a solution but have not been successful.

4

Greetings, I have decided to use Cloudflare’s D1 database because it makes my website feel more secure. I have been running some tests and I believe I could use this method to connect it. Could you please provide me with an opinion about the code?

// Import Cloudflare API authentication credentials (ensure secure storage)
const apiKey = 'YOUR_API_KEY';
const email = 'YOUR_EMAIL';
const zoneId = 'ZONE_ID';
const d1DatabaseId = 'D1_DATABASE_ID';

// Form data
const formData = {
  nombre: 'Example',
  email: '[email protected]',
  mensaje: 'This is an example message'
};

// Cloudflare endpoint to send data to D1
const endpoint = `https://api.cloudflare.com/client/v4/zones/${zoneId}/workers/databases/${d1DatabaseId}/write`;

// Request configuration
const requestOptions = {
  method: 'POST',
  headers: {
    'X-Auth-Email': email,
    'X-Auth-Key': apiKey,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(formData)
};

// Send request to Cloudflare API
fetch(endpoint, requestOptions)
  .then(response => {
    if (!response.ok) {
      throw new Error('Failed to send data to Cloudflare D1');
    }
    return response.json();
  })
  .then(data => {
    console.log('Data successfully sent to Cloudflare D1:', data);
  })
  .catch(error => {
    console.error('Error sending data to Cloudflare D1:', error);
  });

This code snippet imports the necessary credentials for Cloudflare authentication, prepares form data, sets up the endpoint to send data to Cloudflare D1, configures the request, sends the request to the Cloudflare API, and handles any potential errors that may occur during the process. It follows best practices for secure communication with Cloudflare’s services. Remember to replace placeholders like YOUR_API_KEY, YOUR_EMAIL, ZONE_ID, and D1_DATABASE_ID with your actual information before deploying it.

5

image
image1920×1080 297 KB

I created the connect.js file with this fetch and deployed it, but I see this in the console.

6

We encountered a compilation error while using Cloudflare. The specific issue is related to the module ‘http’ not being resolved in the directory ‘/opt/buildhome/repo/node_modules/express/lib’. The error also mentions a breaking change in Webpack, where previous versions automatically included polyfills for Node.js core modules, which is no longer the case.

The recommended solutions provided are to either add a fallback for ‘http’ by including ‘resolve.fallback: { “http”: require.resolve(“stream-http”) }’ in the configuration, and installing ‘stream-http’, or if polyfill is not desired, to use an empty module by setting ‘resolve.fallback: { “http”: false }’. Unfortunately, despite attempting to troubleshoot, we still encountered a build failure with error code 1.

We kindly request your assistance in resolving this issue to ensure a successful build process. :sweat_smile:

7

This is what I did in:

// Node.js with Express
const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

// ...other middleware and route definitions

app.listen(3000, () => {
  console.log('Server running on port 3000');
});