CODEWITHSUNDEEP
node.jsreactjs
berkan
berkan

Reputation: 780

Read files from folder before start

I want to get an array of file names from my project public/logos folder. I am using create-react-app template and as you guess, I can not use const fs = require('fs') in browser after project start.

So, is there any way to fill an array right after npm start command and getting file names array from folder or am I out of context?

const fs = require('fs')
const path = require('path')
const appRoot = require('app-root-path').path

const getNames = () => {
    fs.readdir(path.join(appRoot, "public", "logos"), (err, files) => {
        return files
    })
}

Upvotes: 1

Views: 638

Answers (3)

keul
keul

Reputation: 7819

Although the Sathishkumar is correct, it's not the only way: having an application server just for reading static images can be too much in many situations.

What you can do is to handle this by change the webpack configuration (this requires you eject first so be really careful).

From webpack you have all of the Nodejs features available but you must make those changes static for the webapp.

An idea:

  • manually copy with html-copy-plugin every image in the dist folder
  • read every image file in that folder from node and generate a list of image names
  • put the list of images as a global variable in your bundle by using webpack DefinePlugin

Now you will be able to read images names from this new global.

Note: this will not be a dynamic read of resources in a folder. If add/remove images you will be forced to repeat the build process of the app.

Upvotes: 1

bpGusar
bpGusar

Reputation: 127

If you need to read the files from file system you need to start server, like express, and then read this files on the server by request from frontend or by the link you pasted in your browser address field.

Upvotes: 0

Sathishkumar
Sathishkumar

Reputation: 3763

Yes. It is out of context. Not possible in browser-based JS application. You can't access the file system using Javascript in the browser.

You can use a NodeJS(or any other language for the same) to create a REST API as you mentioned which will return the files list and then can consume it(APIs like fetch or package - axios) in the frontend. This is the preferred way of doing.

Upvotes: 0

Related Questions