Setting up proxy middleware to prevent proxy errors while running frontend in Docker

priya1712d commented 2 years ago

Summary of change

Related issue

Closes #912

Pull request checklist

Please keep this checklist in & ensure you have done the following:

[x] Read, understood and adhered to our contributing document.
- [x] Ensure that you were first assigned to a relevant issue before creating this pull request
- [x] Ensure code changes pass all tests
[x] Read, understood and adhered to our style guide. A lot of our code reviews are spent on ensuring compliance with our style guide, so it would save a lot of time if this was adhered to from the outset.
[x] Filled in the summary, context (if applicable) and related issue section. Replace the square brackets and its placeholder content with your contents. For an example, see any merged in pull request
[x] Set this pull request to 'draft' if you are still working on it
[x] Resolved any merge conflicts

For any of the optional checkboxes (e.g. the screenshots one), still check it if it does not apply.

priya1712d commented 2 years ago

Hi @knjk04 I am new to frontend technologies, could you help in resolving this yarn conflict.

knjk04 commented 2 years ago

Hi @priya1712d, I've resolved the merge conflict. I noticed your fork was far behind the main branch, so you may want to create an upstream remote branch and then fetch from it periodically to ensure your fork remains in sync with this repository (see https://project-books.github.io/docs/development/contributing/#syncing-your-fork)

priya1712d commented 2 years ago

@knjk04 So, this issue is more of a Docker issue than a frontend one. Dockerized react application is not able to connect to the backend application on 'localhost:8080' I can change the proxy in package.json but that will require a manual change while running the application locally.

Wdyt?

I can look for some generic solution but that might require keeping different docker env files for different environments.

knjk04 commented 2 years ago

@priya1712d Ah, I see. I'll merge this one and create a separate issue for that. Having separate environment files sounds good. One thing I was noticed was that the frontend can still hit the /login endpoint, just not any others

Thanks for your analysis on this!

DucNgn commented 2 years ago

Hi @knjk04 @priya1712d

I'm trying to set it up with Docker and Docker compose as in the README file. I'm still having the same issue that you described before with the latest on main.

The books are not displayed correctly and all the buttons are not functional:

Here are some of the logs:

book_project_backend | 2022-10-01 14:35:40.414  INFO 1 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring DispatcherServlet 'dispatcherServlet'
book_project_backend | 2022-10-01 14:35:40.415  INFO 1 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Initializing Servlet 'dispatcherServlet'
book_project_backend | 2022-10-01 14:35:40.417  INFO 1 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Completed initialization in 2 ms
book_project_frontend | Proxy error: Could not proxy request /api/shelf/books/to-read from localhost:3000 to http://backend:8080/.
book_project_frontend | See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).
book_project_frontend |
book_project_frontend | Proxy error: Could not proxy request /api/books from localhost:3000 to http://backend:8080/.
book_project_frontend | See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).
book_project_frontend |
book_project_frontend | Proxy error: Could not proxy request /api/shelf/books/did-not-finish from localhost:3000 to http://backend:8080/.
book_project_frontend | See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).
book_project_frontend |
book_project_frontend | Proxy error: Could not proxy request /api/shelf/books/reading from localhost:3000 to http://backend:8080/.
book_project_frontend | See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).
book_project_frontend |
book_project_backend | 2022-10-01 14:35:56.597  WARN 1 --- [nio-8080-exec-1] o.h.h.internal.ast.QueryTranslatorImpl   : HHH000104: firstResult/maxResults specified with collection fetch; applying in memory!

So I think it's an issue with Dockerized app like you mentioned. Could you provide a quick fix or maybe a workaround in the meantime for this issue?

Thank you!

Project-Books / book-project