Looking for guidance on how to deploy a Node server with TypeScript on Vercel

I keep encountering a Code: NOT_FOUND error on my server while running the endpoint.

The issue seems to be related to the configuration setup of my TypeScript-based Node server, and I've been struggling with it for quite some time now.

Additionally, the deployment summary never seems to finish running:👇https://i.sstatic.net/v10wG.png

Below is the file structure of my server directory:

Server
   ├─ .env
   ├─ dist
   │  ├─ index.js
   │  └─ model
   │     └─ topic.js
   ├─ index.ts
   ├─ model
   │  └─ topic.ts
   ├─ package-lock.json
   ├─ package.json
   ├─ tsconfig.json
   └─ vercel.json

vercel.json

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

The configurations in my package.json that I only partially understood from various blog posts are as follows:

"scripts": {
    "start": "node ./dist/index.js",
    "build": "npx tsc",
    "ts.check": "tsc --project tsconfig.json",
    "add-build": "git add dist",
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "concurrently \"npx tsc --watch\" \"nodemon dist/index.js\""
  },
  "pre-commit": [
    "ts.check",
    "build",
    "add-build"
  ],

Error: https://i.sstatic.net/InzJD.png

Everything works perfectly fine when using the server locally. However, I am unsure about how to resolve the TypeScript server deployment, as it is quite different from deploying a normal Node.js Express server.

Answer â„–1

//tsconfig.json
"outDir": "./build_output"

Remember to add a comment in the .gitignore file for the 'build_output' folder.

.gitignore
# build_output

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

How to vertically align Material UI ListItemSecondaryAction in a ListItem

I encountered an issue with @material-ui/core while trying to create a ListItem with Action. I am looking for a way to ensure that the ListItemSecondaryAction stays on top like ListItemAvatar when the secondary text becomes longer. Is there any solution to ...

Guide to defining font style in vanilla-extract/CSS

I'm trying to import a fontFace using vanilla-extract/css but I'm having trouble figuring out how to do it. The code provided in the documentation is as follows: import { fontFace, style } from '@vanilla-extract/css'; const myFont = fo ...

The DefaultTheme in MaterialUI no longer recognizes the 'palette' property after transitioning from v4 to v5, causing it to stop functioning correctly

Currently in the process of transitioning my app from Material UI v4 to v5 and encountering a few challenges. One issue I'm facing is that the 'palette' property is not recognized by DefaultTheme from Material UI when used in makeStyles. Thi ...

I am encountering issues with MangoDB Compass connecting to my backend through TypeORM

I am facing a challenge in developing a straightforward web application where I aim to showcase users from a MongoDB database on a React web application. The issue lies with TypeORM and my MongoDB database setup. Unfortunately, my backend repository is una ...

Switching Theme Dynamically in a Multi-tenant Next.js + Tailwind App

I'm currently developing a Next.js + Tailwind application that supports multiple tenants and allows each tenant to easily switch styles or themes. I've been struggling with the idea of how to implement this feature without requiring a rebuild of ...

Adding new types to a tuple type in TypeScript

My goal is to add types to the elements of a tuple using spread syntax. Here is an example: type A = [a:number,b:string] type B = [...A,c:boolean] The desired result should be type B = [a:number,b:string,c:boolean] However, when I attempted this approac ...

Is TypeScript React.SFC encountering incompatibility issues with types?

Trying to figure out TypeScript but struggling to get rid of these persistent errors. I've tried multiple approaches and resorted to using any wherever possible, but the errors still persist: (9,7): Type '(props: IRendererProps & { children? ...

Determine the output of a function based on the structure of the input parameter by mapping through a complex nested object

Trying to implement some intricate typing for a project I'm developing, and wondering if it's achievable with TypesScript. The project in question is a form generator based on schemas and promises, using Vue and TS. It handles UI rendering, vali ...

Unable to assign a value to the HTMLInputElement's property: The input field can only be set to a filename or an empty string programmatically

When attempting to upload an image, I encountered the error message listed in the question title: This is my template <input type="file" formControlName="avatar" accept=".jpg, .jpeg .svg" #fileInput (change)="uploa ...

Troubleshooting issues with setting errors on a FormGroup instance in Angular Reactive Forms are proving to be more challenging

Currently I am working with Angular 4.4.3 reactive forms to create custom validation for a group of controls within a form. As per the documentation on AbstractControl.setErrors, this method updates the errors property of the AbstractControl that it's ...

I'm having trouble with implementing a basic show/hide feature for the login and logout options in the navigation bar using Angular. Can anyone help me figure out why it's

Is there a way to display the functionality after logging in without using session storage or implementing the logout function? The HTML for navigation is provided below. <nav class="navbar navbar-expand-sm navbar-light bg-light"> ...

What could be causing the radio button to not be checked when the true condition is met in Angular?

I am working on an angular7 application that includes a dropdown list with radio buttons for each item. However, I am facing an issue where the radio button is not checked by default on successful conditions. Below is the code snippet from my component.htm ...

What are the different types of class properties in TypeScript?

Currently, I am incorporating ES6 classes in typescript using the following code snippet: class Camera { constructor(ip) { this.ip = ip; } } Despite encountering an error message, it appears that the code still compiles successfully. The ...

Concatenate all sub-items within a JSON object

I have 2 Objects like this : [ { _id: ObjectId("62990f96345ef9001d9f2dfe"), deletedAt: null, expiredAt: ISODate("2022-06-05T19:29:26.746Z"), dataBarang: [ { vendor: ObjectId("6215dd91139c99003fe4c7cd ...

Ways to retrieve a list of identifiers from arrays at both initial and subsequent levels

I'm currently dealing with a JSON/JavaScript structure that looks like this: { "comments": [ { "id": 1, "content": "lorem ipsum", "answers": [] }, { "id" ...

What are the steps for incorporating the AAD B2C functionality into an Angular2 application with TypeScript?

I recently built a web application using Angular2 and TypeScript, but now one of my clients wants to integrate Azure B2C for customer login instead of OAuth. I followed a simple example on how to implement Azure B2C in a .NET Web app through the link provi ...

Adding extra fields to an existing JSON response in a TypeScript REST API

I am in need of an additional column to be added to my response data. Currently, I am fetching data from multiple REST endpoints one by one and merging the results into a single JSON format to display them in an Angular Mat table. The columns that I want t ...

Using absolute imports to resolve modules in TypeScript and Next.js

When I import functions from files using absolute imports, I keep encountering errors that I have been trying to resolve. The errors manifest in a certain way, as shown here: https://i.sstatic.net/J7Ai1.png Despite the errors, the functions are successful ...

implementing firestore onsnapshotListner feature with pagination

I have a web application that needs real-time updates on a large collection of documents. However, due to the size of the collection, retrieving data without applying a limit is not feasible and inefficient. Therefore, it is crucial to implement a query li ...

What is the best way to create a method that waits for a POST request to complete?

I have the following code snippet: login() { const body = JSON.stringify({ "usuario":"juanma", "password":"1234"}); console.log(body); let tokencito:string = '' const params = ne ...