Changing the filepath for the build script in the package.json file for a NextJS project when deploying to Heroku

My project is currently structured as

Root:

Folder 1/
Folder 2/
Folder 3/
..
Frontend/

The front end folder contains my Nextjs project, package.json file, and everything else. However, Heroku requires the content in the Frontend/ folder to be in the root directory, which I am hesitant to do as it may break my project. In an attempt to avoid this, I have copied the package.json file to the root directory.

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,  
  "engines": {
    "node": "17.x"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "devDependencies": {
    "eslint": "8.15.0",
    "eslint-config-next": "12.1.6",
    "fs": "^0.0.1-security",
    "next": "^12.2.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "solc": "^0.8.15",
    "web3": "^1.7.4",
    "web3-utils": "^1.7.4"
  }
}

Is there a way to specify the file path to the Frontend folder so that when Heroku runs the build script, it knows to look into the frontend folder instead of the root directory?

javascriptherokunext.js

Answer №1

After some investigation, I finally figured out the solution in my package.json file. When Heroku runs the build script, it needed to include a change from

    "build": "next build",

to

    "build": "cd frontend ; next build",

This adjustment successfully resolved the issue at hand.

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

Is it possible to check if something is "ready" by using a combination of setTimeout and recursive functions?

I am currently working on a solution to determine when an asynchronous call is "ready" or not. I have a function that uses $.ajax which, upon success, sets a boolean variable in the global scope and some other data. Prior to making the ajax call, the boole ...

javascriptjquery

Toggle the visibility of images with input radio buttons

Explanation I am attempting to display an image and hide the others based on a radio input selection. It works without using label, but when I add label, it does not work properly. The issue may be with eq($(this).index()) as it ends up selecting a differ ...

javascriptjqueryhtmlcss

Error message: Invalid credentials for Twitter API authentication

My attempts to post a tweet seem to be failing for some reason. I suspect that the issue might be related to the signature string, but from following Twitter's instructions on signing requests, everything appears correct. Here is the code snippet I ...

javascriptangularjstwitter

Angular Navigation alters the view

I want to navigate to a different page using Angular routing, but for some reason it's not working. Instead of moving to the designated Payment Component page, the content is staying on my Main Component. Why is this happening? app.routing.module.ts ...

javascriptangulartypescriptangular2-routing

Tips for configuring TypeScript in a monorepo to successfully compile private packages

I have configured a monorepo using turborepo that includes Nestjs for the backend and Nextjs for the frontend. To reuse prisma definitions, I separated them into their own package with its own tsconfig. In the index file of my database package where prism ...

reactjstypescriptnext.jsnestjsturborepo

The React JS @material-ui/core Select component encountered an error when attempting to access a property that does not exist: 'offsetWidth'

Struggling with the Select component from @material-ui/core, encountering the error below: Cannot read property 'offsetWidth' of null Any assistance would be greatly appreciated. Link: codesandbox Code: import React from "react"; import { ...

javascriptreactjsmaterial-ui

Passport causing Node.JS application to crash

After developing my app to work locally, I made all necessary adjustments for Heroku. Procfile web: node app.js package.json { "name": "HipsterMatch", "version": "0.0.1", "private": true, "scripts": { "start": "nodemon app.js" }, "depen ...

node.jsherokuexpresspassport.jspassport-facebook

Refresh the page before the conclusion of the express-Node js function

I am encountering an issue with a function that functions properly with small files but fails when dealing with large files. The problem occurs when the axios post request in Express JS ends, causing a page refresh. I am using React JS on the client side a ...

javascriptnode.jsreactjsexpressaxios

My goal is to utilize React JS to generate a table by sending the values through props using an array of objects

I have experience building tables as part of various projects, but I am facing challenges creating a table based on the provided format for this specific project. My goal is to utilize the RecordTable Component, render the table component, pass the row com ...

javascriptjqueryreactjsajaxreact-native

Retrieve childNodes of the Select All input using jQuery from the container node with the class name "container"

I am trying to retrieve the text value of all the childNodes within the container of the corresponding input when the Select All checkbox is checked. Currently, my code captures the text inside each input label. However, it only logs the label (e.g. &apos ...

javascriptjquerydomleaflet

Verify whether the field includes a minimum number of numerical digits

I am currently using this script to validate whether a field is empty or not. The script works well for me, but I would like to add a condition that the field must contain at least 10 digits (numbers). If it doesn't meet this requirement, I want to di ...

javascriptformsvalidationerror-handling

Does the AJAX load more feature duplicate the existing data?

I've successfully implemented a PHP code that generates JSON data from WordPress posts in the database. By using AJAX, I'm able to load this JSON on my HTML page without any issues. Now, I want to enhance this functionality by adding a "Load Mo ...

javascriptphpjqueryajaxwordpress

Investigate the CSS display property of an element using JavaScript

Can JavaScript be used to determine if an element's CSS display == block or none? ...

javascriptcss

Why won't the props pass down to the child component?

I am facing an issue while trying to pass two values as props from a React component "App" to its child "Todo". The values being passed are "title" and "completed" from a json placeholder API. The JSON object is correct and has been verified. The problem ...

javascriptreactjschildrenreact-props

The ActivatedRoute.routeConfig object appears to be empty in an Angular 2 project built with Angular-cli

Two projects I've created using angular-cli are working perfectly fine. However, in one of them, the routeConfig is showing as null and I can't figure out what's causing this issue. Both projects have identical package.json files, so there ...

javascriptangularroutesangular-clirouteconfig

The jquery selector fails to retrieve all elements

On the upcoming web page, I am attempting to use Jquery to select all <li> elements. Specifically, I want to target all the products contained within <ul class=search-result-gridview-items">. You can find the products here: I have made attempt ...

javascriptjqueryhtmlcss

Is there a proper method in AngularJS for factories to return objects?

I am facing an issue in retrieving POST data in an Angular.js project. This is the factory I am using: angular.module('mtApp').factory('getKey', function($http) { return { getData: function(data) { var key=&apos ...

javascriptangularjsangularjs-factory

Acquire JSON data structures using Node.js

I've been struggling to find a solution using just keywords - endless scrolling, yet all I can find are tutorials on getting data from JSON structure, rather than getting data structure from JSON. If you're unsure what my end goal is, here are s ...

javascriptnode.jsjsondata-structuresextract

Convert the jQuery functions click(), hide(), and fadeIn() into their equivalent native JavaScript functionalities

I'm determined to speed up my page by reducing requests. Does anyone have a solution for keeping the functionality of the code below without having to load the entire JQuery library? $("#div1").click(function () { $("#div2).hide(); $("#div3). ...

javascriptjquery

Differentiate among comparable values through placement regex

I'm currently tackling a challenge involving regex as I work on breaking down shorthand CSS code for the font property. Here is my progress thus far: var style = decl.val.match(/\s*(?:\s*(normal|italic|oblique)){1}/i); style = style ? style ...

javascriptcssregex