Strange problem after compiling reactjs boilerplate - javascript

Upon first use of the create-react-app boilerplate everything seems to be fine. Prompted with the Edit src/app.js and save to reload, however, after making a change to app.js for example instead of edit src/app.js I change it to testing change; once I click save everything reloads console prints Compiling... Compiled Successfully! the browser automatically reloads the content on the page only to find it everything is blank like the default index.html and to add to my confusion further saving of any file within the project tree reloads the pages to the default Edit src/app.js and save to reload even though that string no longer exists inside of App.js.
TLDR:
Obtained create-react-app
create-react-app client
npm start
Page shows default
edits App.js changing the display text
Page stays white after console compiles saying compiled successfully!
Resaves file causing it to compile twice.
Once the second compile is done page goes back to default template not displaying new information
Chrome Browser Console
Console prints out nothing only telling me to get the react-devtools extension for chrome.
Terminal
Compiling...
Compiled successfully!

I had the same issue. Post change the screen was white and the console said [get the extension]. I reacreated the app boilerplate multiple times and reloaded the app multiple times.
Default App.js:
I would love to have a more scientific solution but this worked for me:
I opened the f12 in chrome at the white screen [console said the same stuff] and then reloaded the page. Then, my changes showed. I made changes and saved. Live updates [without refreshing browser manually] started working.
I closed the F12 tools and live updates continue to work.
My assumption here is that loading the page with the default F12 tools was enough to get this primed. I do not think it was a waiting thing as I left this overnight after cursing it and walking away. I wish I had a better answer but this worked for me.
Subsequent [nmp start]s did not require the tools activation to let the page work and show live updates. I hope this is duplicateable for others.
Loading the react tools extension now.

Related

Automatic back button functionality in UWP (JS) App

I have a UWP (JavaScript PWA template / VS 2017) that is meant for testing and development of a hosted application. There is not much fancy about it besides letting a developer or tester choose which application build it should navigate to. However, one thing annoys me and I cannot seem to fix it. In a previous incarnation of this UWP, anytime I opened it on Windows 10 and navigated to an app build, it would show a back button at the top that I could use to go back to the index.html for the UWP.
I have scoured the old code to see if I was missing something. I was thinking perhaps I had left out some code to enable the back button and handle when it is clicked. Something that might have looked like this:
// This is javaScript
const navigationManager = window.Windows.UI.Core.SystemNavigationManager.getForCurrentView();
navigationManager.appViewBackButtonVisibility = window.Windows.UI.Core.AppViewBackButtonVisibility.visible;
navigationManager.addEventListener("backrequested", window.history.back, false);
However, there was no such code in the old version. I also checked the code for the hosted app and I didn't find anything like it either. Regardless, whenever I open the old solution for this UWP, I get a back button with all the expected functionality but without any code to handle it.
Is there some kind of declaration in the app manifest or .jsproj maybe? Something that tells the application at build time that we want a back button that works "out of the box"?
UPDATE
I recreated the UWP with a fresh template and did some tests on it. The template automatically sets the start page to https://example.com and on this site there is a link for https://www.iana.org, so I whitelisted that domain in the content URIs. Navigating to the link there works. I get a back button.
Next, I replaced the template code with my own code, pointed it to index.html as the start page, and set up the content URIs. When I try to navigate to anything, I do not get a back button. Even if I go to https://www.iana.org, I do not see a back button.
Last, I replaced the start page with https://example.com. When I click the link on that page for https://www.iana.org, I get a back button.
I also removed all JavaScript utilizing WinRT in order to check if something there might be messing with it, but it had no effect.
Additional Info
After having a look at the old version, a major difference I see is that the index.html for the app was actually hosted and in my version it is part of the app. Per recent comments on this question, it seems that the back button functionality only works for hosted content?
For security reasons, the PWA project requires the project to run in the https environment, or it can be run in localhost when debugging locally.
The PWA project in UWP is to package the existing PWA program. This requires that the PWA project is already in the https or localhost environment. You can view some requirements of the PWA project here
Thanks.

webpack : live reload force chrome reload even on breakpoints

My environement is Ionic, but the scope of this question relates more about webpack and the live reload functionality.
When using ionic serve
the livereload works as expected, my application refreshes in the browser everytime a source file changes.
Something that makes me waste time though, is everytime Chrome is stuck on a breakpoint (which happens very often as i use them a lot), the live reload won't work, so i must do the reload manually, or skip the breakpoints.
I understand it must be due to the fact that the script responsible for the reload is executed in the browser, so is locked by the breakpoint, and therefore unable to do its job.
So my question is : is there a different solution to make it so that a change in my file would force a reload of Chrome, no matter if it's stuck on a breakpoint or not. I guess the reload would have to come from a script that is executed in the console and not in the browser.
Thank in advance.

DevTools persistence not taking effect even with mapped file

I'm trying to write some javascript in a mapped file trough Workspaces in Chrome 64.
I had a hard time making Chrome use the local file instead but after a manual map it's already there. But even with the mapped file, I edited the file, hit refresh and the console keeps saying error in line N and when I click it, it takes me to the persisted version of the files and the line (and the whole function) where the error is now gone but the error is still there.
It's like Chrome is still running the old version. I usually have a similar issue in which I have to close the tab and re-open it since "the Disable cache (while DevTools is open)" or clicking Shift + CMD + R doesn't load the new version. And old version is persisting cache and Workspaces but I can't figure where is this old version sticking.
I looked into the Application tab but there isn't any Service Worker or any other place where the old file would seem to be kept in until the tab is closed.
This is an angular app running over SalesForce but I'm loading just an iframe in the browser so most of the rest of the app complexity if left out. This is just one single view of the app that works fine running like a single iframe, so I don't think it has anything to do SF, maybe Angular.

UwAmp server doesn't detect changes that've made in files

everyone!
I'm using UwAmp 3.1.0 for my php development but I had some troubles
with it.
It worked perfectly at the beginning and the server still works
perfectly now but whenever I made a change to a .js file or .php
file it doesn't reflect that change when I update the page in the
browser.
I went to the chrome dev tools and opened the source section to see if the file is exactly what I wanted but it shows the original version which I've amended a while ago. The links to all files are correct and they are in a subdirectory in www folder.
It's so frustrating as I can't see the changes in action. I checked
the syntax and everything is ok but it doesn't want to stop an
animation in jquery after I it was fully shown to the user.
Can you help me with this situation as I have no idea what's causing the problem here?
It should update the file instantly when I click refresh in the
browser but it doesn't and keeps loading the version of the files
that I started to work with.
Uwamp is AMP stack (Apache, MySql and PHP) and "out-of-the-box" it doesn't have anything with caching of files.
Apache is normally reading/getting files from Uwmap www folder "as is" so basically if your last change is saved into file in www folder (please check directly with tools like notepad) Apache will read it instantly.
This is related to your Browser Cache (Empty yours Browser/Chrome cache manually or install Chrome extension like [Clear Cache Extension]:https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en) and try to clear cache but completely ("from begining of time" like Chrome said).
Also a workaround is to click that Empty Cache icon every save before refreshing the page beacuse it will clear it almost instantly (depending on how long time ago have you cleared your cache)
Also try to set OPCache in Php.ini (settings file) in Uwmap to Disabled (locate opcache settings in php.ini and put 0 to disable - you can access it from Uwamp GUI also).

Refreshing page after making changes doesn't render in web browser

I'm learning angular and have cloned the repository here. I've installed the dependcies through npm and have the web server running. I can load the page up at localhost:4000.
If I make a change to the index.html (a simple text change), I can see the results when refreshing my browser. But, if I make a change to an html page that's loaded as an angular directive, the changes don't appear in my browser (Chrome, FIrefox). I tried F5, Ctrl+F5, Shift+F5, etc. Even restarting the web server doesn't do anything.
Is there something I need to set up in the angular code so that refreshes work properly?
https://github.com/codeschool/WatchUsBuild-ReadingListAppWithAngularJS
Note, this is Angular 1x proj.
Should I blame caching
It's cached in your browser. Simply have your dev tools open and under networking tab mark disable cache.
Note:- this will work only if dev tools are open not otherwise.
I can recommend live-server which detect the changes and update make an reload in browser.
One more thing Angular it self use template cache by default so that can also cause the problem and in that case you need to rebuild your app on changes.
read about template cache
Yes that happens with angular because the browsers usually cache the webpages and when you make changes in html and then refresh, the browser loads the cached pages instead. It doesn't happen every time but most of the time. So try clearing the cache of the browser and then load the page. It should work correctly.
Angular 2 and ember has some mechanism called watches that look for changes you make in the files, and whenever it detects a change, it re compiles all files and load a fresh copy for you. But in Angular 1 I don't think there is such a mechanism and I faced this problem my self a lot. And this is the solution I have come across so far. Hope someone else has a better solution.

Categories