I have a express + react app weather app, I fetched the api from the openweatherapi in express app and connect it with react. now I want to change the query of the api search according to the search filed value from the react app.
Example:
https://openweatherapi/v.1.03?q={}
The api is in the server.js in express and I want to set the value of q to the search value of the client side.
All I want that to set the query of the server.js to input field value of the react app.
Assuming you can send data back to the server, consider using template literals.
Example: https://openweatherapi/v.1.03?q=${clientQuery}
Related
I have 5 Accordions in localhost:3000/management page and each having dynamic values fetching API in backend node Js using Sequelize so how can I show the 5 accordions value in node js????
I want to know for 5 accordion how can I define backend code for one react URL in frontend???
On your backend your route should start a function that will return the correct value from your db using Sequelize. I don't know if you're using Express, Fastify etc and you didn't provide code so I won't be able to provide a more detailed explanation but feel free to update your post
On your React frontend you need to fetch from your backend. So that would be something like
const data = await fetch("https://yourapiadress...").json()
Once you have this you can easily use it in your accordion
data.map(content =>{
return <Accordion>{content}</Accordion>
})
I'm trying to create a simple authentication app using React (from vite) and express. I have my node app, and my react login/signup set, but when I try to login or signup, my react app keeps requesting to itself (localhost:3000) instead of my backend (localhost:5000). I set a "proxy" in my react package.json but it doesn't change anything. I tried to set a variable with my backend link and it worked, but is it a good practice ?
I'm new to programming and created a weather app to practice React. I also created a Node server and a homepage (portfolio). So my tree look like this:
project
-portfolio(homepage with simple html file)
-weather(React)
-server.js
Inside the weather app I make a couple of API fetches to openweathermap.org. But it has come to my attention that my API key will be visible when I publish this app and that the best way to avoid that, is to make the call in the Node backend. How do I move data from the weather app to the server.js and vice versa? For example, the user will enter a zip code in the weather app. This zip code is used in the url to fetch the data. How would I make the zip code show up in the server? And then do I just perform all the fetches in the server?
My weather app code can be found at this previous question. I did make the modification suggested and now have two separate useEffect. React - API fetches - 2nd fetch uses data from 1st fetch?
Thank you for your help.
server.js
const express = require("express")
const app = express()
const path = require("path")
const port = process.env.PORT || 5000
app.use("/weather",express.static(path.join("weather/build")))
app.use("/",express.static(path.join("portfolio")))
app.listen(port, () => console.log("Working"))
If you're using API keys on your frontend, it will always be exposed to anyone who checks your network requests. If you insist on using the API key with frontend requests, you should atleast use the .env module in your React frontend and add your API keys there, making sure you commit your .env to your .gitignore so it won't get committed to your source code.
const port = process.env.PORT || 5000
I'm assuming you already know how to set this up since you're using it here.
OR
You could just reverse proxy your request with your API endpoint, store your API keys in your .env, and have your route make the API request to openweathermap.org-- successfully hiding your API keys from network analysis:
React Weather App => YOUR_API_ENDPOINT
YOUR_API_ENDPOINT =>
openweathermap.org
Parse data => Send response to Weather App
How do I move data from the weather app to the server.js and vice
versa? For example, the user will enter a zip code in the weather app.
This zip code is used in the url to fetch the data. How would I make
the zip code show up in the server? And then do I just perform all the
fetches in the server?
Pass it as a param in the url of the request and have your backend parse out the params from the url.
Weather App:
axios.get(`${YOUR_API_ENDPOINT}/zip/${DYNAMIC_ZIP_CODE_DATA}`) //basic example
Node
app.get("/zip/:zip", (req, res) => {
console.log('params: ', req.params.zip)
const zip = req.params.zip;
//make the API request here and pass in the zip
res.send(req.params)
})
hi guys i have a problem ;its how to update username using a text field
the images bellow describe what i did
first i used a model user.js then a UserController.js then route.js
but i didn't get how to update username from a text firld after clic on edit
this is the input vue js file
updateUser function in userController
this is the router file
this is the index.js
TL; DR; You need to send an AJAX request from your client application.
The main problem is that the Vue.js code has nothing to with the back-end code. And the Vue.js application lives in the browser. So the right way to do that will be to define a click handler that will collect the data from a form and then send the AJAX request to the Node.js server on the endpoint that handles user update.
How does the react client connect to the server via express? Many tutorials talk about Superagent and axios which is adding to my confusion. Are there any resources on server side routing in the context of react? thank you
In MERN stack, you do not necessarily have to think of the entire stack as a single entity. Mongo, ReactJS and NodeJS server can all work independently. And let us for easiness of understanding sake say all of them are on separate servers. That is we can have Mongo on one server, ReactJS on another server and NodeJS with express on a third server, then also it will be a MERN stack app.
How a MERN app work is as follows
For example, let us have an app that displays the details of all the students in a class. First, in the React app let us say you select a class, and then the React front-end will send a query to the nodejs server. The query will contain the particular class name. Now nodejs will send a query to the mongo db asking for the details of the students of that class which it will send back to the node server. The node server will then send the details to the front end and it will update it.
If you ask for connection as such, there can be no connection at all except for querying for data. Instead of using the reactjs front end you can use some other frontend and it will give you the same details. React, Mongo and Node, all are capable of working on their own in their respective fields.
Axios is a promise based HTTP client for the browser and node.js.
They are completely independent. Whether using axios, the native Javascript fetch, jQuery AJAX, etc...each of them runs in the browser and makes a GET/POST request to nodejs. You will have defined corresponding GET/POST routes within nodejs to respond to these requests and return JSON response data for them to consume.
I would start by forgetting about react altogether. Instead build an express API with various GET/POST routes that return JSON responses. Test with a simple client like postman. Once you have a handle on that, then start with a front-end Javascript framework to consume these services.
Here is a cut of my express+react api:
var express = require('express');
var router = express.Router();
router.get('/', function (req, res) {
res.render('index', {myjson: "myValue"});
})
module.exports = router;
Basically I am sending the json string to index.jsx, where the frontend is rendered.
Also I've set in express as:
app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', reactViews.createEngine());
So the express server knows where React is.
Checkout the npm package Express-react-engine.
All the elements of the stack can be used independently, React , Node.Js, and MongoDB.
They can be installed in different servers and the communication is by using Fetch, Axios or any other tool.