mount frontend volume in docker, support hot-reload in docker

[eurolife]

Docker will now mount the volumes needed for developing the front end from within the container. Hot-reload is also working now (meaning the page automatically updates as changes are made). Because of this, it is no longer necessary to stop the front end from running inside the container and run it locally while developing. It's also no longer necessary to rebuild the container every time you need to see changes that have been made to the frontend app.

To test this, you will first need to rebuild the frontend container (just once) by running:

docker-compose build frontend

[chrisaballard]

After rebuilding the frontend container, I'm now getting the following error when running the container using docker-compose up frontend:

Recreating frontend ... done
Attaching to frontend
frontend      |
frontend      | > nextjs-tailwindcss-typescript-starter@0.1.0 dev
frontend      | > next dev -p 3001
frontend      |
frontend      | ready - started server on 0.0.0.0:3001, url: http://localhost:3001
frontend      | Error: Error loading shared library ld-linux-x86-64.so.2: No such file or directory (needed by /usr/app/node_modules/@next/swc-linux-x64-gnu/next-swc.linux-x64-gnu.node)
frontend      |     at Object.Module._extensions..node (node:internal/modules/cjs/loader:1183:18)
frontend      |     at Module.load (node:internal/modules/cjs/loader:981:32)
frontend      |     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
frontend      |     at Module.require (node:internal/modules/cjs/loader:1005:19)
frontend      |     at require (node:internal/modules/cjs/helpers:102:18)
frontend      |     at Object.<anonymous> (/usr/app/node_modules/next/dist/build/swc/index.js:29:20)
frontend      |     at Module._compile (node:internal/modules/cjs/loader:1101:14)
frontend      |     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
frontend      |     at Module.load (node:internal/modules/cjs/loader:981:32)
frontend      |     at Function.Module._load (node:internal/modules/cjs/loader:822:12) {
frontend      |   code: 'ERR_DLOPEN_FAILED'
frontend      | }
frontend      | error - Failed to load SWC binary, see more info here: https://nextjs.org/docs/messages/failed-loading-swc
frontend exited with code 1

[eurolife]

@chrisaballard I just pushed up a change that I hope fill fix that error. I added command: ash -c "npm install && npm run dev" back to the docker-compose.yml file. I had the same error as you some time ago and by adding npm install to the command had solved it, as a version of a package specific to the environment needed to be installed after I updated to the latest version of NextJS. When making this update to load the volumes, I had removed this line because I thought that it wasn't needed since 'npm install' was added to the new Dockerfile, so I'm actually not sure why this wouldn't have been installed when you rebuilt the container (some of Docker is still a mystery to me). So I hope that by adding that command back to the docker-compose.yml file, the error will be fixed.

[chrisaballard]

This works now, but I just thought I'd retest your original commit to double check it wasn't a problem with the way I had rebuilt the container. I noticed that the npm install command in the Dockerfile had been cached.

So, this time, I forced it to do a build without using the docker cache:

docker-compose stop frontend
docker-compose build --no-cache frontend
docker-compose up frontend

This then all worked ok, so can only think that it was an issue with how the npm install command was cached from the last time around!

So I think we are all good with your original changes, sorry for the confusion! :/

One last question:

I'm unsure whether the ENV PORT 3001 command in the Dockerfile is strictly necessary, because its just using the default nextjs port for dev. Unless nextjs is picking up this environment variable?

If you can double check that and undo your most recent commit, then I think we're good to go and will do one final retest!

[chrisaballard]

Also: yarn.lock is being picked up as a change by git after running the frontend. Should it be in the .gitignore file?

[eurolife]

Also: yarn.lock is being picked up as a change by git after running the frontend. Should it be in the .gitignore file?

No, it is needed - here is a good explanation: https://stackoverflow.com/questions/39990017/should-i-commit-the-yarn-lock-file-and-what-is-it-for

[eurolife]

I'm unsure whether the ENV PORT 3001 command in the Dockerfile is strictly necessary, because its just using the default nextjs port for dev. Unless nextjs is picking up this environment variable?

If you can double check that and undo your most recent commit, then I think we're good to go and will do one final retest!

I've removed it from the Dockerfile and it still seems to run fine so I guess it's not needed. Just pushed latest update with these removed.

[eurolife]

@chrisaballard as per our conversation, I have removed the unneeded lines of code referencing the port from the Dockerfile. I tested it and the project runs fine without them.