Getting a 404 error when trying to get Express and React to connect

Question

I'm trying to get a simple API request to get bitcoin values and in the browser address http://127.0.0.1:3000/ in my chrome browser I get a "Cannot Get /" on the browser and a 404 when I open up the dev tools that says "GET http://127.0.0.1:3000/ 404 (Not Found)"

When I go to http://127.0.0.1:3000/etf I get an object of the data I need, so I don't think its an axios issue.

Below is my package.json

{
  "name": "etfportfolio",
  "version": "1.0.0",
  "description": "Tool to use axios to get the MTD returns for ETFs managed in an ETF portfolio and compare to their benchmark of the S&P 500 and Barclays AGG.",
  "main": "server/server.js",
  "scripts": {
    "react-dev": "webpack -d --watch",
    "test": "test",
    "start": "nodemon --watch server/server.js",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/WDHudson/ETFPortfolio.git"
  },
  "author": "William Hudson",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/WDHudson/ETFPortfolio/issues"
  },
  "homepage": "https://github.com/WDHudson/ETFPortfolio#readme",
  "dependencies": {
    "axios": "^0.21.1",
    "babel-polyfill": "^6.26.0",
    "body-parser": "latest",
    "chart.js": "latest",
    "express": "latest",
    "json-server": "latest",
    "mathjs": "^7.1.0",
    "moment": "latest",
    "morgan": "latest",
    "path": "latest",
    "react": "latest",
    "react-dom": "latest"
  },
  "devDependencies": {
    "@babel/core": "latest",
    "@babel/preset-env": "latest",
    "@babel/preset-react": "latest",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "latest",
    "css-loader": "latest",
    "file-loader": "latest",
    "html-webpack-plugin": "latest",
    "nodemon": "latest",
    "style-loader": "latest",
    "webpack": "^4.21.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-hot-middleware": "^2.24.3"
  }
}

Below is my webpack.config.js

var path = require('path');
var SRC_DIR = path.join(__dirname, '/client');
var DIST_DIR = path.join(__dirname, '/public');

module.exports = {
  entry: `${SRC_DIR}/index.jsx`,
  output: {
    filename: 'bundle.js',
    path: DIST_DIR
  },
  module: {
    rules: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader" }],
  }
};

Below is my server.js file

var express = require('express');
var bodyParser = require('body-parser');
const axios = require("axios");

var app = express();
app.use(express.static(__dirname));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/etf', (req, res) => {
  console.log('check')
  axios.get(`https://api.coindesk.com/v1/bpi/historical/close.json?start=2019-08-07&end=2020-08-06`)
    .then(response => res.send(response.data.bpi))
    .then(res => console.log(res.body))
    .catch(err => console.log('error with app.get: ', err))
})


app.listen(3000, function () {
  console.log('listening on port 3000!');
});

module.exports = app;

Below is my app.jsx file

import React from 'react';
import axios from 'axios';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      info: []
    }
  }

  componentDidMount() {
    axios.get('/etf')
      .then(res => this.setState({ info: JSON.stringify(res.data) }))
      .catch(err => console.log('error with axios.get: ', err))
  }

  render() {
    return (
      <div>
        <h1>TEST</h1>
      </div>
    )
  }
};

export default App;

Answer 1

It looks like that you are missing a GET function for localhost:3000/.

You could try adding this function in your server.js file.

app.get('/', (req, res) => {
 res.send('Test');
});

If at the browser it returns a "Test" string upon accessing localhost:3000, most likely you are using the same or maybe a different port for your react.

If you want to render the results you could use this:

import React from 'react';
import axios from 'axios';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      info: []
    }
  }

  componentDidMount() {
    axios.get('/etf')
      .then(res => this.setState({ info: JSON.stringify(res.data) }))
      .catch(err => console.log('error with axios.get: ', err))
  }

  render() {
    return (
      <div>
        <h1>TEST</h1>
        
        {this.state.info.map((data, index) => (
          <div>{data}</div>
        ))
        }
      </div>
    )
  }
};

export default App;

You could refer to this documentation for lists https://reactjs.org/docs/lists-and-keys.html