Hosted react website taking a lot time to load - reactjs

I just made a reactjs intermediate website hosted using netlify. Link to the hosted website: https://react-opensea-nft.netlify.app/ Yeah so its taking a lot time to load like I waited till last for it to load but at last it didn't loaded. Can someone tell me why this happens and whats the solution for this. To be specific the website was not hosting using netlify, so I had to go to site settings in netlify and add CI= npm run build

Related

GitHub pages deployed with react-gh-pages updated the gh-pages branch but the app is showing 404

I have a website hosted with GitHub Pages at https://[username].github.io.
I have a separate deployment for the repo [username].github.io and the web page hosted at https://[username].github.io is working fine.
I recently created a react app using create-react-app and wanted to host that to Github pages. The repo name is react-gsap. Now I followed the https://github.com/gitname/react-gh-pages tutorial to deploy the app to Github pages. Once I ran npm run deploy I see that the gh-pages branch is created and it has the index.html and other files that are required to run the web app.
The problem is when I access https://[username].github.io/react-gsap I am getting 404.
Here's the repo that I created: https://github.com/atiqorin/react-gsap
What am I missing?
UPDATE:
It was just a delay. The github pages is working now. I guess it takes some time to have the page ready. Anyone having similar issue might want to wait an hour to see the changes.

Can't deploy react app (issues with build folder)

So I have built a react app from scratch using npx create-react-app. Everything was going great and I decided to deploy it, to which I hit a lot of problems. Using BlueHost has the host, I accessed the CPanel and inserted the build folder, which i used npm run build to create. The website loaded correctly on chrome, however issues within Safari and Mobile browsers emerged, the page was empty.
After doing further research, I decided that the issue was in deployment and not dependencies. I came to this conclusion because I was able to run a local server on both Chrome and Safari, to which the website worked. If it was a dependency issue, it would not have worked on the local server.
So, I decided to start debugging the build folder. However, this is where an issue emerged, I could not load it at all on a server. I tried using serve -s build, but that directed me to an error screen, 404: the requested path could not be found. If I try to plainly use the index.html, open with browser method on my build, it directs my to an empty page with an invalid url, file:///Users/danieldobrovolskiy/Documents/optimal-exterior/build/index.html.
Apologies if my question is vague or incoherent in someway. I'm seriously confused with the deployment process and have no idea what to even ask. All help is appreciated! Let me know if further information is needed.[
Have you set a homepage in package.json? it should be like "homepage": "./" if you're deploying off the main folder of the webserver

How to show my React app to the others from GitLab?

Hi everybody im actually working for a company and they are asking me to show them my React Website while im working on it. They have a website that is connected to our GitLab Project and if i type http.websitename/folderOnGitLab it actually comes out whats inside the folder but with react it shows the code , not the website , because the only way i know how to open react app is by "npm run start" from local, i dont really know how to "append my app in that website from GitLab" . I have already pushed all my React App but i dont really know how to make that visible to everyone as a website not only as a code. The website is a website they host so is always online and is connected to the project as i said. So i kinda have all the material but dont know how to make that work. For example i have pushed Test.txt and if i type website/Test.txt it shows the inside of it , so the website works.
It depends on how your app was set up, but probably you need to run npm run build, which will package up your app to be used on a production website.
This will be in the /build folder, the contents of which can be hosted online.
I'm not sure how you've managed to get that folder working on that website, it definitely isn't best practice to have all the code hosted online like that, but for a temporary solution you can just go to http.websitename/folderOnGitLab/build and it will probably work.
In the future you want to copy just the contents of the /build folder to be visible on http.websitename/folderOnGitLab.
Edit: The /build folder will be excluded from git, don't put that on GitLab, just the other source files, as you can re-generate it any time by running np run build
You can try using heroku. Once you push to heroku, it deploys your code and provides a url which you can share. It's free.
https://blog.heroku.com/deploying-react-with-zero-configuration
Are you using gitlab pipelines?
If yes, you can configure ngrok in one of your jobs.
If someone wants to see your work, this person just need to play the job that have the ngrok tool and it will receive a custom link with the application.
To stop the app, you just need to click in the cancel button

Can running npm run build to React App or ng build --prod to angular app Inject Clickjacking?

I started development of my website in Angular 9.1 and build the application via ng build --prod,
After build there were four js files generated and these js file will be referred in index.html.
a main.*.js
a runtime.*.js
2 polyfill.*.js
I used to upload all my website content to aws static website hosting and then the play begins.
When I refresh my website a clickjacking will be injected and any click to my website will take me to some random website for advertisement display.
What I have noticed is, my runtime..js is getting modified between my upload to AWS S3 bucket i.e At my local My runtime..js is completely normal but when It is accessed in browser after upload, it will have the malware injected.
Since I was not having idea that how is this happening I doubted,
npm
any npm library
nodejs
Hence to confirm that I started development in ReactJS but the result was same after uploading my website to AWS.
What else I tried is I renamed all the js file with x.js, y.js.... but still that script was getting injected.
Now I am not getting any clue that how the script is getting injected in my normal js file.
As per me only one area I can doubt
AWS?
To further experiment I removed public read access to all my objects but still that Script was loading (only that script) else every other objects were in-accessible and that strengthen my doubt.
Can somebody here please help me to get my website up and running without malware/clickjacking.
This whole runtime.*.js is modified.

How to deploy create react app on my website?

So I have a website and I want to deploy some of my projects on my portfolio website like mywebsite.com/first-project.html
I already ran npm run build so I have a build version with the static files and I put it on my website but the react index.html isn't return anything the div id of root is empty.
I have seen tutorial of deploying them through surge and github pages. I don't want to do that, I want it on my own website. How can I achieve this?
Edit:- I forgot to mention the projects I created are through the npm create-react-app method and I have run the static build through serve -s build on my local computer. I just want to do the same on my website.
Edit2:- In the future if I am creating a react based website with the intention of hosting on my own domain, what kind of groundwork should I lay to make it easier? Any node packages or routing or set up? Also would you recommend create-react-app for this purpose if not what method would you recommend?

Resources