npm run dev can't connect to the client server

Question

I am new to npm and javascript but I am trying to use an existing npm project to run and test it locally. I use the command npm run dev to activate serve and client script at the same time. To be able to connect to server url, I used the http://localhost:5200/ as suggested by the counsel from the command above and I get the following message "{"hi":"there"}" from the browser. I was hoping this command lands me to the website that was created and built for this project. I got warnings but not error. Does the warnings could lead to connectivity issues? How do I resolve this and connect to client server?

I really appreciate any help or pointer to resolve this.

Here is the counsel output when I ran the command:

> backendserver@1.0.0 dev
> concurrently "npm run server" "npm run client"
 
[1]
[1] > backendserver@1.0.0 client
[1] > npm run start --prefix client
[1]
[0]
[0] > backendserver@1.0.0 server
[0] > nodemon index.js
[0]
[1]
[1] > client@0.1.0 start
[1] > react-scripts start
[1]
[0] [nodemon] 1.19.4
[0] [nodemon] to restart at any time, enter `rs`
[0] [nodemon] watching dir(s): *.*
[0] [nodemon] watching extensions: js,mjs,json
[0] [nodemon] starting `node index.js`
[0] devUser
[0] App listening on port 5200
[1] Attempting to bind to HOST environment variable: x86_64-apple-darwin13.4.0
[1] If this was unintentional, check that you haven't mistakenly set it in your shell.
[1]
[1] [HPM] Proxy created: /api/*  ->  http://localhost:5200/
[1] Compiled with warnings.
[1]
[1] ./src/components/searches/QueryHookForm_v3.js
[1]   Line 16:9:    'options1' is assigned a value but never used         no-unused-vars
[1]   Line 22:9:    'options2' is assigned a value but never used         no-unused-vars
[1]   Line 222:25:  'register' is assigned a value but never used         no-unused-vars
[1]   Line 373:7:   'mapStateToProps' is assigned a value but never used  no-unused-vars
[1]
[1] ./src/components/plot/TestPlot_v12.js
[1]   Line 1:17:  'useState' is defined but never used               no-unused-vars
[1]   Line 1:27:  'useEffect' is defined but never used              no-unused-vars
[1]   Line 1:38:  'useRef' is defined but never used                 no-unused-vars
[1]   Line 31:7:  'geneAccessor' is assigned a value but never used  no-unused-vars
[1]   Line 54:9:  'inputData2' is assigned a value but never used    no-unused-vars
[1]
[1] ./src/components/dataset/DataSetDownload_v2.js
[1]   Line 20:67:   Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[1]   Line 23:107:  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[1]   Line 26:46:   Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[1]
[1] ./src/components/tables/ReactTableContainer_v3.js
[1]   Line 26:25:   Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener                                                                                                                                                                                                                                             react/jsx-no-target-blank
[1]   Line 43:21:   The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
[1]   Line 93:21:   The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
[1]   Line 153:21:  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
[1]
[1] ./src/components/landing/UseCases/CollapsibleComponent/Panel.js
[1]   Line 27:26:  Expected '===' and instead saw '=='  eqeqeq
[1]   Line 34:26:  Expected '===' and instead saw '=='  eqeqeq
[1]
[1] ./src/components/header/Header_v3.js
[1]   Line 32:33:  Expected '===' and instead saw '=='  eqeqeq
[1]
[1] ./src/components/plot/OptionsGroup/OptionsGroup.js
[1]   Line 3:10:  'fetchGeneSummary' is defined but never used                                                                                               no-unused-vars
[1]   Line 38:7:  React Hook useCallback has missing dependencies: 'option1.name' and 'setGroupOptions'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
[1]   Line 57:7:  React Hook useCallback has missing dependencies: 'option2.name' and 'setGroupOptions'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
[1]
[1] ./src/components/footer/Footer.js
[1]   Line 40:22:  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[1]
[1] ./src/components/App.js
[1]   Line 4:8:  'ReactGA' is defined but never used  no-unused-vars
[1]
[1] ./src/components/documentation/Documentation_v3.js
[1]   Line 50:75:    Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[1]   Line 641:88:   Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[1]   Line 645:57:   Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[1]   Line 662:103:  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[1]
[1] ./src/components/plot/PiePlot_v12.js
[1]   Line 6:10:    'elementType' is defined but never used                                                                                                                                                                                                                                                       no-unused-vars
[1]   Line 15:25:   'selectedFilters' is assigned a value but never used                                                                                                                                                                                                                                          no-unused-vars
[1]   Line 15:42:   'setSelectedFilters' is assigned a value but never used                                                                                                                                                                                                                                       no-unused-vars
[1]   Line 28:45:   Expected '===' and instead saw '=='                                                                                                                                                                                                                                                           eqeqeq
[1]   Line 28:61:   Unexpected mix of '&' and '|'                                                                                                                                                                                                                                                                 no-mixed-operators
[1]   Line 28:67:   Unexpected mix of '&' and '|'                                                                                                                                                                                                                                                                 no-mixed-operators
  Line 310:49:  Unexpected string concatenation of literals                                                                                                                                                                                                                                                   no-useless-concat
[1]   Line 332:49:  Unexpected string concatenation of literals                                                                                                                                                                                                                                                   no-useless-concat
[1]   Line 354:16:  'x_coord' is assigned a value but never used                                                                                                                                                                                                                                                  no-unused-vars
[1]   Line 381:5:   React Hook useEffect has missing dependencies: 'colors', 'createArc', 'createArcOver', 'createOuter2Arc', 'createOuterArc', 'createPie', 'filteredData', 'format', 'props.height', 'props.keyID', 'props.outerRadius', and 'props.width'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
[1]
[1] ./src/actions/index.js
[1]   Line 6:10:  'FETCH_WEATHER' is defined but never used  no-unused-vars
[1]
[1] ./src/components/studies/ReactBootstrapTableForStudies.js
[1]   Line 73:15:  'defaultSorted' is assigned a value but never used  no-unused-vars
[1]
[1] ./src/components/fileupload/FileUpload_v2.js
[1]   Line 75:13:  'payload' is assigned a value but never used          no-unused-vars
[1]   Line 151:7:  'setFieldTouched' is assigned a value but never used  no-unused-vars
[1]
[1] Search for the keywords to learn more about each warning.
[1] To ignore, add // eslint-disable-next-line to the line before.
[1]

Answer 1

5200 is the port for the backend, the frontend must be on a different port

it's usually port 3000, or configured in.env file