Search code examples
javascriptnode.jsreactjsexpressreact-tsx

How to place an image folder in a react app for production/development

I am working on a personal project and there are two things that keep bugging me. This project is written in React and I am using an express node app for backend. In my frontend, I can load and send images to the server and I am saving the files inside an upload file and the path is stored inside a mongo database.

After the build, the files look like this:

Files

As you can see, my uploads folder is inside the public folder. The public folder is the build of the react app. I just renamed it. The problem is, if I want to update the build, I have to save the uploads file in someplace else and than reintroduce it inside the new build(public) folder. And that sounds impractical to me. Is there a way around that? A best practice? That would be the first thing.

The second one is the path that I am using to link the image folder to the <img src=''/>. Right now, the path looks like this: http://localhost:5000/${ filePath }. And works just fine. But I don't think that in a production scenario I will be able to use this path.

The question is: Do I have to link the port as well? Something like: http://localhost:${PORT}/${ filePath } and the port is const PORT = process.env.PORT? Or is there a better practice? A way to get your own domain?

Hope I delivered all the info needed for an accurate answer. If not, I am waiting for feedback. Thanks!

Solution

  • "Best practice" would be uploading the files to static file server like S3 and storing a reference to they file key.

    But short of that, I believe Express lets you set multiple static file directories using

    app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

    so you could then keep your uploads directory outside your build folder.

    As for including port in your asset URIs, what I've done in the past was to use an environment variable called domain that specified the web address of the current environment (including protocol, domain, and port). This way your dev enviornment can use localhost, but if you decied to deploy your production app to the public, you can just set the environment to the domain name -- and could tell your express server to listen on the 80/443 ports.