Develop Reference

White screen on initial load when updating my progressive web app

I'm using create react app and recently added a service worker so as to make it a PWA. It was very easy and seemed to work great. However, now whenever I build a new version of my app I get the following error on the initial load of the website:
I believe the problem is that when I build my app the file names are randomly generated and don't match the old ones. The PWA is using the old index.html trying to fetch the old files which don't exist anymore.
What is the best way of fixing this?

It turns out that the js file is too large to be precached. There are two approaches to solving the problem:
split the bundle into smaller chunks (each <5mb)
eject from create react app and increase the maximumFileSizeToCacheInBytes
You can read more in this StackOverflow answer:
Create React App serviceworker is not including one of the generated files

How to run two different projects simultaneously in Angular 7

We are working as two teams on an application with two different work spaces. One work space is main project and another work space was getting exported as module to our private npm repository, From there we are getting that our module through our package.json. One problem we are facing every time is ,If we want to test the module with main app we are pushing to repo and getting it again and again. By this we are wasting so much time in development phase. Is there any way we can avoid this.

Look into using a mono repo. Mono repos were added in Angular 6 and enhanced in Angular 7 where your lib can be in the same project as the main app. You will need to run up a new Angular 7.
I read a good post about it on Reddit the other day but am at work and can't get to Reddit to link to the article. Have a browse of http://reddit.com/r/angular2
Found it: https://nezhar.com/blog/up-and-running-library-development-with-angular-7/

How can I modify a file in more than one project at the same time automatically?

I have a main project and some sub-projects that are similar to the main project.
The only one difference is the config file (that has some particular variables depending of the client which corresponds).
I have detected one bug in the main project so I would like to fix it in all sub-projects without copy and paste the file that I have changed manually because I have around 20-30 sub-projects.
I do not care about the language in which I would program because I have the same problem at Android projects or web development projects.
How can I modify a file in more than one project at the same time automatically?
Thanks in advance!

Should I create a single file app?

I have a website and I am creating an app for it using phonegap? So far I have have been updating my files and build the app every time I want to do a minor change.
My question: what is the downside to create a single html page with js (angular is) that will check the app version and download all pages needed?
Note the pages are to be cached for long time (month- year) if the version was not updated.
Thanks

There is no problem in doing that, in fact, is more safe in case that you have calls to APIs that you dont want to be visible to users, even some major apps do that in some cases.

How to load script files dynamically with react and gulp

I'm developing a gaming platform and I've chosen react as the technology on the frontend. Currently I'm building all the script files into one js file using gulp. That doesn't cause a problem, because there's only one game, but when the number of games increases, the browser will load a lot of useless code. So I'd like to have all the platform logic in a single file, and the script for each game would be built into separate files which would be loaded on the browser when they are needed. How could I reference a react class within a built and dynamically loaded file?
For example, game1 consists of 3 files, which are built into game1.js. The main file of those 3 contains a react class Game1. How would I reference that class? Normally if those were in the same bundle, I would write "var game = require('game1_main')".

If webpack is an option for you, you could use its codesplitting feature.