How to Open Raw HTML (.html) in React 'Public' Folder? - reactjs

I'm creating static .html files from my React Apps with https://github.com/gajus/usus (background job)
and put it in the /public and make new folder ie. /article/
Issue : whenever I open that html file ie. aaa-bbb-ccc-ddd.html it is rendered firstly and then the index.html show up at last.
How to properly open .html file in the React Js app?
NB : I'm using create-react-app

say, you have test.html in public/article/, then in the src/example.js you can use <a href='/article/test.html' target='_blank'>link to test.html</a> to open test.html in a new window.

Related

How can i download a sample xlsx file from public resource folder in React js

I'm trying to download a sample xlsx file from public folder in React js in the following way
<a
href={process.env.PUBLIC_URL + "/my-file.xlsx"}
download={"my-file.xlsx"}
>
Download file
</a>
i am stuck at this. downloading this way works locally, but when deployed to public, it fails and instead downloads just an empty corrupted file. Any ideas on that ?
Why the file is being corrupted on the server, although it works fine locally?
you should use relative path of file for href,
ex: href={"../../assets/files/my-file.xlsx"}
and dont do this "download={"my-file.xlsx"}"
instead write download={true} or only download

How do I access a file in a directory from html in a Wordpress Site?

I am trying to use reactjs components in wordpress. I was following this tutorial -
https://jhinter.medium.com/using-react-based-web-components-in-wordpress-f0d4097aca38
Until I got stuck at the last part: I have added this as an html custom block to an empty page:
<script src="/apps/csptest-component/direflowBundle.js"></script>
<csptest-component></csptest-component>
The console prints out:
GET http://www.adminprofi.com/apps/csptest-component/direflowBundle.js net::ERR_ABORTED 404 (Not Found)
I have used FTP to put the file in a folder called apps/csptest-component in the root directory of the wordpress site and I can see that the upload was successful. Do I need to change the link that the src is pointing to? Any help is appreciated!
WordPress allows you to access files in the wp-content directory, so best practice would be to have a child theme setup and then you can upload your javascript to the directory: wp-content/themes/child/js and access it using http://www.adminprofi.com/wp-content/themes/child/js/direflowBundles.js .
It's recommended to use a child theme to ensure your script doesn't get removed when your theme is updated (plenty of resources on how to do this). Create a folder in here called js for tidiness.
EDIT: I think it will be easiest for you to upload your script to: /wp-content/themes/Divi/js folder, and then you can access your script like: <script src="http://www.adminprofi.com/wp-content/themes/Divi/js/yourscriptname.js"></script>

IONIC run command always generate index.html file in 'www' folder, why?

I am trying to create an ionic app on existing angularjs project.
I followed the instructions here, and my problem is when I run ionic serve it overrides my index.html file in www folder. So the results will be empty! But if I replaced my index.html file in www folder while the server is running and refreshed I got an expected results and I have this process loop always.
Is there any way to prevent ionic from override my index.html file?
I got the same issue.
I have created a blank project, and everytime I launch:
ionic serve
My www/index.html file is replaced with the blank project one.
I just realize that it replaces the www/index.html file with the src/index.html file.
So now I just edit the index.html file located in src folder.

View PDF file internally into the app from local folder by using inappbrowser

I am developing an app for ipad using
ionic framework
I am stuck at one point were
i want to open a PDF file using inappbrowser from an local folder
So that the user can read the PDF internally. The PDF is kept in local folder were my HTML file is available and i am trying to open it through below code:
window.open('pdf-sample.pdf', '_blank', 'location=yes');
But the issue is when i am trying to open it i am
not able to view/read the PDF file
It shows me the white blank screen with no content in it.
Screenshot:
What should i do to resolve this issue?
-thanks
The code looks ok. Try to open https://www.google.com/. If that works than the path to pdf is not correct.
Are you sure you try to open after deviceready ?

remove the yeoman image from browser

I used Yeoman to create a web app in AngularJS. Everything works ok, but after using the grunt build command, if I view the built app in the browser (from dist directory), I can see that some yeoman image on the broswer, how i can remove it?
Delete Chrome's favicon cache file.
On the Mac, it's at
/Users/[yourname]/Library/Application\ Support/Google/Chrome/Default/Favicons
Look for a line that looks like this in your index.html in your public folder.
<link rel="icon" type="image/ico" href="../img/favicon.ico">
and change the href to wherever your image is, or to remove it just delete that line.
You only have to do this steps:
Delete the file called favicon.ico (it's in the dir called "app")
If you have the image you want to use as a favicon, go to this link
Click on "create a favicon" and upload your image.
This page will generate your favicon in a file named "favicon" and you have to save it in the same place where you deleted the file favicon of yeoman.

Resources