Deployment of react-snap on a CRA app has been mostly painless, giving huge page load speed boosts and requiring zero specialized configuration.
However, I'm seeing occasional issues with deploys (both locally and from netlify) only crawling a single page and then appearing done. Like this:
Normal result (maybe 50% of the time) means crawling ~50 pages and then everything else successfully finishes.
I've tried limiting concurrency to 1 without improvement. What other tools can I use to figure this problem out or configuration options can I include to fix this?
Figured this out: Webpack was setting PUBLIC_URL to the production domain, and new deploys were looking on that domain for a JS file that looked like main.1234abcd.js, using a hash of the js file for cache busting. This didn't exist on the production domain before it was deployed so loading the page failed and no links were detected.
Setting the JS links to root-relative URL (i.e. /static/js/main.1234abcd.js) loaded the JS correctly from the snap-created server and allowed it to be crawled correctly.
In addition, it was helpful to debug via the anchor crawling section in react-snap here: https://github.com/stereobooster/react-snap/blob/master/src/puppeteer_utils.js#L108-L119
Related
I'm a little surprised there is nothing out there about this that I have found. But just like the title says, I have a React SPA deployed to Netlify. It goes live without error. The only issue is, if the end user has been to the site before, they have to refresh the page to see any changes I have pushed out.
Is there something I need to add to the index file perhaps?
The browser caches the compiled js bundle.
You can read more here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
One of your options would be to disable it, or set cache expiration to a lower value during the intense development and increase it if/when you deploy less often.
Another option could be to implement some kind of API method to check if newer version has been deployed and trigger a page refresh. (Please be careful not to discard users work, like data filled in forms, during a refresh)
Each have pros and cons.
I'm trying to host a gatsby application on an S3 bucket that contains links to three pages. when I do a gatsby build passing the parameter --prefix-paths and serve it locally everything works without any issues. When moving same build to S3 I keep getting 403 Code: Access denied on every page (at least my tab icon shows).
Now when I build the same application without specifying prefix paths and host it on S3, everything renders without any issues. Is there anyone that has been able to work around this issue?
What I'm expecting:
when I hit:
someapp.s3-website-us-east-1.amazonaws.com/v1/portal/ to take you to the first page.
someapp.s3-website-us-east-1.amazonaws.com/v1/portal/page2 to take you to the second page.
some.app.s3-website-us-east-1.amazonaws.com/v1/portal/page3 to take you to the third.
Any help would be great.
I ended up with an answer after going through API Gateway docs for a while. What I ended up doing was structuring my methods and resources as such. Once set, all my resources were available.
DNS Is being handled via Route53. Previously, had a React SPA deployed on AWS S3 (with Cloudfront dist + SSL). Moved off of that to a SSR NextJS app on ElasticBeanstalk, but even after changing the A records and invalidating CF, some users are still reporting their browser is using the old S3 SPA. Only fix is for them to manually clear their cache for the site.
Asking each random user that's cached my site to manually refresh their cache for the page doesn't seem like a good solution ;)
Here's what I've done thus far:
Updated Route53 (A record) to point to the EB server (this is working as intended),
Tried disabling the associated CF distribution,
When that didn't work, I removed the files in S3 and invalidated the CF dist,
EDIT: After deleting the CF dist completely, users are able to go to the new site - but only after hard-refreshing a half-dozen times. I still feel like there should be a more elegant solution to this requiring little/no user know-how.
All of my CSS & JS files had version numbers appended to help with cache-busting. Users report that they see the HTML structure of the page, but the versioned JS & CSS 404 for them (as they should, since the files no longer exist).
I would have thought this would be enough to have the browser swap update its cache - but apparently not. Only solution so far has been for affected users to manually clear their cache.
More than happy to offer more details if needed, any thoughts/input is super appreciated!
I just tried up deploy my React app for the very first time and spend 6 hours on it. Very discouraged, as I have been trying to deploy a simple one page react app and I couldn't do it.
First I tried to deploy to heroku, then to gh-pages
I think I got some hints as to the culprit from chrome dev tools. When I look at the sources tab, it looks like the browser is expecting what I put in the browser URL bar to be the actual names of the files in my file tree.
For instance, I was using react-router, and I had a route called /users/:id/dashboard. So let's say the full app was http://myapp.com/users/:id/dashboard.
The Error I kept getting, probably over 500 times, was error 404 meaning not found. This means that the browser was looking for a file called myapp/users... when in fact, users was just simply a route. In other words the only entry point was supposed to be http://myapp.com/.... and anything after that should have been manipulated by the script file.
Anyways... this was a terribly frustrating experience to say the least. My app works perfectly in development, but in production mode error 404 is my enemy. I could really use some good resources for increasing my skills in this arena. Something that has to do with how a server serves up files, how the browser interacts with assuming what files will be served based on the URL, etc.
I appreciate it so much. Thanks for the help.
**I am developing a site ,in which front-end is made with Angularjs **
Site name is http://limokit.com/limolog but the problem is that , it take minimum 30 seconds to open the site page on browser. How to reduce this loading time?
we used ngRoute to change the states , but do not getting the result which we wanted to achieve . We also converted all html and js as minified one but it is also not effecting the loading issue for first time.
At first glance it looks like you're loading individual js and css file separately. This can slow down the loading of the page greatly especially on slower connections. The common optimization to do here is to group all js files and css files together and serve one single js and one single css file on production. I don't know what you're using to serve the JS/CSS files but I use compressor for Django.
Also, to further debug this problem, it helps if you look at the network requests that your page is doing on page load in the Chrome inspector. You can glean a lot of information by seeing where your bottlenecks are on page load.
In your site you're having 63 requests and around 3MB size (uncached).
As mentioned in the other answer package everything in bundles. E.g. vendor.bundle.js, bundle.js and bundle.css and also minify these bundles.
I would use webpack or gulp for bundling.
For debugging you can look in the browser console networking tab at the lower right in Firefox you can see a link to load time statistics and also get a info about caching.
The following screenshot shows statistics to your site (left with cache, right uncached).
.
Ditch all frameworks and libraries such as Angular and Jquery and use JSvanilla. Plain javascript is much faster to run(around 160x according to many resources i read..i also know that from my own experience).
Frameworks makes your site crawl.