Personalize the build folder within the 'npm start' command

I've developed an Angular app using npm and web-pack, which is then served on a Tomcat web server.

When the command npm run build is executed, all JS files are built into the /build directory of the project. However, when running npm start, it uses the /out directory instead.

Is there a way to configure npm start to use the /build directory as well?

The reason for my inquiry: Currently, the JS content is served alongside the Java backend, resulting in no distinction between production and development runs (both utilize the same build folder). It would be beneficial to have consistency on the frontend side as well.

UPDATE: I managed to resolve the issue by adjusting the webpack configuration

Under the hood, npm start executes webpack, which can be configured using a .js script.

I have made changes to the section as follows:

output: {
    path: helpers.root('../build'),
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js'
}

This now points to the ./build directory.

Answer №1

If you want to concurrently run two scripts, consider using concurrently. In your package.json, you can set it up like this:

"scripts": {
  "client": "cd build && npm start",
  "server": "cd out && npm start",
  "start": "concurrent \"npm run client\" \"npm run server\"",
},
"devDependencies": {
  "concurrently": "^3.5.0"
}

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

What is the duration that browsers retain downloaded assets during a single session?

Is it necessary to preload data from the server in order to have immediate access when needed? The data is stored in a file named "data.json". Initially, I considered storing data.json in an object and referencing it whenever required. However, given tha ...

The WYSIWYG niceEdit editor is incompatible with textareas generated through ajax-php calls, causing it to malfunction

My AJAX-generated textarea is not converting into a WYSIWYG Editor once loaded. The normal textarea works fine, but I need assistance in solving this issue. <!DOCTYPE html> <html> <head> ........ $.ajax({ type: "POST", ...

What could be causing this error to appear: Unable to locate the file './components/forms/LoginForm'

What could be causing the error message to appear when I run the npm run dev command? npm run development ERROR in ./resources/js/app.js 5:0-53 Module not found: Error: Can't resolve './components/forms/LoginForm' in 'D:\wamp64&bs ...

Will there ever be a possibility in the future to compile from D 2.0 to Javascript?

An experienced C++ programmer (that's me) is venturing into other programming languages and considering the value of learning more about D 2.0. The clean, fresh rewrite of D has caught my eye with its pragmatic and wise choices. Now, I'm eager to ...

Asynchronous JavaScript combined with a for loop

I'm interested in accomplishing a straightforward task using Nodejs and Async. Let's say I have a total of pages, which is 4 in this example. I am looking to send a request 4 times and then execute a callback once all responses have been receive ...

The node.js code is running smoothly without any errors being prompted

When attempting to execute the following Node.js code in command prompt, it fails to run without displaying any errors. I have already installed the necessary pubnub package using (npm install pubnub). However, the issue persists. Could there be something ...

React array mapping issue does not produce any error message

I have exhaustively searched through every answer on Stack Overflow in hopes of finding a solution to my problem. However, I find myself at an impasse as there are no error messages appearing in the console. It seems that there is a hidden bug eluding my d ...

Encountering a JS error that states: "Uncaught SyntaxError: missing ) after argument list" when running the following code

I keep encountering the error message: "Uncaught SyntaxError: missing ) after argument list" when I try to call the delete function within the createHtmlview function. console.log("Delete Item is being called") } ...

Output the name of the file while executing the ant process

Currently, I am utilizing YUI compressor within an ant build process to compress CSS and JavaScript files. I would like the compressor to display the name of each file it is processing as it goes along, so that in case of an error, I can easily pinpoint wh ...

PHP and MySQL with jQuery and AJAX combine to create a real-time news feed update system similar to Twitter

Is there a way to automate the news feed on my website so that it periodically checks for new status updates? I would like it to display a button labeled "(?) New Messages" when there are new updates, and then load only the new ones when the button is clic ...

Utilizing a combination of a `for` loop and `setInterval

I've been encountering an issue for the past 3-4 hours and have sought solutions in various places like here, here, here, etc... However, I am unable to get it to work in my specific case: var timer_slideshow = {}; var that, that_boss, has_auto, el ...

Error encountered: Exceeded maximum update depth in Material UI Data Grid

Encountering an error or warning when inputting rows in the table that is causing the screen to freeze. Warning: Maximum update depth exceeded. This issue can arise when a component triggers setState within useEffect, but useEffect doesn't have a de ...

Issue with Mouse Hover not functioning properly across various 3D objects

Trying to create a 3D line chart? Check it out Here Currently, the points and lines are working fine. However, I only want to detect mouse hover on the points (spheres) and not on the lines or grid. To achieve this, I have segregated all elements into dif ...

AngularJS grid designed to emulate the functionalities of a spreadsheet

I have been facing challenges with Angular while attempting to recreate a spreadsheet layout in HTML using ng-repeat. Despite extensive research, I have not found a solution. My goal is to display data in a table format as shown below: <table> & ...

The compatibility issue between Angular JS App and JSPDF is causing malfunctions specifically in Internet Explorer

I am currently working on an Angular JS application that utilizes JSPDF for generating PDFs. While the PDF generation functionality works perfectly fine on Chrome, Firefox, and Safari, it encounters issues on Internet Explorer (IE). The specific error mes ...

Font size for the PayPal login button

I am looking to adjust the font size of the PayPal Login button in order to make it smaller. However, it appears that the CSS generated by a script at the bottom of the head is overriding my changes. The button itself is created by another script which als ...

Utilize JavaScript to Replace KeyPress Event on Input Field

While attempting to substitute the key press of "K" with "Z" in an input field, I managed to accomplish it successfully. However, there seems to be a slight delay that causes the user to observe the transition from "K" to "Z". Below is the code that I use ...

After clicking, the React mobile navigation fails to collapse

At a certain breakpoint, my mobile navigation bar appears with a MENU button. When the MENU button is clicked, the menu opens and the button changes to CLOSE. Clicking on CLOSE collapses the menu, returning the button to MENU. However, when I click on th ...

Is there a way to adjust the padding temporarily?

Important Note: Despite the misleading title of my question, it doesn't accurately reflect my actual query (sort of). Below is the code snippet in question: .one{ background-color: gray; } .two{ padding: 20px; } <div class = "one"> < ...

Creating a scrolling effect similar to the Nest Thermostat

After researching countless references, I am determined to achieve a scrolling effect similar to the Nest Thermostat. I came across this solution on this JSFiddle, but unfortunately, the parent element has a fixed position that cannot be utilized within my ...