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.
I'm building a simple Website with login, and my vue-frontend needs to retrieve user data from my nodejs-backend which connects to a sql database.
I decided to use docker-compose for this, and as I understand, docker-compose sets up a network automatically for the services that are mentioned in my docker-compose.yml.
What doesn't seem to work, is the way I address the backend in my code.
I suspect that it might be because of the way I use axios to send a request to my backend.
I have inspected the default docker-network and was able to ping from my frontend to my backend using the dns names I found in the network-configuration.
But using the same names inside my code didn't work.
What does work, is mapping a host port to my exposed api port and using http://localhost:5000 as address, but this defeats the purpose of a docker network.
my docker-compose.yml:
version: '3.3'
services:
vue-frontend:
image: flowmotion/vue-js-frontend
ports:
- 8070:80
depends_on:
- db-user-api
db-user-api:
image: flowmotion/user-db-api
environment:
- PORT=5000
ports:
- 5000:5000 #only needed if docker network connection can't be established
the Vue-fontend files in question:
Login.vue
methods: {
async login() {
try {
const response = await authenticationService.login({
email: this.email,
password: this.password
});
this.$store.dispatch("setToken", response.data.token);
this.$store.dispatch("setUser", response.data.user);
this.$router.push({ path: "/" });
} catch (error) {
this.showError = true;
this.error = error.response.data.error;
}
}
}
};
</script>
authenticationService.js
import api from "#/services/api";
export default {
login(credentials) {
return api().post("login", credentials);
}
};
api.js
import axios from 'axios';
import config from '../config/config';
export default () => {
return axios.create({
baseURL: config.userBackendServer
});
};
config.js ()
module.exports = {
userBackendServer: 'http://cl-dashboard_db-user-api_1:5000' //this doesn't seem to work
};
//using 'http://localhost:5000' works if ports are mapped to host machine.
expected result would be my backend doing a sql lookup.
actuel result is, instead of connecting to my backend my frontend gives me a 404 status and my backend is never reached
you are correct assuming containers in the docker network can talk to each other without opening any ports to the outer world.
point is- your vue app is not in any container- it is served from a container as a js script file to your browser, which is the one sending the requests to your node backend. since your browser is by any means not inside the docker network - you must use the outer port mapping (localhost:5000 in your case) to reach the backend.
let me know if you have any more questions about that.
Given the following setup:
server.js
const express = require('express')
const path = require('path')
const app = express()
const cors = require('cors')
const port = process.env.PORT || 8080
app.use(cors())
app.get('/api', (req, res) => {
res.send({code: 200, message: 'I have arrived!'})
})
app.listen(port, () => console.log(`I can hear your thoughts on ${port}`))
and the presentational component with call:
App.js
componentDidMount() {
fetch(`/api`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}).then(res => {
console.log(res)
return res.json()
}).then(response => {
console.log(response)
this.data = response
}).catch(error => {
this.error = error.message || error.error
})
}
package.json:
"scripts": {
"start": "npm-run-all --parallel start:client start:server",
"start:client": "node node_modules/react-native/local-cli/cli.js start",
"start:server": "node server.js",
"test": "jest"
},
I am running the app via yarn start, and I see the log: "I can hear your thoughts"... The fetch call, however, is never made. If I supply another fully qualified url within the fetch call it returns the data as expected, however I am unable to hit the express api from within the component.
If I place http://localhost:8080/api in the browser I get the response.
If I place http://localhost:8080/api in the fetch call it is never called (or at least doesn't appear to be).
How can I properly configure this to call the express api when running locally?
As always any and all direction is appreciated, so thanks in advance!
I believe the issue for this is two fold.
Firstly you are running the server and the bundler in the same terminal window. I believe that this is causing them to get confused.
Run them in separate windows. Yes that means you have to run an extra command but it will mean that you will be able to clearly see the logs for each of them.
Also you may have to restart you bundler, especially when you add new packages which will mean restarting your server.
Similarly when you update your server you will have to restart it also causing you to restart your bundler. It doesn't seem like a good idea running them in the same window.
Secondly you are using the localhost for the api. This works nicely on your computer because the api is running on your computer's localhost so it can find it. However, when you run it on a device and you use localhost it looks for the api on your device's localhost and cannot find it there, thus it doesn't bring back a result.
Your solution is quite clear. Firstly, run your bundler and your server in different terminal windows. And secondly use the ip address of your computer so that the emulator/simulator can easily find where the api is located.
I copied your code and made only two changes to the react-native code.
Added alerts to show the response and error from the fetch request
Used my local ip address of my computer rather than localhost
Here are some images of me running it on both Android and iOS, using your code and the changes that I detailed above.
Android
iOS
I'm building a really easy api and react-native application. The server works well (tested with PostMan) but the application doesn't call the server. It blocks when axios has to send the post request (see below).
I'm desperate :-( Loosing too mush time in it. Please, if you can help me...
Here is my code LogIn page. It dispatch the action creator (working with redux) giving email and password:
...
const LogIn = React.createClass({
submitLogin() {
// log in the server
if (this.props.email !== '' && this.props.psw !== '') {
if (this.props.valid === true) {
this.props.dispatch(logIn(this.props.email, this.props.psw));
} else {
this.props.dispatch(errorTyping());
}
}
},
...
email and password are weel retrieved and sent to the action creator:
import axios from 'axios';
import { SIGNIN_URL, SIGNUP_URL } from '../api';
// import { addAlert } from './alerts';
exports.logIn = (email, password) => {
return function (dispatch) {
console.log(email);
console.log(password);
console.log(SIGNIN_URL);
return axios.post(SIGNIN_URL, { email, password })
.then(
(response) => {
console.log(response);
const { token, userId } = response.data;
dispatch(authUser(userId));
}
)
.catch(
(error) => {
console.log('Could not log in');
}
);
};
};
const authUser = (userId) => {
return {
type: 'AUTH_USER',
userId
};
};
...
The three console.log() before axios show the data in the correct way. SIGNIN_URL is exactly the same I use in postman. ...but axios doesn't call.
Just to give all the cards, this is my store:
import thunk from 'redux-thunk';
import { createStore, compose, applyMiddleware } from 'redux';
import { AsyncStorage } from 'react-native';
import { persistStore, autoRehydrate } from 'redux-persist';
import reducer from '../reducer';
const defaultState = {};
exports.configureStore = (initialState = defaultState) => {
const store = createStore(reducer, initialState, compose(
applyMiddleware(thunk),
autoRehydrate()
));
persistStore(store, { storage: AsyncStorage });
return store;
};
There's no error message in the debugger (but the one given by the axios call ('Could not log in')
I'm on windows 10, with:
"axios": "^0.15.3",
"react": "15.4.2",
"react-native": "0.38.0",
"redux": "^3.6.0"
The call fails even when I prepare a simple GET call and the server is supposed to give back a simple message (tested with postman and browser):
exports.test = () => {
return function () {
return axios.get('https://localhost:3000/v1/test')
.then(
(response) => {
console.log(response);
}
)
.catch(
(error) => {
console.log('error');
}
);
};
};
Last, I tryed also to modify the call adding a header as the following, because the api is coded to accept json:
const head = {
headers: { 'Content-Type': 'application/json' }
};
exports.test = () => {
return function () {
return axios.get('https://api.github.com/users/massimopibiri', head)
.then(
(response) => {
console.log(response);
}
)
.catch(
(error) => {
console.log('error');
}
);
};
};
but even this didn't work. hope somebody can help me. Other similar issues didn't.
The solution came from a different source, but I post it here to help others looking for the same issue. Basically I used Android AVD (emulator) to build the application. But the emulator is in fact another machine, and that's why it couldn't call the localhost.
To solve the probleme, I had to send the request in the following way:
https://10.0.2.2:3000/v1/test
instead of:
https://localhost:3000/v1/test
if u are using mac this solution worked for me.
I am using React Native with Android Simulator ADV. Nexus Api 27
axios.get('http://192.168.1.21:8686/api/v1/test')
.then(response => console.log(response))
.catch(err => console.log(err));
where the ip 192.168.1.21 is from system preferences > Network > Advanced > TCP/IP > IPv4 Address
I also tested axios.get('http://10.0.2.2:8686/bec/api/v1/test') where 10.0.2.2 is localhost from virtual machine to the computer but not worked.
Your Emulator is a device on it's own that is not running on the same IP(localhost or 127.0.0.1) as your web browser, postman or your server.
In order to make request to your server from your emulator you need to access your server via your computer IP Address:
On windows get your IP Address by running ipconfig on the command prompt
On Unix terminal (Linux, Mac OS) run ifconfig to get your IP Address
Instead of http://localhost:port you should use http://your_ip_address:port
I didn't test it on Linux, Mac OS but its working perfectly on windows!
change from localhost to your ip
add http://
http://192.168.43.49:3000/user/
Another solution is to create a hosted network on the localhost computer with these commands from admin cmd:
netsh wlan set hostednetwork mode=allow ssid=wifi_name key=wifi_password
netsh wlan start hostednetwork
Connect your device to the computer's hotspot then get the computer's ip by running:
ipconfig
Now get the IPV4 address and put it on the app's axios/fetch url,
axios.get('https://192.168.137.1:3000/api')
.then(
(response) => {
console.log(response);
}
)
.catch(
(error) => {
console.log('error');
}
);
and it should now work!
I found another solution to the axios.get not working in react native problem:
Problem:- Object not visible and error: unhandled promise. Network error
Solution:-- Use below command:
=>>> npm install -g --save axios
instead of npm install --save axios i.e. Use -g.
And also check whether your emulator is having internet connection.
If your emulator is not having internet connection and is showing error such as: DNS probe finished bad config., then
STOP ANDROID STUDIO Emulator and run these two commands in terminal
1.>> C:\Users\Admin\AppData\Local\Android\sdk\emulator\emulator.exe -list-avds
My Output:
Pixel_XL_API_27
After this step, you will get the name of avds.
example:- Pixel_XL_API_27
Now run below command:-
2.>> C:\Users\Admin\AppData\Local\Android\sdk\emulator\emulator.exe -avd Pixel_XL_API_27 -dns-server 8.8.8.8
I have also faced similar issue and I am using Expo CLI for building and running my React Native application. My backend Express API are also running on same machine. So in my case Axios call is executing from inside Android Virtual Device emulator due to which localhost call is failing. So instead of using localhost I have used IP address and it worked!
If you are using expo client, please check hotspot IP address like 192.168.x.x (in my case ip is of this type) something on Metro Server Page.
If you are not using expo, then check your IP address using following commands :
ipconfig /all (On Windows)
ifconfig -a (OnLinux/Mac)
And then in axios api call, use http://192.168.x.x and if you are using https then use https but mostly for development purpose, you can go with http. But make sure in production environment, it is always good to use https with your domain or subdomain for providing additional security.
Alternate way to solve this issue if connecting a different way doesn't work. As others have said, because the phone is a different machine you can't use localhost. But you can use a tunnel. This will give you a url (open to the whole internet) that replicates your localhost.
Install the package localtunnel globally (yarn global add localtunnel)
Make sure your server is running, and note the port (for example, http://localhost:8081)
In another terminal/command prompt, run the localtunnel command (for me, this was npx localtunnel --port 8081). This will create your server that you can hit from the open web.
You can now replace the url in your react-native app with the url from the console
I hope this helps someone.
For me 'https://10.0.2.2:3000' was not working. I tried to map the localhost:3000 to a URL by ngrok and used that URL
./ngrok http 3000 (running this command on terminal will start session with global URL mapped to localhost port 3000)
Remeber,For this you should have ngrok installed on your system
Try Turning off your firewall it worked for me
Adding Cors to my Express App worked for me.
I did an npm install cors in the terminal in my Express server folder.
And then I just randomly added the following 2 lines of code to my Express server.js file:
const cors = require('cors');
app.use(cors())
Oh and then I specified the exact port in all my axios requests like below:
axios.post('http://localhost:5000/api/users/login/')
My problem: some ports were working for an expo app while the desired one 4000 wasn't. I wondered why. After much time researching, I found the workaround on Linux Mint: the Firewall.
Make sure you are connected over the same network and configured your server properly.
Go to Menu and search for Firewall in the machine hosting your server.
Turn status off or add a firewall rule through the plus icon at the left bottom corner.
Select Simple configuration and put your port there.
Done!
I'm using Nodejs & request to form my API calls, I can make API calls directly to a UnixSocket with it however it fails every attempt when requesting from the Docker registry container I have running, so I believe it's the fault of my registry configuration.
I've set it up out of the box just like the doc steps below.
docker run -d -p 5000:5000 --restart=always --name registry registry:2
docker pull alpine
docker tag alpine localhost:5000/alpine
docker push localhost:5000/alpine
The code I'm using to request is below, it receives a 404 not found.
const request = require('request')
request({
method: 'GET',
uri: 'http://localhost:5000/images/json', // status 404
// uri: 'http://unix:/var/run/docker.sock:/images/json', // this works
headers: { host : 'localhost' }
}, (e, res, body) => {
if(e) return console.error(e)
console.log(res.statusCode == 200 ? JSON.parse(body) : res.statusCode)
})
To be clear, this code is just to demonstrate that I'm making a GET request that should be well-formed.
What has to be done to allow a running registry container respond to the remote API?
Docker Registry doesn't have the /images/json API, and the Docker Registry's API does not compatible with docker engine API.
To get the image list of Docker Registry, please try GET /v2/_catalog. Full document can be found here.