Hello guys i need to download files from my database or my Onedrive and save them into react, this files is for my 3d models and the types is obj and mtl. For can i load dinamyc objects from database i need this feature, how can i do this ? I'm using three.js in this project.
Today the project is loading the files stored in project but i like to find a away to pick this from a database or a storage provider.
I tried to do using fetch or something like else but i can't find a away to do this correctly. I don't now if three.js supports url files i try to find but i don't see anything can help me.
Unless three.js provides a feature to take input from memory (in which case you can simply download the file into memory and pass it to three.js), doing this solely from a react app isn't possible. You will need to host your website on a server to have dynamic access to the public directory serving the react website.
Standalone react builds have static assets and can't be updated without creating another build
Related
I have a directory full of text files that I need to read in my react web app
-resources
|-file1.txt
|-file2.txt
|-file3.txt
I would like to store this resources directory somewhere in the app such that the contents of resources can be listed, and individual files can be iterated over on a line-by-line basis.
currently, I'm stuck on listing the files. I'm storing them like this
-node_modules
-public
|-resources
||-file1.txt
||-...
-src
But I really don't care where the resources directory is located. I tried using list-react-files based on this, but got Module not found: Error: Can't resolve 'fs'.
for further context, I was thinking the code to scan for files would be in in App.js, such that the scanned files could be used to populate certain components.
import React from "react"
import './App.css';
...
function App() {
//searching for files
var files = [...];
return(
//create components which can list and work with the files
...
);
}
export default App;
So, to summarize the question, how can I list files in reactJS?
p.s.:
this project was made with create-react-app
part of the point is that it should be easy to add new files to this directory, but I see no reason this process has to be "dynamic"
When people are using your react page, it is "running" on their computer and the software does not have access to all the files and data you'd like to use.
You will need to do this at "build time" when your service is being packaged up, or "on the server".
When you are building your react app, you can hook into processes that can find files and perform operations on them. Gatsby might be your best bet. Look at how people add "markup" files to their projects, built a menu from them and then render them as blog articles. NextJS, Vite, and other frameworks and tools will work, you may just need to learn a bit more.
The other approach, to do this "on the server" means when you are running code on the server you can do almost anything you like. So, your react app would make a call (e.g. rest request) to the server (e.g. NodeJS), and the code running on the server can use fs and other APIs to accomplish what you'd like.
From what you describe, doing this as part of your build step is probably the best route. A much easier route is to move this data into a JSON file and/or a database and not crawl the file system.
Looks like its a client side rendering app and not server side (node app). Resources folder you trying to list is residing in server and react app (javascript) running on browser can't access it directly.
To whom it may concern, I spent more time than I should have working on this. I highly recommend converting everything to JSON files and importing them. If you want to be able to scan for JSON files, make a JSON file that includes the names of all your files, then import that and use that for scanning. Doing things dynamically is a bare.
If you don't reformat, you'll likely need to use Fetch, which is asynchronous, which opens up a whole can of worms if you're using a framework like React.
If you're just importing json files, it's super easy:
import files from './resources/index.json';
where index.json looks like
{
"files":[
"file1.json",
"file2.json"
]
}
if you need to import the files more dynamically (not at the very beginning) you can use this:
var data = require('./resources/'+filename)
this will allow you to scan through your files using the index.json file, and load them dynamically as needed.
I'm trying to make a quiz application with flutter.
I made a sample_quiz.db with DB Browser for SQLite.
I want to save my database that is in my local disk(C) inside a flutter app.
I am never able to find the path.
(I installed both path_provider and path dependencies)
What I found is only for making a new database with CRUD in class DB_helper.dart.
But the CRUD isn't helpful because I don't need to Create or Delete data with phone.
I want to save my own data inside the app so that every person who downloads my quiz app can see the same data.
I thought it might be somewhere in lib or a new dart file.
I try to find where getApplicationDocumentsDirectory(), but there is only the path inside an emulator.
Is there no way to save the database inside the code file?
How to upload, save and read my data in flutter app/ not emulator?
Please help me, Thank you.
create a folder inside your flutter project for example assets
copy your database inside this folder
and in your pubspec.yaml file
assets:
- assets/sample_quiz.db
and now you have access to your database
You can pack the database into an extra "assets" folder (on the same level as directory) and access it through your code (means parsing the data).
I made the shift from Vue over to React and I enjoy using the CRA tool to make interfaces on SharePoint. My normal methodology involves building the app and linking the build index.html file to a SharePoint Content Editor Web Part (CEWP).
I recently needed to have two CRA builds on the same page and I am running into the issue where control of the DOM by one build overwrites the content of the other build on the page.
It is now my understanding that multiple CRAs cannot exist on the same page. I do not want to eject my apps. In my research, it seems that webpack is assigning this["jsonpFunction...] to both apps. One suggestion I read involved finding and replacing all instances of this in one of the apps and changing it to "window.jsonpFunction...". I could not get that working either.
I want to continue using CRA and linking the index.html of the builds to different web parts on the same page.
Any suggestions appreciated.
Very Respectfully,
I solved my SharePoint on-premise issue with multiple React builds working in separate web parts by doing the following.
In package.json ensure the "name" field is unique. Also, ensure you have a "homepage" variable set to the location you intend to copy the build index.html file.
In index.js set the document.getElementById to a unique name not used by other React projects that will exist on the same page.
In index.html make sure the name used for the root div is identical to the one used in step 2 above.
In the manifest.json, provide a short name and name for your App. This step doesn't seem mandatory but I did it for consistency in my projects.
Now you can build and copy to SharePoint. I use Content Editor web parts with each pointing to the applicable index.html file for the app. Works great!
Use case
I'm building an app that has support for translations. The way I imagined it is that the app will come with English by default and will be sent around to different places. When it arrives in Germany (for example) a user will add German as a translation and then send it to France. The French user will be able to see both the original language (engligh) and German.
Background
The app is a React web app wrapped in Electron.
For the use case I implemented the localStorage API to store content changes and switch between different translations.
Problems
After building the app as a portable exe and testing it I started noticing that the content doesn't carry over to a new PC.
It seems like the data is stored on the system or something else is happening (like localStorage gets wiped when moving the portable exe to another machine).
In my view, because I'm using localStorage and Electron bundles the Chromium browser with the web app I was expecting localStorage to be saved within the portable app.
Would love to hear your opinion on this
Thanks a million.
The localStorage is not saved to your app's binary files but rather to a file on your account's part of your PC's file system.
On Linux, for example, Electron creates a directory for your app in ~/.config and stores your localStorage data there. I imagine that you might find a directory for your application in %APPDATA% (C:\Users\YourUsername\AppData\Roaming\ or similar) on Windows.
What you could try is to write your data to a file in your app's resources bundle which would be preserved while re-distributing, but that's another question and answer.
I am having an issue where my grunt build file is building correctly, but the website I'm working on is not getting all of the css files. It is only getting the master.css file. I'm using nodejs, with kraken, on top of express. I can't tell if there is some configuration option I need to change, I don't really know where I would do that.
For anyone interested, the issue was with the changing structure of the project. Going from angular to a dustjs w/ backbone combo changes the project form a SPA structure to a multi-page structure. This makes a huge difference because now instead of sending everything at once we are sending pages as they are needed, this also means that when a user switches to a different view, the server will be building an html version of that view and sending it back as fully fleshed out html. When the server builds the page it has access to the file structure, which means that the build folder that was necessary for the angular project, is no longer necessary.