bastislack / highline-freestyle

Webapp for Highline Freestyle
GNU General Public License v3.0
10 stars 9 forks source link

Dockerize application #236

Closed Dosbodoke closed 1 year ago

Dosbodoke commented 1 year ago

Why

When trying to set up the development environment I got the following error on running npm install

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-pwa-install@1.0.12
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!   peer react@"^16.8.0 || ^17.0.0" from @lingui/react@3.13.2
npm ERR!   node_modules/@lingui/react
npm ERR!     @lingui/react@"^3.13.2" from the root project
npm ERR!     peer @lingui/react@"^3.13.0" from @lingui/macro@3.13.2
npm ERR!     node_modules/@lingui/macro
npm ERR!       dev @lingui/macro@"^3.13.2" from the root project
npm ERR!   32 more (@material-ui/core, @material-ui/styles, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.x" from react-pwa-install@1.0.12
npm ERR! node_modules/react-pwa-install
npm ERR!   react-pwa-install@"^1.0.12" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR!   peer react@"16.x" from react-pwa-install@1.0.12
npm ERR!   node_modules/react-pwa-install
npm ERR!     react-pwa-install@"^1.0.12" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/bodok/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/bodok/.npm/_logs/2023-03-07T23_58_08_525Z-debug-0.log

After I ran npm install --legacy-peer-deps I was able to open the application locally but this is not a good approach since it can lead to an incorrect (and potentially broken) dependency resolution.

What can we do to solve this

Docker Container is a perfect fit for open-source projects and it should be easy to implement on this project. For that, we need to.:

Optionally we can Go further and set up a dev container

A Development Container (or Dev Container for short) allows you to use a container as a full-featured development environment. It can be used to run an application, to separate tools, libraries, or runtimes needed for working with a codebase, and to aid in continuous integration and testing.

See more here

JulianDietzel commented 1 year ago

I had the same problem and also solved it using the --legacy-peer-deps flag. So you are not alone with this issue.

I don't think that dockerizing the app should or even would be the solution to this though. Rather the focus should be on fixing the dependencies (#219). If we put the whole app in a docker container and change nothing else, the problem would still persist. The only thing that would change is that the npm install --legacy-peer-deps command could be run by default which, as you have also pointed out, is not a good approach.

I'm not saying that having a docker container is necessarily a bad idea. I don't think that it should be the solution to this particular problem though.

But my experience with web development is limited, so feel free to correct me.

weberax commented 1 year ago

Thanks both for your input! I updated the instructions in the README to include @JulianDietzel suggestion (9df1948).

And I would also agree that I don't see the docker container as completely necessary.

But here is a command to run the development server through docker:

docker run -it --name highline-freestyle --mount type=bind,source="$(pwd)",target=/app -w /app --publish 8080:8080 node:18 sh -c "npm install --legacy-peer-deps && npm run dev"

Although I did not manage to get the port binding to work on my computer, this in theory should work....