I'm currently working on a personal project where I wanna display all the skins from Valorant (Riot games FPS).
So I'm building a React web app and a nodejs backend proxy server to request skins' data from RIOT API ( https://developer.riotgames.com/apis#val-content-v1/GET_getContent) and send them to my client side app.
The problem is : I manage to get the data on my backend server
but when I try to request my backend server from my react app.js, I don't know how to put these data into my application state and display their name.
this is what i get in localhost:3000 : App Component developer tab / Network developer tab
I watched several tutorials on how to do this and tried but it didn't work. Is there something I'm missing or misunderstood ? Don't be afraid to ask me more details if needed, that's my first question asked on StackOverflow I hope I did it right :)
EDIT: I modified the getSkins() method in my App.js to this as suggested but it still doesn't work :/
Related
Hello I’ve been working with Freelance developer for over 10 months developing a Project developer abandon the project one day to the next ghost me disappeared. Send me a file with the work he has done, but I’m missing a backend API
Architecture: (full project is NodeJS in Typescript)
Backend: Express API, Sequelize
Frontend: React 18
My question is there is anyway to recrive the files from the file manager from the server ? Or any other place
Currently, the website is live and working how would I be able to retrieve the files?
I truly appreciate it of anybody has any insight thank you
Unfortunately, the only way to get those missing files is if you or someone you know has access to the server where they are located.
Otherwise, all you can do is look at all frontend API calls to try and reverse-engineer the API based on: the data payload React sends, the URL it hits, the method it uses (GET, POST, etc) and the response it gets from the server currently.
Then you would be left with creating the end-point handlers inside of Express, and the logic for the database such as queries and models. It's a difficult task but you can do it if you look at enough of the other information you have available. Good luck and welcome to Stackoverflow!
I have a React app on 127.0.0.1:3000 / 192.168.0.104:3000 and a Laravel api on 127.0.0.1:8000.
My problem is, I can fetch the data on my computer (127.0.0.1), but it seems that the React app can't correctly get the data from the database when I access the React app from my phone on LAN (192.168.0.103).(I can see the React app)
Can someone help me to solve this problem or tell me what may cause this? Thank you.
I suspect you have a CORS policy error. I'm not familiar with Laravel cause you know, PHP, but a quick google search would probably tell you how to allow a foreign domain to have access to your api.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
To verify you have a cors policy error, you'd have to open dev tools and take a look at the errors. However, I'm unsure if that's possible on a mobile browser. I never tried, so it could be possible. Again another google search would answer that for you.
I just solved this problem by myself. It is because that the client can not find the Laravel API on LAN. In Img A the port 8000 is not open on the machine, so the client can't access the API.
Img A
My solution is that host the API and APP on the different machine and make sure that the client can access both the APP and API.
Img B
please help me with the following problem as it already taken me so much time to figure out:
I have an API which I created using PHP and hosted with AWS EC2.
This API is to be consumed by a React frontend app I made, and when I am developing the frontend there are no problems sending and receiving data from the API.
However, after I deploy the app using AWS Amplify, the app loads correctly but fails to connect to the api(i.e. not showing fetched data, unable to post forms)
I read a little bit about proxying but I am not sure it is the solution and if so, how would I implement it.
Thanks a lot in advance.
I resolved the issue.
My problem was that the server was not listening to https port, so the browser blocked the content.
I've used pretty much all tutorials on google, seen all github repos. Spent weeks. I'm trying to make an app with a Spring Boot backend with spring Security JWT and React frontend (I don't know if I need webpack for this, some tutorials used it for another level of proxy for some reason, some didn't). I just want to start with something. Something which can be accessed via one port on localhost, which reloads and not gives me 403 unauthorised error instead or even worse, a blank page when I just want to see login page or a page from the menu after authorisation. A Hello World. A Time On Server starter project. Anything. Just so that it reloads and I can build stuff with sense on top of it. Can you please tell where I can find snything?
I would like to ask how to create an ionic app that talks to Laravel API but still works offline when there's no connection.
Let's say i have to write a quiz mobile app in Ionic and it requests for Laravel API to retrieve the questions as well as store the scores in db.
I'm just starting to learn Ionic and i'm really confused right now on how to approach this.
What confuses me most are:
Does the Ionic source live inside the Laravel source code w/c serves the API?
If i want the Ionic app to be installable, should the Laravel source code be included as well during the compilation process?
Thanks in advance for any help.
Your php or in general server side code is completely independent from your ionic application. If you want your app to work offline you should think about something like fetching a high number of information initially and work with this data without making any additional requests.
However your ionic app does only contain the frontend. You could implement some logic for local storage, but if you want to keep information hidden from the user (e.g. solutions) you have to put that logic on a dedicated server.
In the few details you provided, I can say the Laravel code does not live inside the ionic app. The ionic app is separate from the backend API by Laravel. You are possibly trying for a ReST based architecture where you communicate with your Laravel Server with an API. You need to keep those codes separate.
However without any internet, you won't be able to access those APIs, so you will just be able to show some static data, or you could serve from a DB and show later. For how to use the sqlite db you can look here
In your backend you can have an API like
http://example.com/api/v1/questions/1/
Which will fetch a question with options and if you want the app to have the answer for offline storage you may have that as well. When a user answers, you may check whether you have internet access and send answer and verify if you do, else you may save the answer in your DB and sync when you do have access. You can fetch multiple questions so that a user may answer multiple questions in case he/she will not have internet access.
Hope it helps. :)