Launching a web application on Vercel, the back-end has yet to be initialized

I am currently working on a Next.js/TypeScript web application project hosted on Vercel's free tier. To run my project, I use npm run dev in the app folder to start the front end and then navigate to the back-end folder in another terminal and run npm start for the backend. Here is a glimpse of my file structure:

app
|-back-end
|---back-end functionality
|-front-end functionality

However, the issue with Vercel is that deployment only triggers npm run start (which starts the front end), causing the back end functionalities to be unavailable. Is there a way to also deploy the back end or is it not feasible with the free tier?

typescriptnext.jsweb-applicationsvercelweb-hosting

Answer №1

For the past several months, I have been developing a Next.js fullstack application that is also being deployed to Vercel. The backend of the project utilizes Postgres with a Prisma ORM. My file structure, while simplified for this explanation, consists of:

root
|-app (folder)
|-prisma (folder)
|-package.json

To run both the frontend and backend components simultaneously, I only need one terminal window open. Within my package.json file, you can find the following scripts:

"scripts": {
    "dev": "next dev",
    "build": "prisma generate && next build",
    "start": "next start",
    "lint": "next lint"
  },

If you are also deploying your project on Vercel, make sure to review the Build & Development Settings under General in the project's settings page on their website. Additionally, there may be helpful tutorials available on Vercel for deployment purposes. Good luck with your project!

One more thing I forgot to mention is that I have set up a connected git repository for auto-deployment on Vercel whenever I push changes using git push origin main. You can configure this in Settings -> General -> Git on the Vercel platform.

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

Error: NextJS cannot access the 'map' property of an undefined object

Hey everyone, I usually don't ask for help here but I'm really struggling with this piece of code. I've tried looking at various resources online but can't seem to figure out why it's not working. Any guidance would be greatly appr ...

javascriptreactjsnext.js

I am facing an issue with the Angular2 Modal Form where it only displays the data but does

Hey there, I recently started diving into Angular and I'm loving the learning process. Currently, I've managed to successfully load a form into my Modal when clicking on "viewDetails". However, as soon as I modify the Form from <form ngNoFo ...

formsangulartypescriptmodal-dialog

Utilize TypeScript to re-export lodash modules for enhanced functionality

In my TypeScript project, I am utilizing lodash along with typings for it. Additionally, I have a private npm module containing utilities that are utilized in various projects. This module exports methods such as: export * from './src/stringStuff&apo ...

javascriptnode.jstypescript

Are there any drawbacks to using <script> tags instead of npm?

As the node package manager gains popularity and takes on more responsibilities, it can be challenging to comprehend its inner workings. I appreciate the simplicity of using tags to incorporate Vue, Babel, and other tools. Despite not having experience w ...

npmweb-applicationsfrontend

Using Router.back in Next.js triggers a complete page refresh

I am working on a page called pages/conversations/[id].tsx, and here is the code: import Router, { useRouter } from 'next/router' export default function ConversationPage() { const router = useRouter() ... return ( <View ...

javascriptreact-routernext.js

The mat-slide-toggle component does not recognize the checked binding

My angular app contains the mat-slide-toggle functionality. switchValue: {{ switch }} <br /> <mat-slide-toggle [checked]="switch" (toggleChange)="toggle()">Toggle me!</mat-slide-toggle> </div> This is how the ...

angulartypescript

What is the return type of the Array.prototype.sort() method in Typescript?

I have created a custom type for arrays that are considered "sorted" like this: type Sorted<T> = T[]; This serves as a reminder for developers to provide a sorted array of any type and ensure the sorting themselves. Although I understand that Types ...

typescript

Enhancing Angular2 authentication with Auth0 for enabling Cross-Origin Resource Sharing

I have been working on implementing user authentication through Auth0. I followed the instructions provided on their website, but I am encountering authentication issues. Whenever I try to authenticate, an error message appears in the console stating that ...

angulartypescripthttp-headerscross-domainauth0

i18next fails to update the language in a Next.js application

Utilizing i18next for localization has been quite successful in translating English text to Arabic {t("title")} ==> مرحبا. However, I'm facing an issue when attempting to switch the language back to English using the following code: ...

localizationnext.jsinternationalizationi18nextnext-i18next

I need to figure out how to send an HTTPOnly cookie using a fetch request in Next.js

After finishing a comprehensive guide, I am now working on retrieving user details using a server component. However, even though the browser's cookie is there, it doesn't seem to be showing up in the request. I decided to customize my profile p ...

javascriptnext.jscookiesnext.js13httponly

Tabulate the number of items in an array based on the month and

I have received JSON data with dates indicating the creation time of multiple parcels. I want to analyze this data and calculate the total number of parcels created in each month. I am new to this process and unsure about which thread on Stack Overflow can ...

javascriptarraystypescript

Why do we often encounter a "SyntaxError: Unexpected token ;" error when a seemingly normal semicolon is present in distribution files?

Currently, I am in the process of developing a newsletter subscription API using node.js and typescript. This project involves my first experience with typeorm and PostgreSQL. Following several tutorials, I configured typeorm and created the entity types a ...

typescripttypeorm

The impact of choosing a region on an Azure Static Web App for a NextJS application

After experimenting with NextJS SSR on Azure Static Web App, I have high hopes for its capabilities. However, one important detail that seems to be missing from the documentation is how Region selection impacts performance in this particular scenario. htt ...

azurenext.jsazure-static-web-app

Having trouble accessing store state in Angular with NGXS

In the parent component, I am dispatching an action and hoping to receive the dispatched array in the child component. To achieve this, I have implemented the following code: export class ListComponent implements OnInit { @Select(ProductState.getProductD ...

angulartypescriptstate-managementngxsangular-state-managmement

Formik Fields with unique key properties

When mapping text fields, I follow this structure: { AddVehicleFields.map(({formikRef, ...input}) => ( <> <TextField key={formikRef} helperText={ getIn(formik.touched, formikRef) ? getIn(formik. ...

javascriptreactjstypescriptformik

Error: Unable to locate module: Issue: Unable to find '../components/charts/be.js' in '/vercel/workpath0/my-app/pages'

Having some trouble deploying my next.js app through Vercel. Everything works fine locally with the command 'npm run dev'. But when attempting to deploy it on Vercel using a Github remote repository, I encountered the following error: 18:07:58.29 ...

javascriptreactjswebpacknext.js

What steps can be taken to resolve the error message "Using 'null' as an index type is not allowed."?

In my TypeScript code, I have a variable called lang declared as a string type value, and a variable called direction declared as an object with two elements. I also have a function that is supposed to return the value of the direction object based on th ...

typescript

Navigating the font name in Next.js 13 - a walkthrough of the experimental app folder organization

Adding two Google fonts to layout.js: import 'normalize.css/normalize.css' import Navigation from '../components/navigation' import Footer from '../components/footer' import { Oswald , Comfortaa} from 'next/font/google&a ...

next.js

Tips for styling the Button component in the shadcn/ui library for maximum impact

I'm currently working on a project using the shadcn/ui library. How can I properly customize it to meet my specific needs? For example, let's say I require an extra large red rounded Button for a call-to-action button in my project. What would be ...

reactjstypescriptnext.jstailwind-cssshadcnui

To implement a server-side 301 redirect to force the URL to go to www in React.js using Next.js

I am currently facing an issue with routing my website to redirect to the www server side. Specifically, when a user visits my website example.com, I want to redirect them to www.example.com. To achieve this, I have implemented a redirect using Next.js in ...

reactjshttp-redirectnext.jsserver-sidehttp-status-code-301