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
Related
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.
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/
I am working on a project where I want to make it look as if a shutter of a camera is opening and closing... I was able to get this to work in a regular html/css/js file structure however when I trie to bring/ incorporate it into Foundations Responsive Frameworks I was not able to get it to work. There are no errors in the console and checked to make sure everything is linked correctly. ... I have attached both folders in the link, the working folder that is not in a framework and the broken folder that I am trying to use foundations framework..
https://drive.google.com/folderview?id=0B4EHdofHefLHZjZpczBybE1xWGs&usp=sharing
Thank you in advance for any feedback/help.
-Jake
Unfortunately, I cannot fix it.
Fortunately, I did figure out the problem.
The jquery.shutter.css is not loading properly. Here is my attempt at your project in React.
When I take your working example and delete the jquery.shutter.css file, I get the exact same result as the React version which has no error message. I gave it a good try and cannot fix it without more time. I hope knowing the problem helps you.
Note: Unfortunately Google will not let me upload a JSON file so you will have to change package.txt to package.json and install using Node
I have a new project with the following components in use:
Node.js (v0.10.37)
Express micro framework
Jade templating engine
Angular.js (latest)
Material design library (material.angularjs.org)
Jquery
I have an issue when I do browser reload (hitting the browser refresh button). I am not using any of the Angular.js routing capabilities. I am using the Express router and I have a route for every page.
When I try to refresh, a page build with this components, sometimes (1 of 20 reloads) the AngularJS just doesn't run without any console errors.
The issue is more common when I navigate between routes like:
I am on localhost:3000/index and I go in localhost:3000/about
In this case is more likely to occur this issue.
EDIT: I am not using any of the AngularJS routing capabilities.
EDIT: I also tested the DOMContentLoaded wrapping solution.
EDIT: I attached a plunker but the issue doesn't reproduce. I think it has something to do with the server too. The plunker is really close to reality.
ng-app="StarterApp"
See the plunker :)
EDIT: http://plnkr.co/edit/Vi1AQxNxJTDBf4B1ZEhr?p=preview
EDIT: If you encount the error on plunker please tell me.
EDIT: I also tried to activate: $locationProvider.html5Mode(true);
EDIT: I also found that this occurs when the server and computer (running on localhost) is really stressed. (82% RAM - 1 CPU core at 99%)
I also tracked the requests and I found that the files are loaded correctly on main requests but the requests done in Angular (Ajax requests) doesn't fire.
I also installed some Chrome AngularJS debugging plugin and it doesn't run either when this occurs.
This happens on all my pages sometimes, so I don't think that some code will be useful.
To fix this I reload again and sometimes I reload 2 times to fire up the Angular.JS.
This are the following cases:
When it is working
The interface
The console
When it is not working
The interface
The console
It really annoys me. I will continue investigating this issue but I will really appreciate any help.
Evrika!
I found the problem. Thank you all for support.
It was a problem about angular.js debugging chrome/firefox extensions.
The Ng-Inspector loads on every load a script ng-inspector.js and in this script it is a controller that deals with $state service and declare how to load the user modules in order to push debugging data into the plugin.
Somehow this loading configuration messes with my loading configuration.
The code was well-written but I didn't thought about this.
So if you encount this problem make sure that your debugging plugins (ng-inspector and angular batarang) don't interact with your business logic inside your project.
I made some stress testing to make sure that this issue doesn't occur anymore.
Server load
Now everythink is ok.
I love the AngularJS integration with WebStorm. It makes development of angular apps even quicker and snappier than ever. However, I'm struggling to get Chrome debugging to work. Does anyone know if this is supported through the AngularJS plugin?
I've setup the javascript debugger, and I get the Chrome extension to connect to WebStorm. I then navigate to my app's main page (the login page) and any breakpoints on that page work great. But then as soon as I change to any other route in the app, the breakpoints and variable inspection just stop working.
I imagine that's because WebStorm doesn't know which javascript file (or angular module) is being executed after the route changes. Does anyone know if there is a way to configure this to make it work? It would be really great to be able to inspect/debug my $scope variables, bindings, services/directives, etc.
Thanks in advance for any help.
PS. I'm currently using the WebStorm 8 EAP, but I also have WebStorm 7 available.
UPDATE: After some more googling, I found that you have to setup the Run/Debug Configurations within WebStorm. My problem was that I had the wrong Remote URL for my project's root folder. After changing that configuration, it works great :)