Problems with static app and LocalFileAdapter

[bertez]

Bug report

Describe the bug

I have a keystone app with a StaticApp configured to serve files located on the public folder on the root of my project:

new StaticApp({ path: '/public', src: 'public' })

and a LocalFileAdapter configured to store files on a subdirectory of the static app path:

const fileAdapter = new LocalFileAdapter({
  src: 'public/uploads',
  path: '/public/uploads'
});

This setup works fine on development mode but in production mode when the app is built the contents of the root public folder are copied to dist/public and thats the folder served by the keystone server... so when a file is uploaded using the admin UI it goes through the LocalFileAdapter to the public folder on the root of my project so I get a 404 when I try to access the file using the public path URL because the file does not exist in dist/public.

To Reproduce

Explained above.

System information

• OS: macOS and Linux
• Browser: any

[bertez]

I've checked the app-static package and it seems that this is the expected behaviour and not a bug:

keystone/packages/app-static/index.js

Line 26 in faa57f3

const folderToServe = dev ? this._src : getDistDir(this._src, distDir);

So my question is... what's the right way to config the LocalFileAdapter?

• Saving the files on a directory outside the static app src?
• Saving the files on the dist directory? (in this case I understand the files will be overwritten on the next build)

btw, I'm using docker and I need this folder to persist between docker restars so it must be mapped to a local volume

Thanks in advance!

[bertez]

Related issue: #1823

[Vultraz]

What happens if you use src with a relative path? Ie, src: './public/uploads'?

[bertez]

It's the same... I understand the behavior of the Static App is correct and I finally set up the local file adapter to save the files in a different folder and set up nginx in production to serve that folder as static content.

While in development I use express.static:

module.exports = {
  keystone,
  apps,
  configureExpress: app => {
    app.set('trust proxy', 1);
    isDev && app.use('/uploads', express.static('uploads'));
  }
};

Maybe there is a better way but for the time being this works for me.

[HostenMarijn]

Hey,

Does the file adapter throw weird error responses on your nginx server?

Mine goes like this when I try to upload an image (works fine on localhost/development):

And the image isn't uploaded to the webserver. File permissions are 755 across the board...

Thanks for any feedback