Implement ExpressTS on vercel platform

I have recently developed an Express TypeScript project on GitHub and now I am attempting to deploy it to Vercel. The folder structure of the project is as follows, with 'dist' containing app.js and 'src' containing app.ts.

  • dist
  • dto
  • middlewares
  • models
  • src
  • .gitignore
  • package.json
  • package-lock.json
  • README.md
  • tsconfig.json
  • vercel.json

Below is the snippet from my vercel.json file:

{
  "version": 2,
  "builds": [
    {
      "src": "./app.js",
      "use": "@vercel/node"
    }
  ]
}

This is the configuration settings used for deployment on Vercel:

  • build command: tsc -p .
  • output directory: dist
  • other settings remain default

For those who may need more clarity or want to explore the project further, here is the GitHub link: https://github.com/FrankJi1019/today-diary-backend. Your feedback and insights are greatly appreciated!

Thank you in advance!

typescriptexpressbackendvercel

Answer №1

To ensure a seamless deployment, make sure to remove the output folder from your .gitignore file - for example, in my case it was 'dist'. After that, proceed with building your project.

Additionally, don't forget to update your vercel.json configuration as shown below:

{
    "version": 3,
    "builds": [
        {
            "src": "./dist/app.js",
            "use": "@vercel/node"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "/dist/app.js"
        }
    ]
}

I hope this solution proves helpful to you!

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

Exploring the latest upgrades in React 18 with a focus on TypeScript integration

I am currently working on a complex TypeScript project with React and recently made the decision to upgrade to the new version of React 18. After running the following commands: npm install react@18 npm install react-dom@18 npm install @types/react-dom@18 ...

javascriptnode.jsreactjstypescriptnpm

Demonstrating a feature in a custom Angular Material dialog box

I have a reusable custom Material UI Dialog that I want to utilize to show different components. For instance, I would like to display a Login component on one occasion and a Registration component on another. However, the issue arises when I assign my com ...

angulartypescriptmat-dialogmaterial-dialog

MUI version 5 with styled-components and ListItemButton: The specified property 'to'/'component' is not recognized

While transitioning from MUI v4 to v5, I encountered a hurdle: in v4, I utilized makeStyles(), but now aim to fully switch to styled(). Unfortunately, I am struggling to get Typescript to recognize a styled(ListItemButton)(...) with to= and component= attr ...

reactjstypescriptreact-routermaterial-ui

Managing errors when dealing with Observables that are being replayed and have a long lifespan

StackBlitz: https://stackblitz.com/edit/angular-ivy-s8mzka I've developed an Angular template that utilizes the `async` pipe to subscribe to an Observable. This Observable is generated by: Subscription to an NgRx Store Selector (which provides sele ...

angulartypescriptrxjsngrxrxjs6

Angular 4's OrderBy Directive for Sorting Results

I've been working on implementing a sorting pipe based on the code provided in this resource: The issue I'm facing revolves around handling undefined values within my data. The sorting pipe functions correctly when there are no undefined values ...

angularsortingtypescript

Storing basic input values for a function

I am currently working on developing a versatile method that is capable of accepting any number of parameters, while storing the input type for future use. Let's take a look at an example: const customizedFunction = <A extends any[]>(innerFunct ...

typescript

Troubleshooting problem with Webpack and TypeScript (ts-loader)

Seeking help to configure SolidJS with Webpack and ts-loader. Encountering an issue with return functions. What specific settings are needed in the loader to resolve this problem? import { render } from "solid-js/web"; const App = () => { ...

javascripttypescriptwebpackts-loadersolid-js

Can Typescript classes be hoisted if I use two classes in my code?

Exploring Class Definitions Certain Rules to Comply With Ensuring that the class is defined in advance helps avoid errors. class Polygon { log() { console.log('i am polygon'); } } const p = new Polygon(); // Expected: no errors p.log(); U ...

javascripttypescript

What is the method for referencing a subtype within an established type?

When working with React-native, I came across a component called FlatList which includes a property known as ListHeaderComponent. My question is how to specify the type of this property without having to manually copy and paste the original type. Currentl ...

typescript

A monotonous4 express always fails to provide a response

I'm utilizing express4-tedious to construct a SQL web API Below is the code I am using: const express = require('express'); // OAuth2 requires a web server for callback const morgan = require('morgan'); // HTTP middlewar ...

node.jsexpresstedious

Is there a way to deactivate multiple time periods in the MUI Time Picker?

Recently, I have been working on implementing a Time Picker feature with two boxes: [startTime] and [endTime]. The objective is to allow the time picker to select only available times based on predefined data: let times = [ { startTime: "01:00", en ...

reactjstypescriptmaterial-uitimepicker

Ways to decouple business logic from controllers within Express.js applications

I recently faced a question in an interview about separating business logic from controllers in Express. Do you believe this solution is the correct approach? const db =require('./db') const helpers =require('./helpers') exports.getBo ...

expresscontrollerbusiness-logic

The error message "File is not defined" in the context of express is throwing

I am attempting to convert a base64 string into an image file and send it to Firebase through Express. Everything is functioning correctly on the frontend, except for this particular section: const convertBase64ToFile = (base64String, fileName) => { ...

javascriptnode.jsexpressfile

What steps can be taken to troubleshoot and resolve this specific TypeScript compilation error, as well as similar errors that may

I am struggling with this TypeScript code that contains comments and seems a bit messy: function getPlacesToStopExchange(): { our: { i: number; val: number; }[]; enemy: { i: number; val: number; }[]; //[party in 'our' | 'enemy' ]: ...

javascripttypescriptdebuggingcompiler-errorstsc

Removing an existing ID from a populated MongoDB database requires a specific approach

When I create a post and add a comment to it using the populate method, I encounter an issue when trying to delete the comment along with its reference in the post. Although I can successfully delete the comment itself, the reference does not get deleted. ...

node.jsreactjsmongodbexpress

Incorporating an interface into a data property within a router using TypeScript and Angular

Within the app-routing-module.ts file, utilizing the data property allows us to include custom fields/variables as shown below: ... { path: 'admin-board', loadChildren: './admin-board/admin-board.module#AdminBoardPageModule', dat ...

angulartypescript

Determine the size of the resulting zip file with NodeJs

I am currently utilizing NodeJs (expressJs) along with the archiver module to stream a zip file directly to the client without storing the final ZIP file on the server (streaming zip serving). However, one issue I am facing is that I am unable to retrieve ...

node.jsexpressdownloadnode-archiver

Using SCSS variables in TypeScript inside a Vue project

Has anyone had experience with importing SASS (scss) variables into JavaScript in a TypeScript Vue 3 project? // @/assets/styles/colors.scss $white: #fff; // @/assets/styles/_exports.scss @import "./colors.scss"; :export { white: $white; } <templat ...

typescriptvue.jssass

The error message 'ReferenceError: MouseEvent is not defined' indicates that

Recently, I attempted to incorporate ng2-select into a project that relies on angular/universal-starter (TypeScript 2.x) as its foundation. (Interestingly, ng2-select worked perfectly fine when added to an angular-cli generated project.) However, upon ad ...

angulartypescriptwebpacktypescript2.0angular2-universal

How to efficiently display nested object data using Angular Keyvalue pipe

I am facing an issue with a particular HTTP request that returns an observable object containing multiple properties. One of these properties is the 'weight' object which has two key values, imperial and metric. While attempting to loop through ...

angulartypescriptobservableasync-pipe