'npm run dev can't connect to the client server
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:
> [email protected] dev
> concurrently "npm run server" "npm run client"
[1]
[1] > [email protected] client
[1] > npm run start --prefix client
[1]
[0]
[0] > [email protected] server
[0] > nodemon index.js
[0]
[1]
[1] > [email protected] 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]
Solution 1:[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
try to use npm run client for checking frontend
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Nikita |