I am working on a personal project for my portfolio and I'm completely stuck.
I have an Angular 14 app I've been working on. The stack is PEAN. I currently have a live version of it hosted on Heroku. The issue I'm running into is that in my local development version of the app, everything works as intended, however on the live version on Heroku, If I refresh the page using f5 while on the main backlog page, it does not refresh, and instead shows a blank page with "[ ]" at the top of the page. Every other part of the app functions fine, and it does not fully crash when I run into this issue. If I type a different URL in and go to that page, it works again. If after doing so, I click a link that loads the crashed component, it will reload just fine. It appears that the component only breaks if I refresh the component with f5 (or clicking the refresh button on chrome).
I've been working on this for a long time and I think I've narrowed it down a bit. So far I've:
confirmed that my express server is serving my static HTML files from their folder correctly
added a catch all code block at the bottom of my express file to redirect to index.html
made sure that Heroku was actually executing my server.js file
removed potential offending portions of code, like auth/error interceptors and newly added Google Sign-in
I've also:
checked with various browsers/mobile browsers
checked for console errors (there are none)
checked network tab on refresh. (just shows a 304-OK response)
checked Heroku logs. No errors there either.
The issue can not be recreated locally, and it only happens on refresh of one component, the Backlog component.
If there is any more info I can add please let me know, I'm hoping this is a regularly encountered issue. I can't seem to find anything that specifically deals with my exact issue by searching. Any help is greatly appreciated.
update
The blank page with "[ ]" appears to be my database's response when hit without a user ID to check against, and return data. I've narrowed this down to an HTTP-INTERCEPTOR that injects the user ID into the headers, which the route that would use that info for the DB wouldn't have. This makes my DB return "[]".
The only thing I don't understand is that this happens only when hosted on heroku, and not locally.
I am setting up a boilerplate using React and Vite to build the frontend of my Electron application, the boilerplate is almost done I just need to add hot reloading to the React app. The issue that I am having is that when I change a file and save it the change is detected by the HMR (change detections IS logged to the terminal) but it is not updated in the browser (even if refreshing the page) until I save it a second time without even changing anything.
I installed the vitejs/plugin-react plugin as it is required for HMR with React but it still gives this issue.
enter image description here
I'm running the basic "jhipster-sample-app" with Angular 5, and I'm using JHipster 5.5.0. I run the backend with ./mvnw and front-end with npm start, and everything works correctly, with me making changes in the .html & .ts files, and the front-end refreshes correctly.
However, about 70% of the time, I will continue to make changes to the front-end files, but the site will stop auto-reloading. And then I'll click into a new link in the website (like "Administration - User management"), but it just loads forever. And I refresh the website but the site just loads forever.
I have ctrl+c the npm start, then kill -9 the 'node' process (as ctrl+c'ing the npm start doesn't kill it, then npm start to get my changes to register. But again the whole thing only fails around 70% of the time. And other times I can continue to make changes and it works just fine. And some of the times it will work fine, but then after a minute or two of making changes it will then fail.
Anyone have any ideas as to why this is happening? I didn't change anything major with the sample code.
When creating a Vue project with vue init webpack project-name, setting it up, and finally calling npm run dev you can open your browser on localhost:8080 and see the default page. In fact, you can navigate to mostly any "non-file" path, such as /a/b/c-d, and Vue will still pick it up. The only paths that it didn't seem to pick up are the ones ending with .*, and ones ending simply with .. Examples are /a.js, /b., /c/d.png
I am trying to use Vue with a REST backend (Sails.js, using sails-generate-new-webpack-vue), which means I will have routes that will look like GET /api/users and similar. With that sails generator, a common webpack Vue project is generated, and some config files are changed in order to put the output of webpack onto the .tmp directory used by sails in order to actually serve files.
I tried looking at the source files and noticed that normally npm run dev calls node build/dev-server.js, as par package.json, but in there I don't see where it's actually redirecting everything to a single html file. That would already be helpful, but after a quick check I noticed that with my sails setup, that file is actually never used (plugged a simple console.log which never got ran).
How (or rather, where) does Vue redirect all "non-file" routes to a single path?
This may become clear as soon as I find out how and where it is, but otherwise, how do I change it and only make Vue pick up a specific express-route-like set of paths? As in, ideally I'd make it pick up routes such as /:username/profile
The answer doesn't have to be specific to sails, although if you have additional information, that might really help.
EDIT: steps to recreate
npm i -g sails sails-generate-new-webpack-vue vue-cli
echo "{\"generators\":{\"modules\":{\"new\":\"sails-generate-new-webpack-vue\"}}}" > .sailsrc
sails new test-project
EDIT: turns out it's sails specific
Turns out that what makes Vue pick every route is in build/dev-server.js, the history fallback API. That's great and I hope will help people looking for that answer, but with this specific setup, that file is never actually used, and I'm fairly clueless about what is being used. I do realize that there are very few people using the npm package I mentioned, but if anyone could give that a look, it would be extremely helpful!
EDIT: found exactly where to deactivate it
Had to look through a fair amount of source code, and saw webpack/node_modules/sails-hook-webpack-vue/index.js, just had to comment out lines 114 AND 120
As I see, you don't need the extra server configurations provided by the webpack template.
I will advice you switch to webpack-simple template.
The dev server is located in the build folder, a file called dev-server.js. It uses express to setup a local server to serve your files.
If you setup your own server to serve the files, do remember to server the build*.js files.
Eventually got it :D
The issue was with history-api-fallback middleware, which is normally toggleable in build/dev-server.js on a normal Vue project.
But with my setup, it was ultimately being introduced in the local webpack/node_modules/sails-hook-webpack-vue/index.js on lines 114 and 120:
sails.config.http.middleware.historyFallback = historyFallback();
...
sails.config.http.middleware.order.unshift('historyFallback');
which you just need to comment out.
Then you can indicate your routes as you wish in config/routes.js and make them point to index.html
I'm trying to get async calls to work, but am stuck at a setup hurdle. I just read and replicated this async example, and then tried to copy some bits over into my app http://redux.js.org/docs/advanced/ExampleRedditAPI.html
My app won't display any errors and React elements do not get put onto the DOM and I'm only able to display my index.html...
If someone could check out the client folder where the react code sits that would be amazing (index.html is in views folder in root, bundle is in public/javascripts)
https://github.com/jaegerbombb/twitter-api-test
No idea what's going wrong and am wondering how I might be able to debug this type of issue in the future
Extra info:
I started out with everything working (a button saying show all and another saying hide all, which displayed a string) inside the client/twitter folder. My additions were inside the Tweets folder and appComponent/index files