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

"Encountered an error saying 'Cannot access property `message` of null' when trying to establish a connection to MongoDB

While working on setting up a walking skeleton for my MEAN app, I managed to successfully connect to the mongodb (multivision db opened). However, as I proceed further, I am encountering an error mentioned in the title when attempting to display a message ...

node.jsmongodbexpressmongoose

Delivering an Angular 1.x app through Express while granting access to static directories

I have configured my Express server like this: // src/server/server.js var express = require('express'); var app = express(); app.use('/libs', express.static('./node_modules/')); app.use('/app', express.static(&apo ...

angularjsexpress

Issue with specific route causing server to throw 500 error

Recently, I have been working on a small school project that involves creating our own API and connecting it to an Angular front end. While following some tutorials, I encountered an issue where my application started throwing internal server error 500 af ...

javascriptnode.jsexpress

"Using Node.js Express 4.4 to efficiently upload files and store them in a dynamically

Looking for recommendations on the most efficient method to upload a file in node.js using express 4.4.1 and save it to a dynamically created directory? For example, like this: /uploads/john/image.png, uploads/mike/2.png ...

javascriptnode.jsexpressupload

A data type that exclusively accepts values from an enumerated list without mandating the inclusion of every possible value within the enum

Here's a code snippet I'm working with: enum Foo { a, b, c } type Bar = { [key in keyof typeof Foo]: string; } const test: Bar = { a: 'a', b: 'b' }; I'm encountering an issue where the code is complaining ...

typescript

What is the process of utilizing app.get to direct to a different webpage within Node.js and express?

I've been experimenting with app.get in order to navigate to a different HTML page. For example, I'd like typing localhost:3000/newpage to redirect me to newpage.html So far, I've only managed to route to another JS file using app.get. Is t ...

node.jsexpress

Creating a POST request in a Node.js Express application

I am currently attempting to send a POST request for OTP using Node.Js Express. The following is the code snippet I have for sending a post request using request, but I am interested in implementing this functionality using Express instead. const request = ...

node.jsexpress

What is the best way to retrieve and display a PDF file through an API in VueJS?

I am looking to display a file from my API in my VueJS client. Specifically, when accessing a certain URL, the file (pdf, text, or image) should open if the browser supports it (similar to how Chrome opens PDFs). I want to achieve this using VueJS or just ...

javascriptexpressvue.js

Sending a CSS class to an Angular library

In my development process, I am currently working on creating a library using Angular CDK specifically for custom modals. One feature I want to implement is the ability for applications using the library to pass a CSS class name along with other modal conf ...

cssangulartypescriptangular-cdk

Tips for implementing fetch in a GET request and displaying the outcomes on the screen

Currently, I am utilizing express router in Node for an endeavor to display a page with data retrieved from an API. Unfortunately, no results are returned, and I can confirm that the issue does not lie with the API itself. Upon manual inspection in the con ...

javascriptnode.jsexpressfetchrouter

Simultaneously accessing multiple APIs

I am currently facing an issue with calling two API requests sequentially, which is causing unnecessary delays. Can someone please advise me on how to call both APIs simultaneously in order to save time? this.data = await this.processService.workflowAPI1(& ...

angulartypescript

The content of InnerHtml does not appear on the screen

I am currently building a web project using HTML and Bootstrap, however, I am facing an issue where my content is not showing up in the browser. Below is the code snippet that I am working with: let str = "" for (let item of r.articles) { s ...

javascripthtmlexpressbootstrap-5web3js

Issue with Angular/Jasmine: Undefined property 'pipe' not readable

I have been struggling to resolve a problem with Angular 9, Jasmine, and RxJS without much success. While my unit tests run successfully in Jasmine, there are certain lines of code that do not get executed. Despite scouring multiple posts for assistance, ...

angulartypescriptunit-testingrxjsjasmine

"Access Denied" error encountered when trying to use SendGrid to send emails in a node.js environment

Having trouble sending emails as I keep encountering an error message whenever I try. I've exhaustively attempted various solutions but to no avail. The error message pops up from Postman when accessing the localhost:4000/api/send-mail route. I'v ...

node.jsexpresssendgrid

Tips for Maintaining User Data Across Pages in React using React-Router-Dom and Context

I've been tackling the login functionality of a client-side application. Utilizing React alongside TypeScript, I've incorporated react-router-dom and Context to manage the user's data when they log in. However, upon refreshing the page, the ...

reactjstypescriptauthenticationreact-context

Error in TypeScript React component due to prop-types ESLint in React

I'm in the process of setting up a typescript-react-eslint project and I've encountered an eslint error with this boilerplate component: import * as React from "react"; interface ButtonProps { children?: React.ReactNode, onClick?: (e: any) ...

reactjstypescripteslint

Suggestions for enhancing or troubleshooting Typescript ts-node compilation speed?

Recently, I made the switch to TypeScript in my codebase. It consists of approximately 100k lines spread across hundreds of files. Prior to the migration, my launch time was an impressive 2 seconds when using ESLint with --fix --cache. However, after impl ...

typescript

Oops! The program encountered an error where it cannot assign a value to the 'id' property of an undefined object while trying to store a session in redis

I am currently working on an Angular4 login application and I am looking to store sessions in Redis. To accomplish this, I am utilizing Express session. However, I have encountered the following error: req.session.id = userName; ...

javascriptangularexpresssessionredis

Is it possible to dynamically adjust the size of the CircleProgressComponent element in ng-circle-progress?

For my current Angular 11 project, I am facing the challenge of dynamically changing the size of the ng-circle-progress library's CircleProgressComponent element. After some research, I discovered that the element's size can be adjusted by apply ...

cssangulartypescript

Error: THREE.MTLLoader cannot be instantiated 2.0

Previously, I posted a question regarding this issue: Uncaught TypeError: THREE.MTLLoader is not a constructor I was able to resolve it by modifying the three-mtl-loader file. However, since I plan to upload my work to GitHub later, I need to find a solut ...

typescriptthree.jsobjloader