My react app can not access to a generated image inside build publish directory

Support
1

Hi everyone,

On my localhost react app, I’m generating an image in /public/ folder to let users be able to see it with a simple <img alt="Logos" src="logos.png" />.

But when Netlify build my app and since I’ve specified /build/ as publish directory, I can not see the generated image on the page.

So understanding this, I’ve changed my writeFile lambda function to generate the image right inside build directory. But It is not working neither.

Could someone help me with this issue please ?

Thank you very much.
Sourouche.

2

Hi, @Sourouche. The deployed lambda function doesn’t have access to the deployed site’s filesystem.

Are you invoking the lambda as a locally run node script during the site build or are you calling the function remotely? If you are calling it remotely, again, it cannot write to the build system’s filesystem directly nor can it write to the deployed site’s filesystem.

Would you please link us to a specific deploy log where the write should be occurring and explain more about how the lambda function is being called?

3

Hey @luke, how are you doing ?
Thank you so much to respond me so fast, you make my day a good one.

Well, I can not share with you a deploy log because the image generation doesn’t happen on the build process but when a user click on a specific button.

So I think it is what you called “remotely” that I call my lambda function. I followed this tutorial to create my function : Solve CORS once and for all with Netlify Dev | DigitalOcean.
So do you think there is an other alternative for me than creating an entire node.js server to deal with this issue ?

Thank you again Luke.

4

i wonder if it would be helpful to download the generated site :thinking:

5

Sorry @perry ? I don’t get it. What do you mean by downloading the generated site ?
I was talking about a generated image.

6

Hi, @Sourouche, thank you for explaining about the function. The function isn’t running on the same system where the deployed site exists.

The function is writing to the local filesystem of the AWS Lambda instance where it is running. This local filesystem updates does not update the files for the deployed site at Netlify.

So do you think there is an other alternative for me than creating an entire node.js server to deal with this issue ?

It might be possible to stream the resulting file to the client javascript and then update the DOM to show the image by embedding the image as base64 encoded data with something like this:

If there are other questions about this, please let us know.

7

@perry this person seems to have the same issue as me. Can we PLEAAASE get some documentation on this issue. It is not clear at all in the docs that you cannot access files in a lambda function and then how to solve this is not clear anywhere else either

8

Well guys, here is the final answer I bring to my initial question.

First @luke , I could not use dataUri because I haven’t tell you what was the true purpose of this generated image. I was trying to give the user the ability to download the image and not only to see it.

So, during the night, the solution came by itself. I had two possibilities : to transfer all my stuff on a AWS server to get file writing works or to pre-generate all the possible combinations of the generated image. I had 17 svgs and I wanted to generate an image with 2 of these svgs. So I had to pre-generate 289 png (17*17), put them in my assets folder, let webpack do his “manifest” work and use dynamic import to get them imported in my page, like this :
const imagePath = await import('../../assets/mergedLogos/${generatedLogo}'); this.setState({ imagePath: imagePath.default });
(source : https://enmascript.com/articles/2018/10/12/the-power-of-dynamic-imports-in-javascript-and-react)
But, even with this solution, I had an “EONENT” error when my lambda function wants to upload this image on the LinkedIn server. It was unable to resolve the path in order to find the correct image in the assets folder.
So I had to copy/past the whole folder of generated images in the lambda function folder and import them with a simple ‘./’.
I think this is an ugly workaround but it is working and until I merge all my work on a AWS server, like we say in french : “Ca fait le taff !”

Thanks to everyone, community sharing is everything <3

1 Like
9

One way to avoid importing all those files is self-zipping your function like I did here: function-deploy-test/package.json at master · netlify/function-deploy-test · GitHub.

Also, if you want to generate an image, you can have your function access the original images via the url (https://some-site.netlify.app/path/to/svg) and create the image in the /tmp folder. Then in your function’s response do something like:

       {
        StatusCode: 200,
        Headers: headersDic,
        // return the image in Base64 encoding
        Body: Convert.ToBase64String(new-image-data),
        IsBase64Encoded: true
        }

So when you invoke your function, you get the new image as a response. Does that sound like it would work for you?

10

Hi everyone and Hi @Dennis, hope everybody doing well.

I feel like I’ve reinvented the wheel lol…
First, I need to tell you that the ‘/tmp’ writing and reading folder was a great workaround… Thank you very much to every single one of you for that.
BUT I’ve find a much better solution at last. Converting my base64 data to Buffer and send it directly to LinkedIn like that. In this way, no file writing and hosting, no possible conflict between each user image generation and no need to access a file that I’ve just created on the previous code line…
Thank you very much again and I hope speaking with you very soon.

1 Like