2

I have an image gallery application:

  • the frontend (Vue 2.6) will allow users to upload images along with some basic information
  • the backend (NodeJs) will create thumb images and will store them along with the original ones in an upload folder

I placed the upload folder under frontend's public folder. This is the file structure of the application:

/app
├── backend
│   └── ...
├── frontend
│   ├── public
│   │   └── images
│   │       └── upload
│   ├── src
│   ├── dist
...

As usual, on build, the files are copied, minified etc in the dist folder where nginx points. Everything is fine after build - the images are copied from the public folder and they are accessible in the frontend app. But the new images uploaded are not available because they are not located in the webserver's path. Also, if I place the upload folder under dist it will be deleted on the next build. I also tried workarounds involving symlinks but without success.

Is there a way to keep the upload folder outside the Vue build process and access them directly? Or any other workaround to my issue?

Valentin Vucea
  • 119
  • 2
  • 11
  • The workaround I ended up with was to move the upload folder outside Vue and then to create a deploy script that after building the frontend, will add a symlink in the dist folder pointing to the upload folder. Not exactly what I wanted but I can move forward. – Valentin Vucea Mar 15 '21 at 14:48

0 Answers0