I'm having a little bit of trouble deploying a multipage React App (using React-Router V.6) on Github Pages. On my actual deployment build (here), whenever I go to a route (such as about or resume) and refresh, I get a 404. I assume this is due to Client-Side Rendering, along with GH Pages only knowing the base url "/portfolio", and not knowing "/portfolio/about".
I'm still learning the ropes of React-Router, so I've been searching for crazy for a solution, but have had no luck. I've searched through these solutions :
React Router v4: Cant load page on GitHub pages
https://github.com/rafgraph/spa-github-pages
and neither have seemed to work for me.
Boiling my question down to the simplest terms, I'm wondering what the easiest way to fix this is.
I've tried switching my BrowserRouter to HashRouter, but that didn't work. I attempted to add a 404.html file along with a redirect script in my Index.html, but that didn't work either. I'm not looking for anything too robust, since this is just a portfolio site hosted on GH Pages, but I do want to keep the url's looking clean if possible.
Again, here is my deployment build, along with source code
Apologies if this question is too long! This is my first StackOverflow question. : )
I believe that you are already going in the right direction
Reference to this repo, copy the last script from here and add the 404.html file, then it will be fine.
Related
React beginner here trying to make a portfolio. I ran into an issue which I could not find any answers for hence posting here.
My project uses react-mdl and particularly the projects page, which uses a <Grid/> component. When I view my project in a mobile interface (tested on FireFox and Chrome dev tools as well as a mobile device (OnePlus 7 Pro)), I get my desired layout. However, when I pushed the same code to Github Pages, the layout was remarkably different and certainly not appealing to the eyes.
The following screenshots should explain it better
Localhost view
Github Pages View
I am not necessarily sure what exactly is causing the issue and have tried multiple "fixes" which have unfortunately not worked out thus far and would really appreciate a push in the right direction.
I also apologize for linking the code and not posting it directly, however, I did not wish to clutter the post with that much media since the files are relatively big.
Thank you in advance and please let me know if I can provide any more information, I would be very pleased to.
It looks like the public folder in your repository hasn't changed in the last month. If you aren't building your project before deploying it to gh-pages then your live website will be using an older version which likely has these formatting issues.
Use npm run build, and then npm run deploy. This will update your public folder with the latest changes you have made, and then deploy these newer changes.
You can read more about the public folder for your CRA here - https://create-react-app.dev/docs/using-the-public-folder/
My thoughts are that a problem is in the routing differences between these two.
The application works when I serve it on localhost:3000 and the whole front-end is presented, but when I build the application using mvn package and upload the .war file to the Liferay Portal, I am presented with only the navigation bar.
Also when I press on any element in the navbar, nothing happens. Neither in the console, network or on the URL. If someone has any clues it would mean a lot to me.
Thank you.
This question needs some clarification about the source code and what did you use
But maybe you are using the BrowseRouter rather than HashRouter
We received a simple app from an over-seas developer. This application runs on a subdomain:
IE: https://balance-sheet.clientdomain.com/
We have access to the files, but when we try and move the files into a subdirectory:
IE: https://www.clientdomain.com/balance-sheet/
Then the application does not run any more.
We have tried to edit several of the javascript files to reference the new location to address the errors that were being produced. However even after the errors were fixed the app still does not run.
I have lots of dev experience, but none with the React JS stuff. Do we need original files to re-deploy? Is it possible to edit the current files to make this work?
This project is so simple, it is a basic balance sheet for training purposes.
Below is a screenshot of the app and then the file-system.
Should I provide any links or files of the actual project?
I'm really just first trying to get a feel for the options here...
Thanks all!
Add <base href="/subdir/"> in the head section of index.html and change subdir to your sub directory name. Please refer this link
I'm currently working in a React web app and to save time, a work collegue helped me with the landing page. He did it using vanilla HTML, CSS and vanilla JS.
My question is, can I use that landing without having to adapt it to react? I know I could wrap all the code in a div and go on. But the JS librarys that he used, have to ve adapted.
I tried doing a npm build, create a index.html and place the build folder under it in a folder called "trade". I was trying to create a structure like: "http://ip-server/" is the index.html that I created. And "http://ip-server/trade/" is the react app. I used Docker with Nginx for it. But it didn't seem to work. All I could reach was the index.html, never the build folder.
Am I missing something? Or is it better to adapt the landing?
I would use the "div" technique to adapt the landing page. For that you'd could use "dangerouslySetInnerHTML" as pointed out here: https://reactjs.org/docs/dom-elements.html
function createMarkup() {
return {__html: 'First ยท Second'};
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
And then you'll need to research how to make the third party javascript from that landing page work in React in case per case basis. This will be useful for you also for future cases if you can afford to invest the time now. I hope this helps!
I'm developing a web application, and I recently discovered the need of a basic input form. The rest of my application does not have much of this, mostly single input-fields. I figured I would try to use a javascript library for validation, and ended up choosing parsley.js.
in this youtube tutorial, the tutor uses bootstrapping, a term I have come across a lot lately, but have no experience with. I figured I'd try it out in the single page of my web app.
However I get errors on the first character of the css I try to import, stating that < is an illegal token. This is of course the start of the file <!DOCTYPE html>. So in other words, the .css is found and included, it is just not accepted. This error has been repeated with a couple of different import sources now.
I've tried to look a little outside the box, to figure out why. I read posts like these:
What is bootstrapping?
Setup bootstrup file in java web application
These have led me to suspect that bootstrapping might not be meant for importing a style sheet, for a single page which is only a part of a web app, like I am trying to do.
So, is it wrong to think that I can use bootstrapping as I would import a .css file, for a single page? If not, what else might my problem be?
EDIT:
I forgot to tell that I am importing the css and js libraries through their online url's. If i copy them to my workspace, and import them from there, I get this error:
PWC6199: Generated servlet error:
The code of method _jspService(HttpServletRequest, HttpServletResponse) is
exceeding the 65535 bytes limit