Get a list of files in a react web application - reactjs

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.

Related

How can i save a file on react folder from a url

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

How to list source files from within React app

I'm putting together a simple portfolio site in React, where each page is a rendered Markdown file (using ReactMarkdown). Each Markdown file is stored in src/pages/*.md
I'm trying to figure out how to list the contents of src/pages/ so that I can dynamically create a list of pages the user can visit, but I'm not really sure how to do this
I tried using the fs module, but got errors saying readdir() wasn't defined
Is fs the correct approach? Or is there a more appropriate way to list the files?
NOTE: The location of the files is arbitrary. If it's easier to read from public/ that's fine too

How to populate an array of the files in public/images folder in React?

So I have a React app with this structure
-MyApp
-public
--images
---Adam.png
---Jane.png
-src
--components
For one of my components I want to show all the images. Is there a way I can get array of the filenames in my public/images folder? I know how to map the array to a list of images but not sure how to get that array of file names in the first place.
This is natural question when doing this (because alternative is always importing those one by one which seems wrong) but react is in the end builded into some optimized static code. So whole issue is "what would happen if you added another image to that folder and refreshed page?". And answer is that it cannot react to it because that loop you are doing (one generating img tags or something else) is ran during build. What you need is server that "reads" those folders and lets you know what is there (to your already built app) and you can update state and that renders more elements during runtime in response to server.
In Webpack there is this other option (as mentioned by #UbeytDemir) that can understand what will be public folder and iterate those contents during build, but that still means you have to rebuild the app after each new image, because it simply cant do this during run time without server. It only unifies those imports into one line but imho it's important to understand why this is impossible to do in client's app.

global variables not work in React Native - Expo

Hi guys i try for create global variables with file .env but not works i use react native expo
i wrote process.env.API_URL but not found this variable. What i to do for works ?
I'm desesperated
I read https://www.npmjs.com/package/react-native-dotenv and https://docs.expo.io/guides/environment-variables/ but not works for me.
I need HELP !!!
https://docs.expo.io/guides/environment-variables/#the-app-manifest-env
If you have installed the expo-constants module in your managed
workflow project, you can access the app manifest's properties. One of
these properties is the .env property, a property that is only
available when running expo start. As the name suggests, it contains
some of your system-defined environment variables. For security
reasons, only the variables that starts with REACT_NATIVE_ or EXPO_
are available.
If you want the API url to be available it needs to be prefixed with REACT_NATIVE_ or EXPO_
Defined
REACT_NATIVE_API_URL=....
or
EXPO_API_URL=....
Accessed via
process.env.REACT_NATIVE_API_URL
or
process.env.EXPO_API_URL
Edit
If using the react-native-dotenv module
Usage
Add your env key-value pairs to your .env file
API_URL=....
Now import it in your .js file
import { API_URL } from 'react-native-dotenv';
I ran into so many issues getting environment variables to work. Oddly, the most highly recommended package was react-native-dotenv, and the first line of code in index.js is to require('fs'), which is a Node module that isn't available in React Native.
Anyways, I ended up creating a new context to handle Environment Variables. I don't have logic to automatically import variables based on environment, but that's as simple as commenting out one line.
Create a JSON file with your variables, import it into your context, and place it at the top of your app.js return, allowing everything in your app to consume it. From there, import it with useContext() as you would any other context, and you have access to all your variables.
Edit: After repeated issues, I decided to simply only use production variables for app testing. It's not ideal at all, but I'm sure many are in the same position as I'm in where the only real difference in variables is the route name for the API (local test server vs. production server). Unfortunately, both iOS and Android do not support http requests, or https requests with self-signed certificates without editing config files. Those config files are not available if you're using an Expo managed flow. Thus, my only choice was to simply do my testing on the production API. Luckily, I have good logs to go by, and the API itself is fairly mature and has endured plenty of testing via the web React app.
If anyone has a better solution, I'd love to hear it.

Can I have a multi-page React app without a Node.js server?

I want to develop a multi-page React app, where you have multiple HTML files instead of a single HTML with routes. However, so far all the solutions I found require a Node.js server.
After much struggle I eventually wrote a webpack config file to generate multiple HTML files myself, which generates multiple HTML files according to a certain file name pattern that I defined. The config file, however, is not something easy to maintain.
Then I wonder: isn't there a standard solution for that?
It is not a part of the pure React library, but quite a few frameworks that are based off React have a routing and html-generating solution for you.
Have a look at Gatsby, which is what I use for your exact scenario.
Each .js file inside src/pages will generate its own page in your Gatsby site. The path for those pages matches the file structure it’s found in.

Resources