React JS not precaching all files from public folder - javascript

I'm currently learning PWA with React JS (create-react-app). I need to precache the files so it can be loaded when it's offline. But somehow all the files from public folder won't precaching so it's failed whenever I accessing my website offline.
all that status failed files was from public folder, while others like background3.jpg was imported from React src. I was told by my friend that it should be cached, but actually it didn't

As I understand it you can't modify service workers entirely freely in create-react-app without ejecting your app. Having said that there are dev libraries out there like react-app-rewired that allow to modify parts of the build process without ejecting. Currently facing a similar issue, this might help --
React (CRA) SW Cache "public" folder

Related

One of my js files is not being bundled in my production build (dist folder)

I am creating a Vue app (using Vite), and I like to have my .js functions in different files inside a scripts folder. I have started recently so for the time being I only have one .js file appart from the main.js that comes with Vue.
When I build the application to deploy it, it seems that this .js file is not included in the bundle, so the deployed app cannot use it's functions.
How could I make the npm run build command include this local .js file that I am using (and it works when running the app in localhost), so that the deployed app works as expected? Am I missing something in where local files should be put inside the project files tree?
I have checked other questions regarding this, and also the official documentation, but maybe due to my lack of experience with Vue I haven't found the answer or haven't understood it.

Github Page with NodeJS package as SubModule from sub-directory to sub-directory

Hi
I got this NodeJS application that exists in a sub-directory of a repository. I would like to make a simple interface and host it on Github Pages as a submodule.
The problem I'm having is how I would go about that. My package exists in a sub-directory of a separate repository while the page is in another in a sub-directory with the same name. Then there's the problem of running it.
Repository layout
## NodeJS package repository
Shazuli/Node-Packages/MyPackage1
## Page repository
Shazuli/Shazuli.github.io/MyPackage1
The actual page is up to me to design, my question is how I would create a submodule from a sub-directory to another sub-directory in a different repository and then use that code from the module on Github Pages. Running a NodeJS package on a website.
I could rewrite the program to function in a browser, but that would reduce the flexibility of it. I like to be able to run it in the console and spit out the result into my output file as before, and the Page would simply function as a graphic controller if I have access to a browser and Internet. Having it as a submodule makes it easier to work with in the long run if I made changes to the package repo and not the Page repo.

Storing data in the React public folder

Currently for demo purposes I have a total of 1GB worth of .mp4/pdf files in my React public folder. I reference these files via props (example: file={'/40246/${this.props.showPdf}'}, but eventually these files are going to become larger and I am looking at maybe 50-100GB of .mp4/pdf files in the public folder.
Is it okay to have such large files in the public folder, will compile time of my app take forever?
I have also researched about ejecting the react app and referencing the files from outside the React src folder, but do not want the hassle of managing or configuring webpacks when something goes wrong. Actually I tried it and my app immediately crashed after npm start
Any advice or specific documentation I should look into would be appreciated.
There isn't any process associated for public assets, it just copies the files over to the build folder. There won't be any impact on performance during the build process.
Demo: check both files(demo.mov), it just copied the file from public to build with the following command: yarn build prod

Deploy React/Webpack static directory on different server from index.html

I'd like to deploy a React app built with create-react-app within my company's CMS. I can't host assets on the CMS, just the script tag, css tag and root DIV. I've deployed the static assets to S3 and pointed my publicPath to AWS, but in my CSS the components are not rendered. I'm new to webpack configuration and unsure where to turn.
There are only two ways where to build assets for deploy:
build assets on local machine and deploy static files
deploy sources to server and perform assets building there
There are some differences. For example first way may require more data to transfer, and second way requires more complicated configuration on server. Server must have possibility to execute different tools including webpack and have enough place for node modules.

Problems with public directory when deploying Node.js app with Heroku

I've been working on an app which will feature a Timelinejs (open source js library) element on the client side. I copied the Timelinejs library into my public/javascripts/ directory of my app. Then I linked it in my html header. When I serve my app up locally everything works fine with the timeline. However, I noticed that when I deployed my app to Heroku it wasn't loading my timeline. Using chrome js console I discovered that it didn't find my files in the public/Javascripts/Timelinejs folder. Using the Heroku run bash command I discovered that none of my Timelinejs files were present in the file structure, although an empty Timelinejs directory was present. Is there any command or configuration I need to specify to get these files to my Heroku deployment?
Heroku has a readonly file system. The directory where you can write are ./tmp or ./log. You can't write inside the public folder.
That's because of how they manage their dynos and the way to scale them. If you want to store something, use the ./tmp or, recommended, a s3 bucket. (as I presume 'tmp' stands for 'temporary' :D)
More info here: https://devcenter.heroku.com/articles/read-only-filesystem

Categories

Resources