Set path to local html in React Native Webview - react-native

I currently have a react native webview where the url is set to the path to a html file inside my workspace. In development, everything is working accordingly and the page gets rendered with the parameters set in the url.
My problem, i would like to move to production and hence the IP address used in the path to the index.html file is no longer available.
Here is my code:
const [url,setUrl]=useState(`http://IPADDRESS_ONMYCOMPUTER:19000/app/screens/Payment/index.html?sessionId=${route.params.sessionId}`)
return (
source={{uri:url}}
)
Update
I have created the html files on my server and are working accordingly when i access them from the browser. Unfortunately, they are not working inside my webview in react native.
I keep getting an error and the page doesnt load.
Here is my updated Code:
Here is my code:
const [url,setUrl]=useState(`http://SERVERIPADDRESS/api/payments/index.html?sessionId=${route.params.sessionId}`)
return (
source={{uri:url}}
)

for this you do not need to your local url. there are multiple solution to this. if you page is static you can copy the source code and use this package to render your html. if the page is dynamic you have to put that on some server and the specify that's url.
if your url is http so have to allow http request in your application.
for android add this
<application android:usesCleartextTraffic="true">
</application>
for details visit this question
for iOS visit this

Related

add "baseUrl" for iframe in <WebView> | React Native

I am challenging with my own React Native browser, in that i want to inject my javascript code to iframes in page to discover Resource Timing API. With Main Frame everything is good but with iframes i got "Blocked" by not Same-Origin.
I resolved this by fetch it & add to iframe by srcdoc or access from local file. Some site is running but others are not because it has relative url in its resourses (Ex : image, js, css...). I also try html prop & local file for main frame with baseUrl prop & run ok, but with iframe whether there is anything as baseUrl ?
I think,
The same origin is security check for the site you are trying to access, and it can only be accessed by domain that the site is from, using iframe the origin will be your domain and child site will always block this as requesting domain is different.
If you still want to use the sites which throws same origin error you might need to whitelist your domain at there site first.

Nextjs Image Cache Invalidation

I'm using aws s3 buckets to store my assets. When any of the existed assets is changed from the front-end (eg: client changed his profile image) the backend I made will change the asset only without touching the url. Now here is my problem in my website I'm using revalidate in getStaticProps but still because the link is the same, the cached version of the image is not updating so any way to update those images caches programmatically?
By the way when I click on DevTools and see the preview from the Network tab it shows the right version of the asset
If you add a timestamp to your image url as a query parameter it works with client side rendering. Not sure about server side rendering tho. Give it a try.
const url = 'http://someHost.someBucket.someImageName.jpeg'
const timeStamp = new Date().getTime()
<img src={`${url}?${timestamp}`} />

CORS in local webview

I have a react native app that loads a local page in a webview. This page has normal javascript files that try to load other local files in the same folder using XMLHttpRequest but are unable to do so due to the CORS restrictions.
This is how the webview is loading the content:
source={{ uri: 'file:///android_asset/viewer.html' }}
Does anyone knows a workaround for this? Either disabling CORS or loading the local content with http will work.
I found that the option allowUniversalAccessFromFileURLs was supposed to allow local file access, but it didn't. The view executes before the security settings are updated.
The following workaround worked for me: https://github.com/react-native-community/react-native-webview/issues/656#issuecomment-551312436

Why does Create React App hosted on ZEIT Now not show a 404 response?

If I try mywebsite.com/NON-EXISTENT-PATH for my site on Google App Engine, I get a 404 response.
However using create-react-app's local development server for another app, if I try localhost:3000/NON-EXISTENT-PATH, it just gives me the response for localhost:3000, rather than a 404. This also applies to hosting the app on ZEIT Now. Why is this?
Create React App is auto-detected and a wildcard route is added so that any path that doesn’t match a static file will serve /index.html.
https://zeit.co/docs/v2/build-step#optimized-frameworks
This is necessary for frameworks that don't create HTML files for each page but instead create a single index.html file and use JavaScript to route on the frontend.
This pattern is typically called SPA.

Custom nuxt 500 error page with preloaded state

Environment: Nuxt.js (Vue/Vuex/Node framework with SSR).
If user encounters an Internal Server Error, I want to use a custom Vue template, similar to the one I'm already using for 404 errors.
By looking at Nuxt source, it looks like the only way is to add a custom 500 page is to override the default .nuxt/views/error.html with my own custom error page.
I don't want just a static HTML page that the user must click out of to re-enter the app, though. I want it to still load the Nuxt app with some preloaded '500 error' state.
In Nuxt docs I don't see how to accomplish this. Any advice?
Things I have tried already:
Redirecting from error.html (doesn't work because of double redirect)
Iframe (works, but don't want to do it this way)