search

virtual-labs / engineers-forum

This is the central repository to post all the queries regarding labs and experiments.
Other
2 stars 5 forks source link

React Project Hosted is blank in Simulation #910

Open nitinravi opened 8 months ago

nitinravi commented 8 months ago

Hey, I have been trying for the past 24 hours to host a react project on the phase 3 virtual labs site and everything works fine with no errors and as expected but the simulation page just seems to be empty with no errors even in the console. The steps I followed are: updating package.json with homepage as "https://virtual-labs.github.io/exp-key-generation-des-au/simulation" running npm run build pasting the built files into dev branch's experiment/simulation directory merging into testing from dev All the built files are loaded and can be seen in the "source" in inspect but the content just wont load as it should. Please help me out, is there anything I'm missing?

priya100raman commented 8 months ago

@nitinravi You have closed the issue. Is it fixed ?

nitinravi commented 8 months ago

@priya100raman nope I thought it was and closed it bymistake but its still not been resolved....I believe its some error with the routing so it'll be helpful if someone who has previously deployed a react project with routing can help me out here

raj-vlabs commented 8 months ago

I am not sure I understand the problem @nitinravi . I just looked at the page and it seems to be working. To run react projects, you need to load react runtime on the simulation page. In case you still have issues, please let me know how to reproduce it

nitinravi commented 8 months ago

Hey @raj-vlabs @priya100raman thank you guys for the responses but I've fixed the issue after hours of looking for answers in the internet and the fix was to use HashRouter instead of Browser Router to route between pages/components in App.js The biggest challenge was not seeing any errors in the console while all the js and css was loaded as expected but nothing got rendered on screen (in the root div inside index.html to be more precise) I'm not entirely sure why it worked when I tried to host it on my personal repository but not here. Apparently for a service like github pages the hash routing is what works. You can tag this as an FAQ as I believe it could be useful for more people who might encounter this error.

priya100raman commented 8 months ago

@nitinravi , thank you for the information. Can you please elaborate the steps that you took to integrate your React component with GirtHub pages? We will add it to our documentation.