we have built UI using react js framework and html +css + js code is deployed inside apache 2. When I browse website it works fine but if I refresh page then I get 404. Can someone tell me how can I fix it.
Perhaps this answer is relevant to you:
Apache web server doesn't allow me to refresh on /about but on localhost its working fine
I know I also had problems related to HTML5 mode when first setting up react-router.
If you are using React-Router you are probably having this problem: React-router urls don't work when refreshing or writting manually.
You can also see the React Router tutorial for how to set up a production Express server.
Related
Hii Can anyone help me to upload the Shopware PWA on the server(Server Side Rendering). I have tried almost all the methods mentioned on the nuxt js official website but I can't upload the PWA on the server. By using yarn generate, it converts the PWA on the static website so when I changed it on the backend it doesn't reflect on the PWA(like category, pages, etc) and also doesn't change the title of the website dynamically. and I have also tried this method https://www.niagahoster.co.id/blog/upload-nuxtjs-di-hosting/ but it also doesn't work for me.
I am working on an app and used json-server for the backend api. I published the app using github pages and everything seemed to be working fine on my laptop. But when I try to open the app on another device, it does not work. I realized this was because I am using localhost:3001 as the resource for my api, and this only exists on my laptop. I am now trying to change the resource from localhost:3001 to a custom url 'https://my-json-server.typicode.com/vbrambila2/1RM/movements'. The issue I'm running into now is that the POST, PATCH, and DELETE methods in my actions aren't updating the api anymore. Anyone know what I might be doing wrong?
I have been working on a chrome extension using vue 3, vue-router and vue-x.
The extension is a Single Page Application, so if I understand correctly, it means that all incoming traffic should go through a root page and then vue-router handles the rendering while giving the user the impression that he changed page when in reality, he did not.
According to this part of vue-router documentation, you normally need something server side to make sure your root page is always served (nginx, apache, etc).
I need to reproduce this behaviour for my chrome-extension, and I have tried playing with the manifest.json but without any success so far. When I try to access to my other page, I have a File not found error. If I was to create an other-page.html, it renders but it wouldn't be a SPA anymore. I could try to put some hacky JS inside this other page but I was wondering if there was any more elegant way to handle this.
tl;dr: How to allow direct access from browser to a page contained in a SPA on a chrome extension.
I've deployed a React Redux site on hostgator.com. While it works to visit the page and navigate as usual. (React routing works), it shows 404 not found whenever I reload the page.
I talked to their support which, before leaving 20 sec into the conversation, came with the suggestion that it may have to do with the site trying to run on https, while no SSL is implemented.
I'm curious, why does it work locally and not on the world wide web? Any thoughts?
Thanks.
You need to look into a Server Side Rendering solution. A good framework for doing so with React is Next.js.
Basically as long as you don't refresh the page React-Router has control over the address bar as well as history via the History API. But when you hit refresh you send a request to the server for whatever is in the address bar. But the server is not handling your routing, React-Router is on the client side. You also won't be able to type a child route directly into the address bar without server side rendering.
I have this reactjs webapp - http://52.26.51.120/
It loads a single page and then you can click links to dynamically load other boards on the same page... such as 52.26.51.120/#/b, 52.26.51.120/#/g
Now the thing is, I want each of these to be an individual page, for the purpose of seo. I want you to be able to google "my-site.com g", and you will see the result 52.26.51.120/#/g. This obviously cant work if you are using reactjs and it is all on one page. Google will only render and cache that main page (can it even render that page? does google execute javascript?)
Even more specifically, id want something like my-site.com/g/1234 to load a thread. There could be a thousand threads every day, so im not sure how to handle that.
Are there any solutions to this? to allow react to possibly serve up static pages as html so that they can be cached on google? I am using expressjs and webpack as my server right now, and all the code is executed in jsx files.
Thanks
You can use Prerender.io service. In a nutshell you will need to connect your server app or web server with prerender service and do little setup (see documentation). After that search engines and crawlers will be served with a static (prerendered) content while users will get classic React.js (or any other single page) app.
There is a hosted service with free tier or open source version
I suspect you could do some smart configuration with nginx and it could convert a url of domain/board to a redirection of domain/#/board when detecting the user-agent as a bot instead of a typical user.