Receiving a 404 error in the Hapi.js backend when using Vercel wildcard routes' source

Struggling to deploy a TypeScript Hapi.js server on Vercel and running into deployment issues. After trying out express tutorials with TypeScript, I resorted to tweaking my vercel.json file:

{
    "version": 2,
    "builds": [
        {
            "src": "dist/src/index.js",
            "use": "@vercel/node",
            "config": { "includeFiles": ["dist/src/**"] }
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "dist/src/index.js"
        }
    ]
}

However, this setup is not functioning as expected. I attempted changing the src to just /, but it only worked for the root route, not others.

If anyone wants to take a look at the issue, here's the link to the Github repository. Appreciate any assistance in advance!

typescriptdeploymentvercelhapi.js

Answer №1

After making a crucial adjustment to the vercel.json routes array by including a methods field, my deployment was successful!

This helpful tip was discovered on a website, and it seems like it can be applied to any typescript-based backend server you wish to deploy on vercel.

{
    "version": 2,
    "builds": [
        {
            "src": "dist/src/index.js",
            "use": "@vercel/node"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "dist/src/index.js",
            "methods": ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"]
        }
    ]
}

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

Interactive Tab content display

I'm working on a tabs component and I need Angular to only render and initialize the active tab instead of all tabs. Is there a way to achieve this? <my-tabs> <my-tab [tabTitle]="'Tab1'"> <some-component></some-co ...

htmlangulartypescript

Tips for enabling custom fonts in the latest expo software update

Update: While running expo start, the fonts are displayed correctly. However, when following the recommended method of using npx expo start, the fonts do not load properly. I even tried integrating Google Fonts using '@expo-google-fonts/montserrat&apo ...

typescriptreact-nativeexpo

The NextJS API route is unable to retrieve search parameters

I am currently working on a basic NextJS application where I have a client component that makes a call to an API route. Despite my efforts, I am unable to access certain search parameters in a route that I have created, as it always returns null. Below i ...

javascriptreactjstypescriptnext.jsurl

Parcel is not compatible with basic HTML and TypeScript files

Just recently, I successfully installed parcel by executing the command: npm install -g parcel-bundler Everything went smoothly. Following that, I created a basic HTML file: <html> <body> <script src="./src/index.ts">< ...

javascriptnode.jstypescriptnpmsemantic-versioning

Issue encountered with asynchronous waiting while invoking a function

var value = await this.upload(); if (value == true) { // Update item properties this.item.photos = this.uploaded; this.item.price = null; this.item.qty = null; // Add item to data service this.dataSrv.addItem(this.item) .then(() => { ...

angularjstypescriptionic-frameworkangular-promise

Material-UI and TypeScript are having trouble finding a compatible overload for this function call

Currently, I'm in the process of converting a JavaScript component that utilizes Material-ui to TypeScript, and I've encountered an issue. Specifically, when rendering a tile-like image where the component prop was overridden along with an additi ...

javascriptreactjstypescript

Use `should.have.property` to confirm the existence of a specific key-value pair within

I am trying to validate the existence of a key-value pair in an object using should.js syntax like this: cy.gey(selector).should('have.property', 'Company Feature: ', ['open space ']);. However, I encountered this error messag ...

javascriptjquerytypescriptcypressshould.js

How to convert typescript path aliases into relative paths for NPM deployment?

I am currently working on a typescript project that utilizes paths for imports. For instance: "paths": { "@example/*": ["./src/*"], } This allows the project to import files directly using statements like: import { foo } from "@example/boo/foo"; Whe ...

javascriptnode.jstypescriptnpm

What is the minimum length requirement for a text box in Ionic 2 with Angular 2?

I've been successfully validating a textbox with angular2, and now I'm attempting to set a minimum character limit for the input. However, when I try to do this, I encounter the following error: Expected validator to return a Promise or Observab ...

angulartypescriptionic-framework

Angular Tutorial: Retrieve values in array that are over 100

I'm having trouble showing the length of items in my array that exceed 100 by using a function call. I keep encountering this error message "ERROR TypeError: Cannot read property 'filter' of undefined". Can someone please assist me ...

angulartypescript

Error in Typescript TS2339: The property 'queryType' is missing in the type 'IntrinsicAttributes' within a Typescript, React, and Redux application

I am currently utilizing TypeScript in my React + Redux application. Within one of my components, I am using the connect function from react-redux. Here is a snippet of the code: import * as React from 'react'; import * as Redux from 'redux ...

reactjstypescriptreact-redux

When TypeScript generator/yield is utilized in conjunction with Express, the retrieval of data would not

Trying to incorporate an ES6 generator into Express JS using TypeScript has been a bit of a challenge. After implementing the code snippet below, I noticed that the response does not get sent back as expected. I'm left wondering what could be missing: ...

typescriptexpressgenerator

Dynamically attach rows to a table in Angular by triggering a TypeScript method with a button click

I need help creating a button that will add rows to a table dynamically when pressed. However, I am encountering an error when trying to call the function in TypeScript (save_row()). How can I successfully call the function in TypeScript and dynamically a ...

javascriptangulartypescriptangular5

Receive response after executing onFinalize Firebase cloud function

I have successfully created an unzip onFinalize function that unzips any file copied to storage and then deletes the file. However, I am looking for a way to receive a return value from the onFinalize cloud function in my Angular app or somehow listen for ...

angulartypescriptfirebasegoogle-cloud-functions

execute the NPM script in the current directory

Within my package.json file for a node project, I have the following test script that utilizes the ts-node package: "scripts": { "build": "tsc", "test": "ts-node" } Executing this script from the root ...

javascriptnode.jstypescriptnpm

Is there a way to apply a filter to an object without using an additional map function?

When an error occurs, my pipe returns of{}. I need to filter it to redirect to other code flows. Currently, I am using the following scenario. Is there a way to remove the map and filter it within the existing filter? readonly k$ = combineLatest( [t ...

typescriptrxjsngrxrxjs-pipeable-operators

Exploring Opencascade.js: Uncovering the Real Text within a TCollection_ExtendedString

I am currently attempting to retrieve the name of an assembly part that I have extracted from a .step file. My method is inspired by a blog post found at , however, I am implementing it using javascript. I have managed to extract the TDataStd_Name attribut ...

javascripttypescriptemscriptenopencascade

Angular2 deployment may cause routing functionality to stop working

I recently developed an angular2 application and successfully deployed it. The app loads correctly but takes some time to do so, after which I can navigate to different components. However, when I try to access a component directly by typing the address ...

angulartypescriptdeploymentangular2-routing

Assign the onClick function to the decoration of a Vscode extension

When I click on a vscode decoration, I want to trigger a function. Here's the code I created for this: const decoration = { range, hoverMessage: `${command} ${input}`, command: { title: 'Run Function', command: ' ...

typescriptvscode-extensions

What is the best way to retrieve a PID from a Process that was spawned using the TS Exec Function

When working on a Windows system with TypeScript I face an issue with a function that launches another application via the command line. I am able to capture the Pid spawned by this Exec Function, but it turns out to be the Pid of the CMD used to initiate ...

typescriptwindowspid