Offline static content in React app - reactjs

I have a react app created with create-react-app. I would like to add an image not part of the react app to the offline manifest. The image is just referenced from index.html. I don't understand how I can include this in the offline manifest.
The react app is ejected.

Put the image in the public folder just as in a regular website and refer to that image. Everything in the src folder is put in a big js file after building so you cant use that

Related

How to import locally images in a React-project

I have a following problem:
I'm trying to upload local images to my react project.
I use the "Create React App".
I'm not quite clear in which folder I should place the images: in the public or in the src folder?
There are different opinions in the forum.
In this project I have the photos in the public folder and just upload them with their name (img.png). On GitHub it seems to work,
but if I want to load it locally via the browser (npm start) then the photos are not displayed.
Tried all the methods described in the forum (../ or ../../ or import img from'' etc) but nothing helped.
GitHub-link
I want the images to load in the local browser.

Create React App index.html Script Does Not Transfer To Native in Capacitor

I have a Reactjs typescript project I want to transfer to native mobile platforms using Capacitor. I've successfully created the native projects for each, however there's an issue with the Google login feature I have in it.
The Google login API requires you to add a script tag to the index.html in the public folder for the React app which injects a variable used to do the logging in. This is the script tag in the index.html file:
<script src="https://accounts.google.com/gsi/client"></script>
I have a declare var google: any in a file where I do the logging in. This works fine in web but when I use Capacitor and open the Android version, it fails claiming that the google variable is not defined.
Why does this happen and how do I fix it?

How to embed existing react app to WordPress

I'm trying to embed an existing react app to my WordPress site using the plugin ReactPress. I created a react app inside the plugin section:
and added my build folder of the existing react app inside the path where is needed (using file administrator plugin):
The Path is wp-content/plugins/reactpress/apps/dase-mural-design. The problem is when I click on the URL Slug in order to see this section (where the build folder is placed) I don't see the react app I've just uploaded, I just see header and footer and these errors:
What I'm doing wrong? How can I fix it?
Thanks in advance.
Update:
I used FileZilla to upload these files but is still not showing anything. Any idea?
I changed the package.json homepage to: "homepage": "/wp-content/plugins/reactpress/apps/dase-mural-design/build",
But in the console of the WordPress site I see:
Thanks
It's an encoding issue, try setting your site encoding to utf-8 or uploading the files of your react app with a different tool, it could be the file manager plugin is changing the encoding when uploading.

How can I remove the React App symbol and name or the "Website created using create-react-app"?

I have deployed my website with firebase hosting. Everytime I go the site, there's still the name React App on the tabs of my browser. Do I have to purchase a domain name to get rid of it?
You can change the title of the index.html page in the public directory. And for the customizing the icon, you can change the favicon also located in the public directory.
simply go to the /public folder of your react app and change the <title> React App </title> in index.html file to whatever the title of your website is.

How to deploy a react application on a static server

I have a react application build with create-react-app. Its using octoberCMS as the backend fetching data using Axios calls from the frontend. Till now I was developing keeping the build content of react inside a directory named 'react' in the root directory of octoberCMS installation. Hence the URL I was hitting was http://example.com/react/.
The problem is now I am done with the development phase and look forward to deployment. But I want my front-end to be served at http://example.com and backend to be served at http://example.com/backend (backend served as I want). How can I achieve this? I am fairly new to both frameworks.
I have tried keeping the build content along with the rest of the octoberCMS
First build your react app that will give you vendor.js[third party scripts] and your app.js[your actual app]
put them in to theme directory assets something
Then In Ocotber CMS make page with URL /:url? and paste your index.html content there.
it will be your root div and including js html, change path for js which points to the build js which you put in theme directory.
now what happens when anybody come to site
- we are serving same content as we do in dev build
- index.html with root tag and needed js
Now if use hit any other url like https://www.example.com/test/etc it also will be catch by /:url? (and all other requests) and home page served and our react app will work as we needed.
if any questions please comment.

Resources