Hello I'm writing a web content website with React and I'm using React router dom for routing. I want to deploy my website but I need to know if I have to buy a node js host or a regular host. After searching figured out that if I use Hashrouter instead of Browserrouter, I can deploy it without server but there is a problem because hashrouter adds a prefix # on all of my links. What should I do to remove # or is there any other solution?
Related
I am trying to migrate from the pages directory to the app directory in NextJS 13, and I stumbled upon a strange issue, and I can't find information anywhere.
When using the pages directory, we had to import router from next/router. I then had a URL which I used with router.push as this and it worked without any problems.
router.push(`zel:?action=sign&message=${loginPhrase}&icon=http%3A%2F%2Fzelid.io%2Fimg%2FzelID.svg&callback=${process.env.DOMAIN}/api/signedMessages`);
Now using router in the app directory, I have to import router from next/navigation. The same code, unfortunately, triggers a CORS error.
Do you have any idea how to fix this, is there a workaround? It's a custom protocol (zel:) that will open an application on the user's computer.
The Problem:
We have our website https://website.com and we are trying to deploy a react router application to https://website.com/react-app. Routing works fine if the user first navigates to https://website.com/react-app and then navigates around the app from there. However, if someone navigates to https://website.com/react-app/home directly (or via bookmark) they get a 404 even though /home is one of our routes.
What We tried:
In our package.json we have the "homepage": "/react-app/" set. Using BrowserRouter we set the basename prop to /react-app and the app works when deployed except for 404 when navigating directly to a nested route. We have heard that HashRouter can be useful in this situation, however, when we use HashRouter we are getting https://website.com/react-app#/ instead of https://website.com/react-app/#/.
How can we configure this to allow users to navigate directly to nested routes in our React Router application deployed to a the /react-app Subfolder on our server?
React: 17.0.2, React-Router-Dom: 5.2.0
I think the problem must be not connected with React. Your React app is configured right. Check the configuration of your web server. Your webserver must return index.html with React application when the user navigates to any page.
I have a react application build with create-react-app. Its using octoberCMS as the backend fetching data using Axios calls from the frontend. Till now I was developing keeping the build content of react inside a directory named 'react' in the root directory of octoberCMS installation. Hence the URL I was hitting was http://example.com/react/.
The problem is now I am done with the development phase and look forward to deployment. But I want my front-end to be served at http://example.com and backend to be served at http://example.com/backend (backend served as I want). How can I achieve this? I am fairly new to both frameworks.
I have tried keeping the build content along with the rest of the octoberCMS
First build your react app that will give you vendor.js[third party scripts] and your app.js[your actual app]
put them in to theme directory assets something
Then In Ocotber CMS make page with URL /:url? and paste your index.html content there.
it will be your root div and including js html, change path for js which points to the build js which you put in theme directory.
now what happens when anybody come to site
- we are serving same content as we do in dev build
- index.html with root tag and needed js
Now if use hit any other url like https://www.example.com/test/etc it also will be catch by /:url? (and all other requests) and home page served and our react app will work as we needed.
if any questions please comment.
I tried to deploy my react app which was created using create react app to,
1.nginx
2.github pages
In both instances, only the react app logo and the title is visible in the tab but nothing appears in the body of the page. (The page is blank even though the code is deployed)
Does anyone know why this happens?
This is caused if you have used the Browser Router in your react project.
Both GitHub Pages and nginx serve your app from a non-root folder (i.e. username.github.io/repo-name/) as opposed to from a root folder (i.e. username.github.io/). React Router does not consider your app's URL as a match for any of the routes defined in your app.
For example, if you define a route using <Route exact path="/" component={SomeComponent} />, React Router will see that / and /repo-name/ do not match exactly and will, thus, not render the component.
To overcome this error use base name prop in the BrowserRouter and name it according to the non-root folder name.
example:- if your app is served inside a folder named "folder1" in your server, do as follows.
Hope my answer helps someone struggling with the same issue.cheers! #iii #R2B
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