vite react express bug for mobile [Answer incoming] - reactjs

There is a bug with vite react, it doesn't render the data from the backend to the frontend in mobile, but calling the backend /ping or routes with res json the backend does respond.
github:https://github.com/dev-ronaaldll/try-mern-mysql-crud
Creating a basic crud of tasks, the backend data is not displayed with react on mobile.
What extra configuration do it need to make it work?
I have the solution but I want to know if someone can help me.

1 Solution
replace the fetch/axios from localhost to "ip/192.168.1.100" works.
2 Solution
using a proxy conf in vite and react

Related

How to connect Reactjs and Laravel

I have created react js as Frontend folder and Laravel as Backend folder.I need to interconnect both laravel and react js. How to do that?
I thing I figured out.Please add following line in webpack.mix.js file. It worked for me.

React route gives unauthorized on heroku while working in development

I am working on React app using express in backend, and I deployed it on Heroku.
Now its working well except 1 route which gives me unauthorized message
My Heroku logs
And this route is working on development mode.
Also I checked the token of the user in the localStorage and its already there.
Anyone has any idea about this issue?
I figured out what was the problem after asking a friend of mine.
The problem was there was a conflict in routes between frontend and backend, so I added /api/ to backend routes and to the frontend baseUrl.
Ex:
in backend I was using the routes like app.use("/topic", topicRoutes);
in frontend my baseUrl was localhost:3000
To fix my problem, I changed the routes:
app.use("/api/topic", topicRoutes);
localhost:3000/api/
Hope it helps someone :))

Hosting a React app with React Router on a static server

Situation:
I'm building a React app with React Router.
It was generated from create-react-app.
I need to host it statically.
If I visit the home page first and then click around, everything works fine.
Problem:
When visiting a sub page directly such as https://www.example.com/path/page server returns 404 error because /path/page is not a valid directory on the server.
For as far as I can tell, the server is just serving up files statically, and I cannot change how the server is written (I know I could solve this problem by routing all accesses to the react app with some server code, but this is not an option).
How can I make all urls directly visitable by only changing code in my react app?
After some research, I figured out that what I needed was a static site generator.
There are a couple of options available that works with React.js
React Static
Gatsby
Next JS
Some useful articles on getting started:
For Gatsby: https://medium.com/codingthesmartway-com-blog/gatsby-static-site-generator-for-react-introduction-b9fce7df6b24
For React Static: https://medium.com/#tannerlinsley/%EF%B8%8F-introducing-react-static-a-progressive-static-site-framework-for-react-3470d2a51ebc

How to use legacy web site and ReactJS both?

I have a React app which is created by create-react-app command.
And I also have the blog system which is based on Wordpress.
Directory structure is like this.
*/index.html
/service-workder.js
/manifect.json
/index.html
/favicon.ico
/asset-manifest.json
/static/media
/js
/css
/blog <--------------------- Wordpress*
When I access the URL by http:mydomain/blog/,
Firefox show React page instead of Wordpress page.
Firefox even show React page for http:mydomain/blog/nonexisting ,
which I think is supposed to provide 404 not found from web server.
I was struggling to find a way NOT to let React take wildcard paths.
Safari use React only for index.html, which is good.
Chrome, Firefox use React for entire wildcard paths, even for not existing paths.
http://myserver/ ---> should show React app
http://myserver/nonexistence ---> should show 404 from server
Please help me to figure out isolate React app only for exact index.html.
Thanks in advance.
Like I wrote here, the root cause was service worker which seems to be HTML5 feature to make a web site to a web app.
Unregistering service worker was the solution.

Ignore routing for a specific folder

I have an Asp.NET WebAPI project and a ReactJS app stored under <web-root>\app.
The react app itself is expecting a parameter passed in the URL
http://web-root/app/my-super-parameter.
How do I configure the routing in the ASP.NET app itself so it ignores that app folder and calls it as it is? Right now I'm getting a 404 error when calling the URL.
When creating the ReactApp I use http://localhost:5000/my-super-parameter and it works as needed. The time came to deploy to production under the same website as the REST project itself.
What's the best way to accomplish this?
Thx

Resources