Deployed Vue App not displaying pdf file returned by an API
Budget: €30 – €250 EUR
Project overview
Our web app consists of a UI written in Vue and an API written in python with FastAPI.
The API stores and retrieves data from a MongoDB Atlas server.
Main features:
- User registration / login;
- Upload pdf documents (which gets stored on MongoDB);
- Select one pdf and display it in an embedded PDFViewer.
Deployment
The app built locally using docker-compose works as expected.
We have deployed the UI on AWS Amplify and the containerized API on AWS Beanstalk (Docker platform on Amazon Linux 2).
Open issue
The UI served by AWS Amplify is not able to display the pdf: the request is correctly sent and received by the API, but the response containing the pdf is not treated properly and no pdf is displayed.
The homepage of the UI gets displayed in the frame where the PDFViewer should be, as if the temporary URL of the pdf was not found (We use the Vue Router in history mode, and set a redirection rule in AWS Amplify.)
Known facts
- The UI is able to communicate with the API: the login works, and the list of available PDFs for the logged-in user is correctly retrieved from MongoDB and displayed;
- The deployed API works: it has been tested with Postman and the pdf is correctly retrieved (response with Content-Type application/pdf)
Project scope
Fix the issue so that the Vue UI (served by AWS Amplify) properly displays the pdf file returned by the API (deployed on AWS Beanstalk).
Our web app consists of a UI written in Vue and an API written in python with FastAPI.
The API stores and retrieves data from a MongoDB Atlas server.
Main features:
- User registration / login;
- Upload pdf documents (which gets stored on MongoDB);
- Select one pdf and display it in an embedded PDFViewer.
Deployment
The app built locally using docker-compose works as expected.
We have deployed the UI on AWS Amplify and the containerized API on AWS Beanstalk (Docker platform on Amazon Linux 2).
Open issue
The UI served by AWS Amplify is not able to display the pdf: the request is correctly sent and received by the API, but the response containing the pdf is not treated properly and no pdf is displayed.
The homepage of the UI gets displayed in the frame where the PDFViewer should be, as if the temporary URL of the pdf was not found (We use the Vue Router in history mode, and set a redirection rule in AWS Amplify.)
Known facts
- The UI is able to communicate with the API: the login works, and the list of available PDFs for the logged-in user is correctly retrieved from MongoDB and displayed;
- The deployed API works: it has been tested with Postman and the pdf is correctly retrieved (response with Content-Type application/pdf)
Project scope
Fix the issue so that the Vue UI (served by AWS Amplify) properly displays the pdf file returned by the API (deployed on AWS Beanstalk).