How to handle file uploads between DEV and PROD?

Deployments
1

Having an interesting challenge regarding uploaded images.

Here’s a public facing page configured through my app: Comment on Roslindale Square Small Area Plan

Note the logo at the top of the page and the favicon. Those are configured w/in the app.

However, when I redeploy my app they’re lost. I think this is because they are saved to some public storage folder and the link is saved to the database. But that database is shared between DEV and PROD so the DEV location for the file isn’t relevant to the PROD location.

How do people handle this? Store the image as a binary in the database?

1 Like
2

I’m not sure I understand you.

You should have the images, as you say, in some public folder, where the static resources were.

Your application must manage the base_url as a variable, which will make the path to your image agnostic to the domain/url/environment of your app.

Different frameworks manage this in one way or another.

In the database you could have relative paths to the images, but it is rare that you need the binary in the DB, not for the case you mention.

Look in DevTools at the path of the images that do not load, what http error they give, 404 probably if there is not a more serious error.

With that information I think Assistant will solve it for you, if not, we will talk here :slight_smile:

2 Likes
3

Thanks for the response. Should I expect files uploaded to Dev and stored in a Public folder to also be available in Prod at the same relative address?

4

@JHM yep, images saved to the public folder will be served on both dev and prod.

5

image

for example, in a Flask application, by default, a root folder named “static” will be use as “public folder”, I attached an image.

In React, the default folder is literally the “public” folder Using the Public Folder | Create React App

6

I’m running into a similar issue and it’s super frustrating.

Just trying to get a basic website working so I can test the platform. It looks great in preview. When I go to deploy it, the images don’t work and I get an error message ‘the image cannot be displayed because it contains errors’.

I am sure I could resolve it if I could just copy the images between dev and production, but don’t seem to be able to do that.

The agent has tried dozens of times and doesn’t seem to have any idea what the issue is.

Any ideas anyone?

7

dev → prod takes a container snapshot and runs the same commands to get it running so that should work. You have to hit redeploy any time you make a change in dev to reflect it in prod.

Can you put some screenshots of the image issue you’re talking about? I’ve never encountered that before, if they’re just files they should be served correctly if they work in dev

1 Like
8

Thanks for the quick reply.

This is the site on preview:

This is the deployed site:

If you right-click on the logo, you’ll see the error message.

9

it looks like you’re doing a static deployment but you have a client/server app so youre not running the server on deployment, you have to do either an autoscale or a reserved vm deployment

10

Will try autoscale. What is my run command supposed to be?

image
image1224×372 15.1 KB

11

probably npm run start

(check your package.json)

1 Like
12

It’s working!!! Thanks so much, Kody!

1 Like