how to prepare ReactJS to upload on online host? - node.js

so i have a webapp built with react in front and nodejs express in backend,
i've changed localhost address from 'http://192.168.1.17:333/api/v1?name=test' to 'domain.com/api/v1/test?name=test'
and in backend i've changed port to default like this:
app.listen(() => {
console.log(`server is running`);
})
but when im gonna test my webapp it returns error like this in browser console:
xhr.js:210 POST domain.com/api/v1/test?name=testnet::ERR_FAILED 500
what should i do?
im using axios to post request btw.

Related

cannot post ; post can't be made with axis on react

I am trying to make a post request in React to the server
my React app is running at port 3000 & express app is running at port 9000
React:
axios.post("/").then((response)=>{
console.log(response.data)
}).catch((e)=>{
console.log(e.response.data)
this.out = e.response.data
})
Express:
app.post("/", (req, res) => {
console.clear()
console.log(req.body)
res.end("req")
})
on the web console it says :
"Failed to load resource: the server responded with a status of 404 (Not Found)"
on the app 'postman' It runs just fine
I tried to follow this YT tutorial https://www.youtube.com/watch?v=kJA9rDX7azM
First you need to check weather you add a proxy in your React APP project Package.Json file under the private dependency name,
proxy:
'http://localhost:9000/'
Axios first look for the port you are requesting for in the current server which is in you case is / so / is also a port in frontend so it never goes for the backend be safe to go with
axios.post("http://localhost:9000/")
.then((response)=>{
console.log(response.data)
})
.catch((e)=>{
console.log(e.response.data)
})
Secondly make sure you must install the axios dependency in your react project
Seems like you forgot to add domain in the axios request.
axios.post("http://localhost:9000/").then((response)=>{
console.log(response.data)
}).catch((e)=>{
console.log(e.response.data)
this.out = e.response.data
})

Cloud9: "Invalid host header" on React & nodejs app

Im developping a Reactjs & nodejs webapp on AWS's cloud9.
My problem is that i struggle to make a HTTP request from Reactjs frontend to my express backend server.
Both back and front run well separately.
React run on port 8080 and express on port 8081.
Here is the frontend request:
async function getAccessToken(){
await axios.get('/api/token',{
keepAlive: true}).then(function(response){
response.json().access_token;
}).catch(function(error){
console.log('Error dans App.js: ', error);
});
}
Heres the server :
const secureServer = https.createServer({passphrase:process.env.PASSPHRASE, cert: certfile, key: keyfile,}, app);
secureServer.listen(process.env.PORT_SERVER, console.log('Server started on port', process.env.PORT_SERVER));
When i start both and access the application preview, i get an "Invalid host header".
So i searched here, and i dont want to mess with react-scripts webpack.config.js.
I tried to set a "proxy": http://0.0.0.0:8081 in react package.json, to no avail.
Im at a loss here and hope someone can help.
Thanks in advance.

Unable to connect nodejs api on localhost:5000 on server

I have successfully deployed React app on digitalocean droplet with mongodb.
My server configured with nodejs nginx pm2 and everything is working fine
here is my site
www.xdomain.ml
But I build my react app to connect with the backend nodejs api.
I am using socket.io and axios to connect.
everything is working fine on my local computer but it could not connect on the server.
my socket configuration is like
const socket = io("localhost:5000")
and axios is like
axios.post("http://localhost:5000/delete-domains")
on browser console, showing
polling-xhr.js:198 GET https://localhost:5000/socket.io/?EIO=4&transport=polling&t=NjNh9TP net::ERR_SSL_PROTOCOL_ERROR
what I am missing?
do I need to replace the localhost:5000 to 127.0.0.1:5000 on code and build again?
But the mongodb connection successfully establish by
"mongodb://localhost:27017/api";
please help
Thanks
Try to change
const socket = io("localhost:5000")
to
const socket = io("http://localhost:5000")
Or other advance setting:
const socket = io.connect('http://localhost', {
port: 5000,
reconnect: true
});
const socket = io("localhost:5000")
on this line you are missing "http://" or if you have ssl "https://"
this line should be
const socket = io("http://localhost:5000");

Angular post request refused, but nodejs post request works

I have an express app which listening on port 5000 like this:
app.listen(5000, "0.0.0.0, ()=>'Server started on' + 'port ' + 5000).
When i try to send a post request by node script using axios its response me 200.
axios.post('http://localhost:5000/api/auth/login', {})
But i when i try sending the same request using Angular HttpClient.Post its gives me an error : "Connection refused"
this.http.post(environment.apiUrl + '/auth/login', {username, password, role})
The problem started when i tried to run all of these components on a remote server.
it works for me fine when i tried to run all of these components on my local machine.
Any ideas why it should happen?
I would appreciate your help!

How do I connect React native app with node js?

I have already created backend using node js for sigin & signup page. Now I want to connect to node js . But i have no idea how to do that. I want to connect both react native with my node js. Can you help me ?
simply as how we do for web apps.
here is an example of error reporting
export default async function (body) {
console.log(JSON.stringify(body))
const res = await fetch(`${host}/api/report`, {
method: 'POST',
body: JSON.stringify(body),
headers: {
'Content-Type': 'application/json',
},
})
const { message } = await res.json()
if (message) return Toast({ message: message });
else return Toast({ message: 'network error' });
}
I have used fetch to send a POST request to my nodejs server
use API tool like postman or other and make your your nodejs APIs works fine and then connect to your React Native app as above.
You can use ngrok to connect Node with react-native. Run this command:
npm i ngrok -g # installing it globally
Then open another terminal. Run:
ngrok http 3000 # the port you are running on node
Then it will show an alternative link that you can use to test with your Node.
Note: if ngrok http 3000 doesn't work, try ngrok http -region us 3000.
The available ones are us, eu, ap, and au. In my case eu worked for me.
Then copy the link generated e.g. http://8074-129-205-124-100.eu.ngrok.io and test your backend if it displays APIs.
If the link works then you can use it with fetch. Uploading json data to send to MongoDB as the case maybe.

Resources