So ill try to explain a bit better here, when i upload some files to my localhost and i retrieve them everything works fine, but in my server it doesnt work, im using a react node express postgress app with graphql and apollo, also prisma, soo when i run the npm run build and i run it it breaks, the route changed and i have no clue on how to fix this.
So i have uplaods which is where the images go
└── src
└── uploads
└── components
└── files
I have an idea on where to find my files buuut i dont know how to access them
Related
i was trying to publish my website via Vercel but somehow i couldn't...
I have the api url and token in index.js in consts folder.
I've tried to put api info in the .env file but i couldn't do that either.
Here is my files and the Vercel's error
I would be really happy if i use some help. Thank you.
My files
What vercel says
Keep all your .js files inside src folder.
Looking at your problem ,it looks like your index.js falls outside src folder. Try placing it directly in your src folder like your App.js, it should work fine.
Also, Run npm run build in your VS Code terminal before deploying it.
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.
Typescript just relase 3.7.3 with optional chaining, so I wanted to upgrade a project for this feature.
However, after runing yarn upgrade --latest, and doing yarn start, the app will reload infinitely.
After couple days of debugging. This is what I find out, it seems like if anything changed recently on /public folder, then the app will be Navigated to http://localhost:3000/ which will cause it to reload infinitely due to the design of my app.
The project was working for previous dependencies, so I am not sure whethere it's a react or electron upgrade that they changed it such that the app will watch for /public folder. When public folder changed, and causing the app to navigate to localhost:3000. Anyone know what's the cause of this phenomena? And the reason behind this change, and also how to pass around this?
By the way, my app was a simple epub reader application. Currently, my app will load all the images, css files and stored them to public folder (delete those files on unmount). Thus the app can load these images, stylesheets. (I just tried to store these files just inside the src folder, and it seems react won't be able to load these resources dynamically).
I have a React app (via create-react-app).
I handle file uploads and place them in /public/images/uploads and then access via URL like http://myapp.com/images/uploads/blah.png. This works fine in development.
When I npm build and use serve, I cannot access dynamically created images via the URL. If I rebuild, I can then access them.
I'm obviously missing something here. Thanks
UPDATE: I did an eject on this app.
Noticed the contents my public/images directory are copied at build time to build/images and all requests to http://app.com/images/test.png and served from build/images.
Is there a way to let webpack, which I assume is responsible for this Should I just create my images in build as well? Seems odd.
I am wondering if it is possible to deploy react.js web app that I've built to a share hosting site that does not have node.js installed?
I use webpack to build the application and it creates normal html, js, css file. I uploaded the static folder that includes all those html, js(bundle.js) and css files, but when I request the site, the server reply with 404 bundle.js not found response.
Use npm run build, you should get a folder with the index html file inside that will run your app. Try this with xampp first before you actually deploy to your server.
Here is everything step by step
npm run build
or
yarn run build
it will generate a build folder that looks like this:
Copy everything and move it to the htdocs in xampp or ftp upload the directory to the public_html file in your hosting
Yes you sure can put react on a shared hosting provider.
Seeing as you're getting a 404 error (not found), you are probably referencing your react file/bundle incorrectly. It might not even be named bundle.js if you're using a boilerplate to create your application.
Can you give more information? What does your index.html file look like? What does your directory structure look like? If you are able to post these files I can tell you what the issue is.
Update:
The answer below should be accepted. (Although this would assume that you have the ability to make a build which you have not verified or not.)
Make a build using the build command through whatever boilerplate you used. Deploy those files on your shared hosting server. Make sure that index.html is at the root of where your server is expecting the root to be and your app should be live.
For deploying a react app on a shared hosting you need to create a production build. Production build is a pack of all your react code and its dependencies.
in most shared hosting we put our site/app inside a public_html directory so if we hit www.yourdomain.com it serves the code from public_html directory.
so if your react app is ready to go, edit your package.json file add a new key value:
"homepage":"http://yourdomain.com"
then create a build using following command:
npm run build
after running the command you will see a new directory named build in your app root. It will contain js and css for the app and a index.html file. You need to upload all the content inside build directory to public_html directory, and that's all, go to your domain and your app will be working just fine.