What could be causing the 404 error message in Backend deployment on Vercel?

Hello everyone, I'm currently in the process of deploying the backend for my MERN application on Vercel.

Prior to this attempt, I successfully deployed a small todo project using MERN on Vercel. Everything worked fine then, and I followed the same steps for this project, but now I'm encountering a 404 error.

Below is the file structure:

https://i.stack.imgur.com/zeiNH.png

Here's my package.json:

{
    "name": "backend",
    "version": "1.0.0",
    ...
}

This is my vercel.json:

{
    "version": 2,
    "builds": [...],
    "routes": [...]
}

These are my environment variables:

URL=worked url from mongodb
PORT=3000

This is my server.js:

//import required modules
const express = require('express');
...
})

This is the error message I get when deploying the project:

https://i.stack.imgur.com/UFVe0.png

I would appreciate any help in resolving this issue. This is my second round internship open-ended assignment with a deadline tomorrow. Up until now, I have only used Netlify, but the guidelines for this project require deployment on Vercel.

reactjsnode.jsmongodbexpressvercel

Answer №1

As outlined in the Vercel documentation for setting up an Express server.

 Begin by creating a directory called /api.
 Within the /api folder, generate a file named index.ts. This will serve as your primary server file.

It is important to establish an /api directory at the main level and change the name of your server.js file to index.js, then relocate the file into the /api directory.

I trust this information proves useful!

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

Achieving Left and Right Alignment of Navigation Elements using Flex Basis in Chakra UI with Next JS

For my project, I am working on creating a straightforward Navigation bar using Chakra UI and Next JS. The goal is to have an svg logo positioned at the top-left, while the menu and UI buttons are aligned to the top-right. However, I'm facing challeng ...

cssreactjsnext.jsflexboxchakra-ui

Basic library using babel, TypeScript, and webpack - Error: (...) is not a recognized function; within Object.<anonymous>

Recently, I encountered a strange issue while trying to bundle a simple function using babel, typescript, and webpack. You can find the example that is not working at this link. To test it, simply download the code, run npm/yarn install, npm/yarn run buil ...

javascriptnode.jstypescriptwebpackbabeljs

Executing Node.js Function from an External File Dynamically

Is it possible to run a Node function from an external file that may be subject to change? main.js function read_external(){ var external = require('./external.js'); var result = external.result(); console.log(result); } setInterva ...

javascriptnode.jsfunctionnpm

Prevent Event Bubbling in Next.js for a Link Element within a Nested Component

I'm encountering an issue with clickable tiles on my site. These tiles have a button inside that should direct the user to an internal page, while clicking anywhere else on the tile should send them to an external page. However, I'm facing a prob ...

reactjsnext.js

Rendering images from Laravel's storage folder in a React component

When uploading an image from a React frontend to a Laravel backend, I encountered an issue where the uploaded image path was saved in the database but the image wouldn't display. React code ` useEffect(() => { axiosClient .g ...

javascriptphpreactjslaravel

Creating a responsive Material UI Container Component is imperative for ensuring a user

Is there a way to have the Container Component with a maxWidth Prop that changes based on Theme Breakpoints? If not, what is the best approach to achieve this functionality? ...

reactjsmaterial-ui

What is the best way to condense all JavaScript and CSS files in MEAN.JS for a production setting?

I recently finished creating a basic MEAN.JS application. When using MEAN.JS, I can use the command grunt build to minify the js and css files located in specific folders: css: [ 'public/modules/**/css/*.css' ], js: [ 'public/config ...

javascriptnode.jsmeanjs

Creating a fixed sidebar that remains visible while scrolling in Next.js

Currently, I am faced with the challenge of implementing two components - a feed and a sidebar. The sidebar contains more content than it can display at once, so I want it to be able to overflow. My goal is to have the sidebar scroll along with the content ...

javascriptreactjsnext.js

Refresh React when updating an array with setState

I'm new to using React and Next.js and I have a question about the behavior of useState. When updating the state in this way [test, setTest] = useState("test"), the value on the webpage reloads, but not when using an object like in the code below. Can ...

reactjsnext.js

Customizing response headers in vanilla Node.js

My Node.js setup involves the following flow: Client --> Node.js --> External Rest API The reverse response flow is required. To meet this requirement, I am tasked with capturing response headers from the External Rest API and appending them to Nod ...

javascriptjsonnode.js

Is there a way to acquire and set up a JS-file (excluding NPM package) directly through an NPM URL?

Is it feasible to include the URL for the "checkout.js" JavaScript file in the package.json file, rather than directly adding it to the Index.html? Please note that this is a standalone JavaScript file and not an NPM package. The purpose behind this appr ...

javascriptnode.jsnpmwebpacknpm-install

Encountering a DOM exception with React 16.6 due to lazy loading/Susp

I am currently working on implementing dynamic import in my React application. Most of the React examples I have seen involve rendering the application to a specific tag and replacing its content, like this: ReactDOM.render(<App />, document.getEle ...

javascriptreactjs

Having trouble with the firebase module import in ReactJS?

Encountering an Error . /firebase.js:2:0 Module not found: Package path . is not exported from package C:\Users\krish\Desktop\FACEBOOK _CLONE\facebook_clone\node_modules\firebase (see exports field in C:\Users\ ...

reactjsfirebasenext.jsnpm-install

After I label a field, the react hook form automatically erases any content that I input

I am using the react-hook-form library to perform validation on a text input field. const { register, handleSubmit, setValue, formState: { errors }, } = useForm({ mode: 'onBlur' }); <input name='name' type=&a ...

reactjsreact-hook-form

I am having an issue with the npm install command. Each time I try running it, I keep receiving an

After posting the output, I find myself unable to comprehend anything. Can someone please guide me on what steps to take next? npm has issued a warning about an old lockfile and advises that supplemental metadata needs to be fetched from the registry due t ...

javascriptnode.jsnpmnpm-install

Caution: A value of `true` was passed for a non-Boolean attribute `error`

While creating a component and its stories in Storybook for React, I keep encountering an error message intermittently: The issue seems to be originating from this part of the code inside the component. It appears that removing {...props} from the input e ...

reactjsstorybook

Update Mongoose data conditionally using an array of objects

I am facing a challenge with my Cart schema in Mongoose. The CartItems are stored as an array of objects. { _id: string; items: [ { product: string; options: { size: string; color: string; } quantity: number; ...

node.jsmongodbmongoose

Every time I create a new Object, it comes with its own unique _id already assigned

Despite my efforts, I couldn't find the information I was looking for on Google. Currently, I am using Node.js, Express, and Mongoose to work on initializing a new Object. var User = require("../modules/user/model/user"); var user = new User(); cons ...

node.jsmongodbmongoosemongoose-schema

Node.js: Can we include global-like variables in a required module similar to __dirname and __filename?

One interesting approach is to override the wrap method of a module and introduce a global variable called 'myVar': var Module = require("module"); (function() { Module.wrap = function(script) { var wrapper = [ '(function (expor ...

node.js

I am having trouble getting my "sign in with Google" feature (built with Firebase and React) to work properly after deploying to AWS. What could be causing

I'm in the process of developing a React app integrated with Firebase. My aim is to utilize Firebase's auth features to enable users to sign in using Google credentials. Below is the code snippet I've implemented: <button onClick={h ...

reactjsfirebaseauthenticationfirebase-authentication