Combining a JavaScript NPM project with Spring Boot Integration

Recently, I built a frontend application in React.js using NPM and utilized IntelliJ IDEA as my IDE for development. Additionally, I have set up a backend system using Spring Boot, which was also developed in IntelliJ IDEA separately.

My current goal is to run both projects on the same port locally so that I can easily use relative REST URL paths within the frontend application.

While I am aware that Spring Boot with Maven provides a solution for incorporating these projects, I am not satisfied with the implementation process. I prefer to treat the frontend and Java projects as distinct entities but still have them accessible through the same port. What would be the best approach to achieve this desired setup?

javascriptjavamavennpm

Answer №1

If you want to streamline your workflow in IntelliJ IDEA, you can group multiple actions together using compound actions:

  1. Start by editing the configuration settings

    https://i.stack.imgur.com/LiMHP.png

  2. Next, create both Maven and application runners for your project:

    https://i.stack.imgur.com/4777y.png

  3. Once you have set up both runners, combine them into a single compound action.

    https://i.stack.imgur.com/hzj7l.png

  4. Finally, run your compound action to execute all the grouped tasks seamlessly:

    https://i.stack.imgur.com/2B6mR.png

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

How can I extract echoed information from PHP after submitting form data through jQuery Ajax?

I am looking to transfer a file from an input form to a php script using ajax and handle the response echoed by my php script. Here is my HTML form: <form id="fileUploadForm" method="POST" enctype="multipart/form-data"> <input name="fileToU ...

javascriptphpjqueryhtmlajax

Does JSON have a special reserved key for identifying the time?

I've noticed an interesting issue when logging the json string of a key labeled tid - it always shows up as 0. Take a look at this example: var transaction = {tid:1, type:0, time:126312736}; var transStr = JSON.stringify(transaction); console.log(tra ...

javascriptjsonnode.jskey

What is the proper way to utilize Sass in a React project using npm?

When I tried to implement SASS in my ReachJs file using NPM, an error code kept popping up. Despite going over multiple guides on setting up SASS with NPM, I couldn't quite grasp how to get it functioning properly. This is the error message that appea ...

node.jsreactjsnpmsass

Encountered a JavaScript loading error during the installation of Sourcetree on a Windows 7

Encountering an error during the installation of Sourcetree on a Windows 7 (32-bit) system. Atlassian JavaScript load error We encountered issues while trying to load scripts. Please ensure that your network settings permit downloading scripts from this ...

javascriptwindowsinstallationatlassian-sourcetree

The serialization of integer keys in Jackson JSON is unsuccessful

Is there a way to transform this JSON into a Java class using Jackson? { "status": 0, "msg": "0 out of 1 Transactions Fetched Successfully", "transaction_details": { "3690": { "mihpayid": "Not Found", "status": "Not Found" } } ...

javajsonjackson

The duration for which an API Access Token remains valid is extremely brief

I recently started working with APIs and my current project involves using the Petfinder API v2 to develop a website that allows users to search for adoptable animals. The API utilizes OAuth, requiring a key and secret to obtain a token via CURL. However, ...

javascriptjsonapioauthaccess-token

Having trouble with React's useEffect and React-Query's useQuery?

As a React newbie, I'm trying to implement global error handling using a context provider and a custom hook. Main Objective: Implementing a system to handle errors at the global level. The Issue: Errors reappear immediately after being removed. I s ...

javascriptreactjsreact-hooksreact-query

When using angular $resource.save for savings, the view is forced to redraw and reflow because of the collection watcher

One of the challenges I'm facing involves loading and storing a model using $resource in AngularJS. This particular model is an aggregate with nested collections, which are displayed in an HTML view using ng-repeat. The structure of the model looks l ...

javascriptangularjs

Having trouble with AngularJS - struggling to diagnose the issue

HTML Page <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="assets/js/angular.min.js"></script> ...

javascriptangularjs

Enter the Private NPM Repository using the Department of Defense Common Access Card

Is it feasible to configure the npm command to use DoD CACs (PKI, PIV, X.509, Smart Card) for authentication with a privately-hosted repo that is set up with PKI-based mutual authentication? ...

npmsmartcard

Establish characteristics for the temporary print document

Struggling to configure the properties of a temporary file created for later printing by the user. Here's a breakdown of the process: User clicks on "Print Map Area" button on the website. A menu appears asking for preferred dimensions (e.g. A4 ...

phpjavascriptopenlayers

Is it possible to programmatically hide the Textarea and submit button for each row in a PHP-generated database table?

After spending a considerable amount of time on this project, I'm looking to incorporate a JavaScript effect (hide/unhide) into a basic submit form. Although the functionality is successful, it seems to be limited to only one row in the database tabl ...

javascriptphphtmlmysql

Is the new mui LoadingButton not available in the latest version?

According to the material UI documentation found at here, you are supposed to import LoadingButton from '@material-ui/lab/LoadingButton'; However, I am unable to locate this folder within mui/lab and the import statement is resulting in an erro ...

javascriptreactjsmaterial-ui

Can you please explain to me the purpose of the ncu -u command?

Struggling to update my Angular project in Visual Studio to a specific version of Angular. Instead of following the tutorial that provided me with the latest Angular version, I wanted to install version 6 specifically. So, I ran npm install -g @angular/ [ ...

angularnpm

What is the best way to showcase various JSON data across two different activities?

Trying to grasp the concept of parsing json data in a android app has been quite an adventure. Progress has been good overall, but there is a specific issue that I need help with. Following this tutorial has been instrumental in getting everything set up a ...

javaandroidjson

Activate the HTML drop-down option upon selecting the radio button, or the other way around

I'm attempting to accomplish a task. Below is the code snippet I am working with: <form> <input type='radio' name='radio_flavour' checked/>Unique flavour<br/><input class='double-flavoured' type=&apo ...

javascriptjquery

Questions on how to utilize ES6 Express and static methods

Recently, I've been working with Express and wanted to incorporate ES6 using babel in my project. One question that has been on my mind is related to the use of static methods for handling requests, as shown below: class MyCtrl { static index (r ...

javascriptnode.jsexpressbabeljs

Troubleshooting Bootstrap bug caused by rollupPluginBabelHelpers

I am currently working on a Bootstrap 4 website. I noticed that in Internet Explorer, the modal works fine when opened for the first time, but then displays an error in the console and does not open when trying to do so a second time on the same window. On ...

javascriptbootstrap-4frontendrollupjs

Top method for directly converting SVG to JSX within a popular React component library

Currently, I am exploring the most effective method to directly import SVG images as JSX components into my React common component library. By "common component library," I am referring to a distinct package that houses shared components utilized by variou ...

javascriptreactjsturborepo

Dealing with server-side errors using ajax technology

Hello, what is the best way to handle server exceptions using ajax and jquery? I am currently working on a web application using Java and the struts framework. In my project, I have been managing exceptions using global exception handling: <Global-exc ...

javajqueryajaxstruts