Proxy error: Could not proxy request /api/games from localhost:3000 to http://localhost:8080/ (ECONNREFUSED).
code in action.js (Redux)
export function fetchGames(){
return dispatch =>{
fetch('/api/games')
}
}
import express from 'express';
import mongodb from 'mongodb';
const app = express();
const dbUrl = 'mongodb://onkar localhost:27017/crudwithredux';
mongodb.MongoClient.connect(dbUrl, function(err, db) {
app.get('/api/games', (req, res) => {
db.collection('games').find({}).toArray((err, games) => {
res.json({ games });
});
});
app.listen(8080, () => console.log('Server is running on localhost:8080'));
});
** Hi i m onkar, I am new in react js. i getting error in server page. I have mongo db database so i m retrieve the data from mongo db. and show in Json format in react js using redux.**
Related
I'm trying to successfully connect my backend Express app to my frontend React app but I'm having difficulty with the actual connection process and I think it's to do with the "proxy" pathway I'm using in my package.json file in my react app.
Express
const express = require('express')
const app = express()
let name = "Justin"
app.get('/', (req, res) => {
res.send(name)
})
app.listen(40000, () => {
console.log("Im Listening on port 40000")
})
React
import './App.css';
function GetData() {
fetch('/')
.then((response) => response.text())
.then(function (data) {
console.log(data)
}
)};
function App() {
return (
<div className="App">
<button onClick={GetData}>Get Data</button>
</div>
);
}
export default App;
I've made sure to add the proxy route to the express server within my package.json file
"proxy": "http://localhost:40000",
The only thing that happens when I click the button is a text representation of the react app html page source.
What I want to see is the name "justin" displayed in the console when I click the button.
Would love a quick solve
I'm trying to connect to stripe server using express framework but I keep getting this error in the image I attached above.
import express from "express";
const app = express();
const port = 3000;
const PUBLISHABLE_KEY = "pk_test......";
const SECRET_KEY = "sk_test.........";
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});
You have not did a GET method. Try to do - above the listening:
app.get('/',(req, res)=>{
res.send('Hello World')
});
Now, when you call http://localhost:3000/ you will see Hello World.
Hey i have a express app with a api route
app.get("/api", (req, res) => {
res.json({ message: "Its work !! !! !" });
});
And i have a reactjs app with that in package.json
"proxy": "http://localhost:3001",
When i want to go on api route of express app (http://localhost:3001/api) its work but its not work with my reactjs app when i go on (http://localhost:4000/api)
i start my webserver with
yarn run clean && cross-env NODE_ENV=development webpack-dev-server --host localhost --hot --https
The problem can be a problem from react router dom?
Resolved Solution:
In webpack config add proxy to devserver
As you are proxying requests, you can access the API endpoints from within react application (proxy parses requests to API), but nevertheless your API is still on its server (or another port on localhost f.e.)
Your React app just proxies the request
Example how to query your data with proxy configured:
import { useState, useEffect } from "react";
import axios from "axios";
const App = () => {
const [data, setData] = useState();
useEffect(() => {
const getData = async () => {
// you can use /api here as you proxi it to your API url
// f.e. localhost:5000/api
const response = await axios.get("/api");
setData(response.data);
};
getData();
}, []);
// stringify your data in json
return <pre>{JSON.stringify(data, undefined, 2)}</pre>;
};
export default App;
I've been told that Axios is how you get React to talk to an api (external or internal). So far, I have specifically only received 404 errors whenever I try to implement Axios calls.
Here is the axios call in client/src/App.js:
import React, {Component} from 'react';
import './App.css';
import API from "./utils/API";
class App extends Component {
state = {
recipes: []
}
componentDidMount = () => {
API.getRecipes("milk") /* This is supposed to call the getRecipes
function in API.js with "milk" as the only
parameter (ie - Search the api for "milk"
related recipes). */
.then(res => this.setState({recipes: res.data}))
.catch(err => console.log(err));
}
render(){
return (
<div>
{
this.state.recipes.map(recipe => {
return(
<p>
{recipe.title} // All recipe names are then set to a p tag
</p>
)
})
}
</div>
);
}
}
export default App;
Now, this calls API.js in the "utils" folder:
import axios from "axios";
// Function that takes the parameter and is supposed to send it to the
/api/recipes route
export default {
getRecipes: function(query) {
return axios.get("/api/recipes", { params: { q: query } });
}
};
The relevant api route (/api/recipes) is located in a folder named "routes" outside of the "src" folder. This file is the only item inside the folder.
const axios = require("axios");
const router = require("express").Router();
/* As you can see, this sends the request to "recipepuppy.com" with the
relevant query ("milk").*/
router.get("/recipes", (req, res) => {
axios.get("http://www.recipepuppy.com/api/", {params: req.query})
.then(({data: {results}}) => {res.json(results)})
.catch(err => res.status(422).json(err));
});
module.exports = router;
Going even further out, here is the server.js file (outside of the "client" folder) that determines the routes:
const express = require("express");
const path = require("path");
const PORT = process.env.PORT || 3001;
const app = express();
const apiRoutes = require("./routes/apiRoutes"); // *********
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
}
app.use("/api", apiRoutes); // *********
app.get("*", function(req, res) {
res.sendFile(path.join(__dirname, "./client/build/index.html"));
});
app.listen(PORT, function() {
console.log(`API server now listening on port ${PORT}.`);
});
As far as I can tell, everything is set up perfectly. However, every single time I boot up the server, the browser console error pops up and says:
GET http://localhost:3000/api/recipes?q=milk 404 (Not Found)
Even though server.js directly ties to the apiRoutes folder, and the axios call within API.js calls the exact same route that would result from going to the /api route, then the /recipes route within /api (resulting in /api/recipes).
If anybody here can tell me what is going on and how to fix it, I would appreciate it.
I didn't have "proxy" set in my dependencies (package.json) in the client folder.
Once I set "proxy" to "localhost:3001" (the same as my initial server.js port value) and restarted the server, it worked immediately.
I have almost googled my fingers off trying to figure this out. It seems a lot of the existing info on connecting socket.io with React Native is outdated, or maybe I'm just interpreting things wrong?
I've managed to get the client-side connected (I'm getting the client console logs when I connect to my app). It seems to be the server-side that's giving me issues. Why is the data being emitted from the client not showing up as a log in my terminal? None of the related console.logs in my server.js are logging but the App.js console.logs are registering.
Edit: Here is my full App.js file:
import Expo from 'expo';
import React from 'react';
import { Dimensions, StyleSheet, Text, View } from 'react-native';
import store from './src/store';
import { Provider } from 'react-redux';
// window.navigator.useragent = 'react-native'; -> not necessary anymore?
const ROOT_URL = 'https://myherokudomain.herokuapp.com';
const io = require('socket.io-client/dist/socket.io');
const socket = io.connect(ROOT_URL);
socket.on('connect', () => {
console.log('Connected to server');
});
socket.on('example', (data) => {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
socket.on('disconnect', () => {
console.log('Disconnected from server');
});
export default class App extends React.Component {
render() {
// const MainNavigator = my react-navigation system
return (
<Provider store={store}>
<View style={styles.container}>
<MainNavigator />
</View>
</Provider>
);
}
}
Edit: Here is my full server.js file:
const config = require('./config/config');
const { mongoose } = require('./db/mongoose');
const express = require('express');
const cors = require('cors');
const app = express();
const port = process.env.PORT;
// ************ Include and use separate routes file
app.use(require('./routes/routes'));
// ************
//Cross-Origin resource sharing. cors library solves CORS problems.
app.use(cors());
//***********
/* Chat server code*/
// enabled heroku session affinity:
// see https://devcenter.heroku.com/articles/session-affinity
// to enable: heroku features:enable http-session-affinity
// to diable: heroku features:disable http-session-affinity
const socketIO = require('socket.io');
const http = require('http');
const server = http.createServer(app);
const io = socketIO(server, { origin: "*:*" });
//********** */
io.on('connection', (socket) => {
console.log('A client just joined', socket.id);
socket.emit('example', { hello: 'world' });
socket.on('my other event', (data) => {
console.log(data);
});
socket.on('disconnect', () => {
console.log('User was disconnected');
});
});
server.listen(port, (err) => {
console.log(`started on port ${port}`);
});
module.exports = { app };
I am getting the console logs on the client side just fine (for instance, the "connected to server" and "hello: world" stuff is showing up when I open my app on expo. But I am not getting the server-side console logs.
What am I doing wrong - how do I get socket.io fully working with a deployed React-Native app?
I would really appreciate any help at all! I've been stuck on this forever.
I'm assuming all the code works, just not the logging since that's all you're asking about. The problem is Node doesn't output to your browser's console.
If it's deployed on heroku then you should see everything being logged there, otherwise you can use libraries like https://github.com/node-inspector/node-inspector to output to your browser.
You're not getting the server-side console logs because 1.) They're only logging on the server, and 2.) You're not emitting them, if you do actually want to send the data back.