Nextjs FE / Express BE grab file from server directory - express

I have a nextjs/react front end and a gql/express backend.
I've given users the ability to upload an avatar via graphql which then gets saved into a folder on the server ./uploads/avatars/${userId}.jpg
I want to be able to call this image from nextjs with something like https://***.com/uploads/avatars/${userId}.jpg
However nextjs will look for a page/folder called uploads and return a 404. How do I get around this ?
Thanks!

Related

Change backend base URL with osmdroid

I can't find a way how to change the backend URL with https://github.com/MKergall/osmbonuspack.
I am using https://github.com/Project-OSRM/osrm-backend for my backend.
Is it even possible?

Accessing the request object in nuxtJS module

I'm trying to create a nuxtJS module to make some changes to the routes based on the URL or request, i simply want to access the request.header.host inside a nuxtJS module but I'm unable to get it, i tried to check it process.server, this, context but unable to get the request object, i just want to get the full domain only, so how can I do that?
You can only get the hostname in the Browser JavaScript not internally in running nuxt app. As for nuxt app, it is running locally on the server (for example http://localhost:8080).
The information regarding hostname is present in services like Nginx/Apache.
Solution (One of them):
Use #nuxt/dotenv and store hostname in the environment variables:
hostname=example.com
then use wherever you want in your nuxt application with process.env.hostname

Nuxt Async Data - Server is Caching

Im using nuxt with asyncData() to make an axios request to an endpoint. In my build i'm using pre-rendered HTML pages.
I have a set of products on the API end-point and we've just remove most of the products, however they are still showing the full product list.
So I started up my dev server and hit the endpoint and I am seeing the correct updated API list from the endpoint.
So it seems my server is caching the API call. I'm not using a node server, just uploading my pre-rendered html to a server.
It's just I'm trying to isolate the problem and wanted to know if it is a configuration with nuxt.js that will allow me to not cache from the endpoint or is this a strictly a server issue that is causing the API data to be cached?
Or is there a config that I can use in the AXIOS request to always give me a fresh copy?
are you running nuxt with static site generation? in this case nuxt fetches all products from your API at the time it generates the static html. so the nuxt-server does not know anything about the updated api-data.
you could solve this by using a hook and re-building the page every time the api-data changes.
edit: you can find more info in the docs

DownLoad VichBundle file Api Platform

I'm using API platform with VichBundle to store file on the back side and React Native on the Front side.
I've followed the documentation of API platform and the upload part is working well, but I don't know how to download the document.
When I make a GET request I have the entity with the url of the file but I can't do a GET request with this url because there is no route to this file.
Can somebody give me an exemple of how to download file with api platform and Vichbundle.
Thanks
If you are following Api Platfom's documentation your files should be uploaded to your project's ./app/public/media/ folder and available making an HTTP GET request to http(s)://<yourdomain>/public/media/<filename>.<extension>. Just open the URL in your browser.
To get the exact url query yout API for me mediaObject information (for example, /api/media_objects/{id}) and check the contentUrl property.

Why does Create React App hosted on ZEIT Now not show a 404 response?

If I try mywebsite.com/NON-EXISTENT-PATH for my site on Google App Engine, I get a 404 response.
However using create-react-app's local development server for another app, if I try localhost:3000/NON-EXISTENT-PATH, it just gives me the response for localhost:3000, rather than a 404. This also applies to hosting the app on ZEIT Now. Why is this?
Create React App is auto-detected and a wildcard route is added so that any path that doesn’t match a static file will serve /index.html.
https://zeit.co/docs/v2/build-step#optimized-frameworks
This is necessary for frameworks that don't create HTML files for each page but instead create a single index.html file and use JavaScript to route on the frontend.
This pattern is typically called SPA.