I created a server-side and deployed it on Heroku so I have a URL from Heroku that I can see the data transferred from the backend when I enter that URL.
I put that link in the react app package.json file as "proxy" and when I run the react app locally I can see the data from the backend rendered on the website.
I have tried to deploy the react app on Heroku and netlify and on both you can see only the react components rendered without the data that is supposed to be transferred from the backend.
any idea why is that?
In my opinion it has to be something related to the build folder since that run the app locally works great
****update:
After running the build version locally i can see the data is not passed so I'm assuming something is wrong with the build version
Related
Im trying to build a website with React and using django backend.
I would like to know if using a React application I will need a server running React with
npm start app
or
yarn start app
or if I need to use npm build and upload the index.html with the corresponding js files and the folder structure on my server?
In both cases what happens to the "states" used in react and redux ? are they transmitted to the server running npm start for example? in the case of a build are they also transmitted to the server?
I would like to know that for scalability issues.
thank you.
React and Redux are both client-side only. They only live in the browser unless you manually write code to send data back.
Usually you would yarn build and upload the result of that.
So I have a reactjs app publish in github pages, is this one https://bernardoolisan.github.io/PyOcr/
The problem is that the app fetch data, but when I deploy it on github pages it give this error:
And it was working:(
And now my page doesn't work too, it was working but right now is blank i dont know why
I guess you are deploying the react project the wrong way to hosting providers such as github or netlify . First you must build your react project and then only push the files inside the build folder to hosting provider . Github pages can only serve static html css js files so it can only serve the build folder of your react project .
Note
To build a react app you can run npm run build and a build folder will be generated . Then you can push the files inside of the build folder to github repository and enable github pages for it .
I was having a similar issue, and I too though gh-pages can't fetch data. But what I did was I added cors to my server. I allowed cross-origin requests. Now it retrieves data from my server on heroku.
Technologies used
I have a TODO app developed in Gatsby, using Firebase Firestore to store the data and read from it
I have used gatsby-starter-capacitor project as a starter template. Why? I want my app to run both on iOS and Android.
What I have right now?
My local build when using npx gatsby develop, I can see the site I have created. I have successfully deployed my app to Netlify as well.
Also, I can run my app on iOS device, I did npm run build && npx cap copy ios && npx cap open ios
For Firebase, I have created a web app in my Firebase console, and used the details on my Gatsby App template. The Firebase details for the WebApp, e.g. Keys and etc, are in a .env file, which I have declared and uploaded on Netlify Environment Variables section
This launches my app on my iPhone - Fantastic.
Localhost: I can save and read data from Firebase and can see the data appearing saved on Firebase console. (Awesome)
Problem
App on iPhone/Netlify loads on a fresh slate, the data is not read from Firebase.
How do I productionise my app so my friends can use it when I release it in Appstore. Because, currently when my app runs on an iOS device, it is running on its localhost? or something that I am not sure of. My app is already running on Netlify, how do I connect this iOS project to go to that URL?
Basically, I want users to be able use this app and read/write to Firebase (which currently works on localhost).
I'm currently trying to build a react social media web app and I'm using NewsAPI to retrieve articles based on user preferences. The call to the NewsAPI was first made from the react client side using axios and had no problems; it was working ok (while executing the web app locally) but when I deployed this to my firebase account it stopped working. I eventually learned that Firebase wouldn't allow api calls from the client side so I started doing some research to find a solution to this and at the end I found an article which suggested to do the api call from the server side using node js or express js being hosted in Heroku. I thought it was worth a shot so wrote a simple express script which would take some parameters in, do the api call and return the results to the caller. Then, I created a Heroku account and put my express application there. I use axios to call my Express app hosted in Heroku from my react app. Again, this worked ok in my local machine (localhost) and this is to represent the flow of info:
React App > Heroku Express > newsApi > News articles retrieved > Heroku Express > React App
I can see the debug every time the Express app in Heroku is hit when I run my React app locally but nothing happens when the React app is run in Firebase so I'm wondering if Firebase would prevent my React application from doing that call? In my React app there's this file called package.json in which I specified the proxy that points to the Express app in Heroku and it all works ok so the setup should be fine.
package.json and axios call to express app screenshot
I added a screenshot of my conf in package.json and also the axios call I make to the expressjs app. I'm not sure what other info I can put here but if you guys need any other sort of info please do tell. Thanks a lot!
I currently have a Ratpack Groovy application hosted on heroku, I've managed to get it working correctly and deploying to the URL Heroku created for me. I decided to make a ReactJS application, which grabs the data from my database from an API I've built in Ratpack, my React application acts as a basic CMS where I can post data back to Ratpack and update the database.
My front end templates get rendered from within my Ratpack handlers, this all works fine locally. I followed
https://github.com/gschrader/ratpack-react-boilerplate
Here is my basic project structure
So I can run ./gradlew run which builds the react app and starts up my Ratpack app in the root of my project and then yarn start in my React directory which starts up my react application on localhost:3000.
My question is how do I deploy this on Heroku, at the moment it's in one big directory, so could I deploy it as one project? I'd like the cms to be on a sub domain such as admin.application.com. I am pretty confused as to how this would work, if anyone has any documentation that would be very helpful.