0

I'm primarily a java developer and have minimal node.js experience. I've developed a java spring app, and decided I wanted a minimal front end for it, which I've done in React, created with the Create React App. I had problems deploying and running it in AWS with certain port restrictions, so it was recommended to me to use the frontend-maven-plugin to package it all together into a jar and run it from there. I have done this successfully, at least locally.

However, now I want to go back into development mode and add more features, it seems that something is blocking the response from the server from getting back to the front end. When I say development mode, I mean I've gone back to use 'npm start', with the local react client running thru port 3000, and an entry in package.json for the proxy to point to my local running api. I have verified that the request from the React page is getting to the server, but then the response never gets back to the client. I've looked at the network traffic in Chrome developer and all it says is "Failed to load response data".

When I make a request to the same api endpoint, in a browser for example, the response is returned fine. The response is a simple json.

I'm using fetch in the React components to call the backend api. Example below.

I'm assuming that node or NPM installed something when I ran it via maven and frontend-maven-plugin that is affecting this. NPM is a giant black box to me, so I'm not sure how to further diagnose this or look for what is blocking the response to the react page.

project structure looks like this:

/root-app-repo-name
  /app - the React app; unfortunately named when created with Create React App
    /build
    /node
      /node_modules
    /node_modules
    /public
    /src
  /src - java source
  /target
    maven build output jar is here
  pom.mxml

Why are there 2 node_modules folders?

Sample React component calling API with fetch:

import React, { Component } from 'react';
import { Button, Container, Table } from 'reactstrap';

class Account extends Component {

  constructor(props) {
    super(props);
    this.state = {account: {}, isLoading: true};
  }

  componentDidMount() {
    this.setState({isLoading: true});

    fetch(process.env.API_URL+'/api/account')
      .then(response => response.json())
      .then(data => this.setState({account: data, isLoading: false}));
  }

  render() {
    const {account, isLoading} = this.state;

    if (isLoading) {
      return <p>Loading...</p>;
    }

    return (
      <div>
        <Container fluid>
            Account Num : {account.accountNum}
        </Container>
      </div>
    );
  }
}

export default Account;
user26270
  • 6,904
  • 13
  • 62
  • 94
  • Sorry, this description is just not enough to diagnose the issue. – Michael Mar 02 '20 at 15:59
  • "*I'm assuming that node or NPM installed something when I ran it via maven*" If you check the maven output, it will tell you that it is installing Node into its own subdirectory (by default `target/node/`). This version of node is completely isolated from any version that you may have installed manually. – Michael Mar 02 '20 at 16:01
  • I would avoid doing any operations using NPM directly. It seems like that is a source of confusion for you. It's very hard to tell from your description what you are even running. Build it using Maven and then run the JAR. Uninstall your manually installed version of Node if it's easier. You shouldn't need it. – Michael Mar 02 '20 at 16:03
  • I used Create React App to create the minimal single-page app; it's instructions say to use `npm start`; I want to continue to develop this app; seems like I should continue to use npm to do that? – user26270 Mar 02 '20 at 16:30
  • `npm start` creates its own web server, completely ignoring Spring's embedded one. – Michael Mar 02 '20 at 17:03
  • I know, but prior to doing the maven build with the frontend-maven-plugin, I had been running both the web server created via npm start, and the spring app, and had the react pages calling the endpoints in the spring app, with no problem; after the maven build, when running the same 2 server processes, I'm getting this 'no response' problem in the react page, even when the request is hitting the spring app – user26270 Mar 02 '20 at 17:18
  • How are you telling your NPM-supplied front-end to hit the entirely different port opened by Spring? – Michael Mar 02 '20 at 17:22
  • with fetch; `fetch(process.env.API_URL+'/api/account').then(response => response.json()).then(data => this.setState(json stuff, isLoading:false))); – user26270 Mar 02 '20 at 17:26
  • What does `process.env.API_URL+'/api/account'` resolve to? Can you hit that URL directly? When you go to Network tab in Chrome's devtools, what do you see for the request? – Michael Mar 02 '20 at 17:39
  • it resolves to localhost:8080/api/account. Yes I can hit that URL directly, in the browser, or via Postman, and get the valid response. In Chrome devtools, looking at the Network item, I can select this request, and in the response it only says 'Failed to load response data'. It looks like there are Response Headers, however. – user26270 Mar 02 '20 at 18:47

0 Answers0