I'm working with the React Create App and implementing PWA features. I configured PWA manifest successfully, the app can be installed. Now I'm working on Offline mode and here is a problem.
For local development, CRA uses webpack dev server. The app runs on http://localhost:3000
When I add the app to my Desktop and turn off the internet and the webpack dev server I'm facing the error: The webpage at http://localhost:3000/index.html might be temporarily down or it may have moved permanently to a new web address.
It looks like it doesn't work without the working server, eg. a connection.
So I can't test the PWA features because it just doesn't work in a Standalone Mode without any connection (internet & webpack dev server) but I have to.
Is it possible to handle it somehow? Or I'm doing something wrong?
Basically my question is: How to the PWA Offline mode locally in a Standalone mode when PWA installed on Homescreen and the Internet and Dev server are turned off.
Thanks for any help!
Kind Regards.
Related
Up until recently, my app was running on iOS. I am now running into a white screen issue when running npx run-ios.
When running npx run-ios, the simulator starts up and builds the application, but Metro bundler says warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB. on the terminal. Which is odd as the command itself opens the simulator and builds the application.
I am also unable to access the developer menu in both the terminal and on the simulator. So I can't access/edit bundler configs.
Things I've tried:
I've tried to delete the node_modules and run npm-install.
Deleting the Pods folder and Podfile.lock and then running pod install.
As I was working in a development branch, so I checked out to the main branch, which was working fine before, but the same issue persists, so I am doubtful that it's my code (I might be wrong however".
Doing Clear device and settingson the simulator.
Trying a different simulator.
I've seen on different similar posts that the simulator and my dev environment should be on the same network. However, this was never an issue before, and there is also no wifi edit function on the simulator.
Running the iOS application from Xcode instead
My development environment is in ubuntu on wsl2 with vscode as editor running on windows using the remote wsl extension. I am running it on a physical android device using the Expo Go app using the tunnel connection on the same wifi network.
Everything works fine from scanning the QR Code to editing the code and it auto refreshes everytime I make changes on vscode. The problem is when I became idle(not making changes) for a short time, the connection somehow times out giving the error:
Cannot connect to Metro.
Cannot connect to Metro screenshot
What should be done here? How to disable the timeout if there's a way?
When following an article entitled, "Debugging React apps created with Create React App in WebStorm", the Debugger says it's connected to the JetBrains IDE Chrome Extension, but I can't get breakpoints to execute when using port 3000 and when I try to use the default debug port 63342 a 404 error is shown.
Here is a recording of my settings in Chrome and Webstorm 2016.2 IDE when trying to debug: http://recordit.co/MQ3LICuUIc
Steps Taken:
I've created a new JS debug configuration with the name 'ERS React Debug', the browser set to Chrome, and I've tried using the following URLs in the configuration:
http://localhost:3000/
http://localhost:3000/ers_react/public/index.html
http://localhost:63342/ers_react/public/index.html
(YT video I watched used the debug port, which is what is in my recording)
I also setup the mapping to webpack:///src as recommend in the article.
Default ReactJS app created with create-react-app is designed to be hosted on webpack server started with react-scripts start, that builds the application and starts the server. You won't be able to open this application on the simple built-in webserver (localhost:63342).
To be able to debug modern React app, you need upgrading Webstorm to the most recent version - debugging will work out of the box. Fot Webstorm 2016.2, you can try specifying URL mappings... For "react-scripts": "1.0.17", it should be http://localhost:3000/static/js/full/path to project, like http://localhost:3000/static/js/C:/WebstormProjects/untitled if the project path is C:/WebstormProjects/untitled should work:
Note that you would need to refresh the browser page to get breakpoints in code executed on pagfe loading hit
I started a Win10 Azure VM with VS 2015 and launched my MVC app using IIS. The js scripts appear to resolve; the paths generated by the bundles all appear legit, but the code isn't visible from the F12 dev tools and I get "'$' is undefined" on my first in-page jQuery call, meaning the jQuery reference, among others, didn't resolve. The browser (Edge, IE, ...) has javascript enabled. Is there some Windows settings that's blocking the resolution of these scripts?
Edit 1
The bundles load correctly if running in IIS Express. I need this to run in IIS though. In order to get MS Account integration I have to have a hosts entry to spoof my site as a www...com address. I tried to get that to work in IIS Express before and had no luck.
Turns out the pre-packaged installation of IIS didn't have "Static Content" enabled.
My Meteor-based app no longer works as designed on iOS, without me having changed anything relevant. The app still works when run from a local server (http://localhost:3000) as well as when hosted at meteor.com. But, in an iOS simulator and when deployed to an iOS device through xCode, the app fails to run properly.
The app opens with a form that needs to be filled in by the user. When submitting the form, on iOS, the entered values briefly are stored in session variables, but almost immediately the session variables are emptied and the form is displayed again. (What should happen is for an external JSON file to be loaded, based on the form values, after which the contents of that JSON file is manipulated and displayed.)
I just now upgraded to the latest version of Meteor, and xCode did an upgrade itself in the background.
The app is supposed to load a Google font file (from fonts.googleapis.com), but though this works fine when the app is served from either the localhost or meteor, the font does not appear to be loaded when the app runs on iOS.
I'm sorry I don't have actual example code (the whole app?) or a running version of the app that I can show you. As the app is not yet publicly available, I'm a bit reluctant to publish it here. :(
Is there a way to meaningfully debug a Meteor app running on iOS? Is there something obvious I'm missing in the deployment?
Turns out there's an issue with meteor 1.0.4 and building a project using Cordova (https://github.com/meteor/meteor/issues/3814).
I downgraded to meteor 1.0.3 through:
meteor update --release 1.0.3
Then, I deleted the Cordova folder in .meteor/local/ with
rm -R cordova-build
Then, I patched 1.0.3 to 1.0.3.2 with
meteor update --patch
This solved the problem.