Setting up React front-end with Express/Node.js back-end on Firebase hosting

Currently, I have successfully deployed a front-end React UI project on Firebase. However, the back-end Node.js/Express app that I am attempting to deploy using Firebase functions is only functioning locally. The logs indicate an error in the user code, but I'm unsure where to begin troubleshooting since it works fine on my local machine. As I am relatively new to working with technologies like Firebase, any assistance would be highly valued. I've tried various fixes from online resources, which have brought me this far. Please find the relevant code snippets below:

root - functions - index.js

const functions = require("firebase-functions");
const express = require("express");
const cors = require("cors");

const expressApp = express();
const serviceApp = require("../src/app");

expressApp.use(cors());
expressApp.use("/", serviceApp);

exports.app = functions.https.onRequest(expressApp);

root - firebase.json

{
  "functions": {
    "ignore": [
      "node_modules",
      ".git",
      "firebase-debug.log",
      "firebase-debug.*.log"
    ],
    "source": "functions"
  },
  "hosting": {
    "site": "gys-be-test",
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites" : [{"source" : "**", "function" : "app"}]
  }
}

root-src-app.js

const path = require("path");

require("dotenv").config({ path: path.join(__dirname, "..", ".env") });

const express = require("express");
const cors = require("cors");
const errorHandler = require("./errors/errorHandler");
const notFound = require("./errors/notFound");
const resourcesRouter = require("./Resources/resources.router");
const contactsRouter = require("./Contacts/contacts.router");
const postsRouter = require("./Posts/posts.router");
const usersRouter = require("./Users/users.router");
const promptsRouter = require("./Prompts/prompts.router");
const eventsRouter = require("./Events/events.router");

const app = express();

app.use(cors());
app.use(express.json());

// Routes setup
app.use("/users", usersRouter);
app.use("/posts", postsRouter);
app.use("/prompts", promptsRouter);
app.use("/events", eventsRouter);
app.use("/resources", resourcesRouter);
app.use("/contacts", contactsRouter);

// Error handling middleware
app.use(notFound);
app.use(errorHandler);

module.exports = app;

root-src-server.js

const { PORT = 5001 } = process.env;

const app = require("./app");
const knex = require("./db/connection");

knex.migrate
  .latest()
  .then((migrations) => {
    console.log("migrations", migrations);
    app.listen(PORT, listener);
  })
  .catch((error) => {
    console.error(error);
    knex.destroy();
  });

function listener() {
  console.log(`Listening on Port ${PORT}!`);
}

A snippet from the Firebase debug log:

[info] Functions deploy had errors with the following functions:
    app(us-central1)
[debug] [2022-09-04T20:22:06.986Z] Not printing URL for HTTPS function. Typically this means it didn't match a filter or we failed deployment
...

I would greatly appreciate any assistance. Thank you!

Answer №1

Welcome aboard to the StackOverflow community!

I find it strange to see the exports.app in the initial code snippet. I'm curious why it isn't using exports.module instead. Could you verify if this was done on purpose before we proceed further?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS rotation causing issues with absolute positioning

In the example below, I have demonstrated the current behavior I am experiencing and the desired outcome. // Rotated div rotated.style.left = "50px"; rotated.style.top = "100px"; // Original "untouched" div original.style.left = "50px"; original.style.t ...

How do I troubleshoot the connection issues between my Node.js backend and PostgreSQL database?

Struggling with my first Node/Express project as I am unable to retrieve data from postgres. Here is the connection setup in server.js var db = require('knex')({ client: 'pg', connection: { host : '127.0.0.1&ap ...

Issue with Firefox pageMod addon: window.location not functioning properly

I'm developing a unique Firefox Add-on that implements page redirects based on keyboard input. The keyboard detection is functioning properly, however, the redirect functionality seems to be failing. The complete code can be found on GitHub (even thou ...

The accumulation of keydown events in VueJs

Currently, I am developing a feature where a <textarea> field starts to fade out as soon as the user begins typing using v-on:keydown. However, if the user continues typing, the fading effect resets to keep the opacity: 1. Unexpectedly, the behavior ...

Establish the state as the result of a function

I need to update the state of timeToCountdown with the value stored in allTimeInSeconds. Next, I intend to pass this data as a prop to a component. class Timer extends Component { constructor(props){ super(props); this.state = { ...

I am currently facing a challenge in React Highcharts where I am unable to remove and redraw the graph easily

Having an issue where I can't remove and redraw the chart in my React Highchart project. I've been unable to find a solution for this problem. Here is the code snippet: import { useState, useEffect, useRef } from "react"; import Highch ...

Issue with Angular failing to identify jQuery after transferring the dependency from package.json to bower.json

Initially, my project included angular, angular-bootstrap, and jquery in the package.json file, with everything being compiled using browserify. // package "dependencies": { "angular": "~1.4.6", "angular-bootstrap": "~0.12.2", "jquery": "~2.1. ...

Steps for inserting a JSON Array into a database

I have a dropdown menu that displays different options based on the selection from another dropdown. The data for each dropdown is fetched from the database and I need to insert the selected values into a new table in the database. All the necessary code ...

What are the steps for transitioning with JavaScript?

My goal is to make both the <hr> elements transition, but I'm struggling with only being able to select the lower <hr> using CSS. html { margin-bottom: 0; height: 100%; min-height: 100%; } body { margin-top: 0; height: 100%; ...

React JS simple validator package not functioning properly with post-property date

I am currently utilizing the simple react validator package for form validation in my react JS project. For those interested, you can find the package at this link: https://www.npmjs.com/package/simple-react-validator However, I have encountered an issue w ...

Implementing a bloom pass in ThreeJS can alter the transparency of a canvas

IMPACT OF BLOOM EFFECT ON TRANSPARENCY Currently, my renderer setup looks like this: renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer:true, alpha:true } ); For implementing the bloom pass in post-processing: var renderPass = ...

Changes on services do not affect the Angular component

Currently facing an issue with my Angular assignment where changing an element's value doesn't reflect in the browser, even though the change is logged in the console. The task involves toggling the status of a member from active to inactive and ...

Ways to include Bootstrap Tooltips on an input field that has the type of "file"

I attempted the code below: <input type="file" name="file" id="fileField" data-toggle="tooltip" data-placement="bottom"/> <script> $(document).ready(function() { $('[data-toggle="tooltip"]').tooltip(); }); </script> ...

Unable to proceed due to lint errors; after conducting research, the issue still remains

I'm still getting the hang of tslint and typescript. The error I'm encountering has me stumped. Can someone guide me on resolving it? I've searched extensively but haven't been able to find a solution. Sharing my code snippet below. (n ...

Inserting an item into ng-model within a dropdown menu

I have a select box populated with data from my backend. This data is an array of objects: [Object { superkund_id="4", nod_id="12068", namn="Växjö Fagrabäck"}, Object { superkund_id="5", nod_id="9548", namn="Halmstad Bågen / Pilen"}] I am using ng-o ...

When switching windows or tabs, the user interface of the browser extension vanishes

As someone who is new to web application development and browser extension creation, I have encountered a challenge with my browser extension. When the extension popup is open and I switch browser windows, the UI (popup.html) disappears. It reappears whe ...

There is a lack of communication between the tomcat application and the database

I am currently working on a web application that is stored in a war file and runs with Tomcat. Initially, I start my MySQL 5.7 database, followed by running a Spring Boot project created with the necessary files. After completing these steps, I deploy my ...

Error: An issue occurred with the tasks in the Gruntfile.js file

pm WARN EPACKAGEJSON <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74041506001a1106041b0600151834445a445a44">[email protected]</a> No description npm WARN EPACKAGEJSON <a href="/cdn-cgi/l/email-protection" ...

Automating the click of JavaScript buttons with Selenium

Test page Experimenting with the above Indeed link to test my selenium automation skills. I am attempting to automate the clicking of the 'apply' button using the Firefox webdriver. My code snippet is as follows: from selenium import webdriver ...

React Script tag error: SyntaxError caused by unexpected token ''<''

I am trying to include a script file in a jsx element. The script file contains a simple console.log('script ran') statement and nothing else (I intentionally kept the code minimal for testing purposes). // editor.js console.log('script ra ...