I used create-react-app to build an app.
This app had require some image, and this image was used in Home Page
If I just want to change that image in Home Page or some new text change, how could I do?
I don't think it's that simple just re-run build. (or it's just like that?)
I don't have any real world web experience.
I want to know how real server how to do that. I think real website could not be off line even in
second.
Related
I have WordPress shared hosted server with Hostinger and wanted to deploy my react app there. I connected to the server with SFTP and copied and pasted the build folder's contents into public_html/test-gpu-app.
The app works, but I've experienced the strangest issue: when accessing the page, a blank page is displayed for 5 or so seconds, and full render takes nearly 8 seconds.
I've deployed the boilerplate react app to ensure it wasn't something I coded poorly/inefficiently, and it experiences the exact same issue. When deploying to Vercel, the app loads instantly, so it's clearly something to do with the server.
Server usage isn't anywhere close to maxed out, and every other page on the site loads quickly. I'm at a loss, can't figure out where to go from here.
The page:
https://artofpc.com/test-gpu-app/
GTMetrix test:
https://gtmetrix.com/reports/artofpc.com/e9IhhRzi/
Any help would be massively appreciated.
If you run the chrome performance profiler, you will see that the only function calls happening when the content loads are by a script called cmbv2.js, which appears to be a data tracking framework or something like that.
Your app code is downloaded only # 5 seconds or so, likely an arbitrary timeout by the lib. I'm guessing this is something like an analytics framework waiting to display content before JS initializes so that users don't see flashes of content. Do you have settings that automatically defer JS or anything like that by third party libs?
It reminds me of something like a layer that sits between HTML and the end user, auto deferring JS execution or something like that.
Be warned of this smell, future internet folks!
I created a static React website, there is no database, no node.js, no login system. It is a simple company website with many SVG images and a lot of CSS work. I made it with Bootstrap 4. But when I try to run it on localhost it freezes many times. I am unable to figure out why the website is hanging, also it takes time to load all the SVG images.
Can anyone tell why does it freezes?
I'm a few months into web development so I apologize if I misunderstood anything.
What I did
I created a react-random-shapes package that would draw out random shapes as a React component. You can see an example here on my site or in the project page. Each time you refresh the page you'd get a new image. (Note: these pages use React.)
What I want to do next
The result I'm aiming for is to create an API (GET-only) on GitHub Pages that would return the dynamically generated svg file (so you can do something like
<img src="https://github.com/artt/react-random-shapes/blob?size=300&fill=red">
which would return a random blob for anyone who's interested in using. Alternatively, this API could return the svg path so the user could do whatever they want with it (e.g. animation).
The problem I have
Right now I know how to output an html page with the svg file, but not quite sure how to return just the svg (or json, etc.) part of it.
Thanks!
I am trying to do the same thing. I think your best bet would be to use a webserver on another platform like Heroku or, another good option, Replit.
I have a website which have loading time of 10 sec, and which we want to reduce to 3 second or so. I have two questions on it:
1. When I do an analysis of bundle loading in the network tab of dev tools, I can see some JS/CSS files which have very less usage in home page load. But since bundle.js contains everything, I can't see what JS part of it (which is unused), is present in which source code file. Is there a tool or way to do so, so that I can reverse map (not covered JS and css), to an actual source code file and modify it?
2. While the bundle is downloading, is there a way to show a spinner or progress bar to the user to wait for some more time, which is obviously better than showing blank page?
Tried lighthouse and analysis of loading using network tools
React supports code splitting : https://reactjs.org/docs/code-splitting.html
If you implement code splitting in your app, then you can use a fallback component.
I could not think of a better title, Please suggest one.
I am planning to work on a large web application. It will take time to load the full application before application starts functioning.
Suppose its something like asana.com. If you have a link to the task and you open the link. It loads the application first and then shows the detail of the task.
Note: I have added another example in update 2
I want to do just the opposite. Suppose if I try to open the link directly. It should show me the tasks details first and then load the whole application in background.
What development strategy should I follow to implement such feature. Will angular be good for this? I have worked with angular for small projects and am capable of think in angular :)
I just wanted to be pointed in right direction.
Update 1:
I am using Apache2 PHP5 in backing as ReST API. I am thinking to change to GoLang http server. But that does not matter in this context :)
Update 2:
I have not yet started working on the application, but I know that its size is going to be big and its going to take time to load the application. This will be a javascript application, all the communication to web will be done mostly by API. APIs will be fast and it wont be slowing down the application. My main concern is the javascript library and the approach to the issue that I want to display the content of the page before the application is loaded and load the application in background.
As second example: https://chrome.google.com/webstore/detail/a-journey-through-middle/gjgkjeheegjnnmheaflhdocglkiegoni?utm_source=chrome-ntp-icon
If you open this link in chrome, it will load the application and then load the specific content in a popup. I want to load the content of the popup first and then load the application in background. How should I write my application to achieve that.
My suggestion (and I say this as I start to do similar vs. having proven it successful) would be to make some level of framework fairly static so that users get an almost instant response to the site loaded and then start the angular app with something like this
angular.bootstrap(document.getElementById("container"), ["app"])
Ref for the api - https://docs.angularjs.org/api/ng/function/angular.bootstrap
Ref for a demonstration of this - https://egghead.io/lessons/angularjs-angular-bootstrap-app-init
My expectation then is that you will be able to
Load your static elements quickly (which will just have placeholders for your content/material)
Access the data you want in the order you want to get it to present on the screen
Release any other part of the app you need to chrome it up/decorate or populate side items.