Storing data in the React public folder - javascript

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

Related

How to run nextjs dev server with the config from another project?

I develop a nextjs application. Inside the root folder, I've made landing/pages/ folder and I want to run dev server with those pages using next dev ./landing. The point is to create a separate app using the same codebase, configs, etc.
Dev server runs properly, but most features don't work:
.env is not read from the root folder (the workaround is to use cp .env ./landing && next dev ./landing). but it's an ugly way to solve it
assets are read from public folder inside the /landing. But I'd like to use the public folder from the root.
I can't use components from folders that are "above" /landing folder in the project structure. The compiler throws an error You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
Is there any custom configuration to solve the problem? Maybe there is another way to have something like two "pages" folders in which there is the same source code, but thanks to it I could build two separate apps?
I've pushed my current code to the following repository:
https://github.com/michalgrzasko/nextjs-2-pages-example
Just run dev server using yarn dev. To reproduce errors:
Uncomment process.env.NEXT_PUBLIC_APP_BASE_URL in landing/pages/index.tsx
Uncomment <Nav /> component in the same file
.env is not runnable files, if you will load from "somewhere" - you don't need it.
You should focus on the next.config.js file.
Check this, maybe will help.
Anyway, you will need:
-API from your second source(from where you like to load config)
-Load config every time once you dev build your project.
-use process.env.your_name in your classes/functions

React: Is main.js basically the same as index.js?

I have been using the command npx create-react-app my-app to build a new React app environment. It creates a simple and generic app with the React logo. It generates folders such as public with index.html and src with your typical files such as App.css, App.js, and index.js, among others.
While studying the code for reverse engineering purposes I noticed that some projects have a file called main.js. I assume people are manually creating this file and input code similar to pre-populated index.js code (automatically created by npx create-react-app my-app). Essentially code for routing or calling components which gets rendered.
Are these two file names interchangeable or should they serve different purposes?
The file name for the JS file you use as your entry point is arbitrary. Your bundler’s (Webpack, Parcel, etc) configuration will determine which file it looks for.

React JS not precaching all files from public folder

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

How to setup structure with SpringBoot and Angular2?

I'm trying to use Angular2 with Springboot, but I can't set them together.
I first started a springboot project, and then tried to follow the Angular 2 Tour of Heroes by johnpapa and run npm install.
The structure looks like below:
I have the /app folder, and the .js are compiled to resources/static/app/js.
Problems:
1) The folder resources/static/node_modules/ has lots of files. So when running bootRun, it gets really slow and sometimes can't even refresh the files. I believe I shouldn't put the node_modules there, but not sure..
2) npm install puts the files in ./node_modules so currently I copied them to static folder. Should I just build the node_modules to static?
3) My structure looks hacky.. what is the best way to do it ?
How to set this structure? Also, please let me know if I should start using grunt/gulp or some other tool to make this easier.
Ps.: In case anyone is interested in the johnpapa's guide: johnpapa's angular2 guide
1) Remove node_modules from static folder. Your build process should bundle all the necessary modules. node_modules is used only during build.
2) Do not copy node_modules into static folder
3) Remove sources from static folder. That one is meant only for generated bundle + some static PROD files like index.html
Try really cool project builder Jhipster ;)
I shared on github a project that integrates Angular 2 with springboot. you can check here Angular 2 with spring boot

Meteor Not Excluding Node Modules in the Private Folder?

I'm adding my own grunt build setup to my meteor project and assumed from the docs that if I put it into the private folder, it would be left alone by iso-build. Alas this is not the case, and all manner of hell breaks loose.
I'd like to know why?
A simple solution is to put my assets folder outside the meteor folder, which I'm fine with.
NB : I'm not looking to debate the validity using grunt in this situation, I'm interesting in understanding how iso-build treats folders, and how, if possible, to implement some control over what it includes or ignores etc.
basically meteor doesn't ignore npm modules in the private directory, i've gone with the strategy of moving my grunt setup and assets outside of the meteor directory and have my assets moved by grunt into the public directory.

Categories

Resources