Embedding React static site (create react app) in a website - javascript

I have a react app (created using create-react-app) and generated build (using react-scripts, npm run build).
Build folder has static site (with single index.html, js file and media) which is deployed on a domain (domain1.com).
On domain2.com there is a web app already running. Now I want to embed domain1.com in domain2.com.
What I tried:
Inside domain2.com I added <div id="root"></div>
loaded necessary scripts and css file from domain1.com
What it outputs:
It rendered html, css and all necessary icons but none of the functionality is working. Click is not triggered and no error message shown.
What is expected:
It should work fine in domain2.com as it works in domain1.com
I don't want to use iframe or object (even they worked well).
Please help me in achieving this.
Thank-you.

Related

Downloading scripts and stylesheet beforhand - vuejs 2

While running a vuejs app on the intranet I get a 403 FORBIDDEN error while the web app is trying to get some js scripts and css files from the internet (like jquery.min.js or semantic.min.css). The app runs in a docker container.
Is there a way to tell the app to download all the files needed already during initiation (run) of the container - while still having access to the internet? So that this doesn't happen during the page is being loaded in the browser? I'm using Vue 2. Thanks in advance!

How can display index.hbs instead of index.html inside public_html on cpanel

I built my website using a JavaScript template engine handlesbar and it runs perfectly locally but it does not display at all after uploading to the cpanel of my hosting company.
However, whenever, I change the index.hbs to index.html, it will load my website files but if you try to access any routes built using handlebars, it displays 404 page.
Kindly help.
I have tried hosting the project on javascript hosting plan and change the extension, it does not load my website successfully.

PWA: Do we have to add links to manifest to the header section of all website pages?

Do we have to add links to manifest to the header section of all pages of my PWA website or just the index.html file?
same question for "metadata".
This is depending on if you are using a SPA (Single Page Application like React or Vue.js) or have overall static files.
For example, if you are using Vue.js, then it is enough to just put it in the index.html.
Frameworks like Nuxt.js, which creates static files in the end, they do it automatically a reference on all .html files.
So, if you have static files (like index.html and second.html) you should always reference to the manifest. Just think about when the user directly gets to the second.html, he would not get notified about, that there is a manifest.json like the other metatags.

How to automatically append the firebase script tag for flutter web using Github Actions or another resource?

I currently have a release pipeline that goes something like this:
Push to Github Repo -> Github Actions runs flutter build web -> Website released on my Github Pages.
I want to implement Firebase with my app, however it requires there to be an additional script tag (https://firebase.flutter.dev/docs/installation/web/) in the index.html file, which is generated by flutter build web. Therefore every time I push an update, I have to go into the branch and edit the index.html with the additional script.
I was wondering if there was a way that I could either edit my project setup so the script tag stays in the index.html file on build, or if there was a way to change my Github Actions so the script is automatically appended to the generated file.
Thanks.

Suggestion on injecting a React App Widget on a host website using iframe

I'm making a chat widget, which will be embeddable to any website using an iframe. Previously I made a react app and then bundled everything to ONE bundle.js file and hosted it on S3(or any static file hosting platform) with public access and then inject that file inside the website with iframe (using the script tag). That bundle.js file has a size of nearly 1.23 MBs. I suspect that it can affect the speed of the website loading.
I have tried one more thing, I created the same react app and deployed it on AWS Amplify, and then use the link of that app in the iframe instead of hosting a static bundle.js file.
Is the latter one a good approach or the former (bundle.js) was better?
I figured it out that the latter approach (Running the app in AWS Amplify) takes more time to load hence is not that useful than hosting a static file on S3. However, I found that CloudFront can improve the speed and also add cache support for it.

Categories