How to properly run Docker containers and YARN server with WSL 2 in Windows 10? - docker

Question

The question may be poorly formed, but let me explain.
Initial setup
I had my web-dev Laravel project in C:\dev\gitlab.our-company.com\laravel-backend with a Vue app in .\public\vue-frontend.
I use Docker (using WSL 2 based engine) with the following commands:
// First time
export AUTH_TOKEN='glpat-XXX'
export COMPOSER_AUTH='{"http-basic":{"gitlab.our-company.com": {"username": "oauth2", "password": "${AUTH_TOKEN}"}}}'
docker build -f deployment/app.Dockerfile --build-arg COMPOSER_AUTH -t laravel_backend_app .
docker build -f deployment/web.Dockerfile --build-arg AUTH_TOKEN -t laravel_backend_web .
// Always
docker-compose -f deployment/docker-compose.yml -f deployment/docker-compose.override.yml -p laravel_backend up
Then I open container's bash with
docker-compose -f deployment/docker-compose.yml -f deployment/docker-compose.override.yml -p laravel_backend exec app bash
which in turn allows me to run php artisan test.
I can also run
yarn --cwd ./public/vue-frontend/ install && yarn --cwd ./public/vue-frontend/ serve
to serve the frontend.
Why I made changes
Running php artisan test or vendor/bin/grumphp run in container's bash was ridiculously slow (x10).
Current setup
$ wsl docker --version
Docker version 20.10.12, build e91ed57
Using Ubuntu for Windows with explorer.exe . I copied entire C:\dev to (Ubuntu)~/dev
I rebuilt Docker containers and up-ed them, executed app bash and tried php artisan test. It is now lightning fast.
Question 1
I can do the procedure in the last paragraph in 2 ways.
I can open VS Code integrated terminal in //wsl$/Ubuntu/home/{USER}/dev/gitlab.our-company.com/laravel-backend and do the above procedure directly there, or
as an extra step, when in terminal, I can execute wsl command and my location becomes ~/dev/gitlab.our-company.com/laravel-backend before continuing with said procedure.
In both cases, I get my php artisan test improvement speed.
Which is correct, or for some reason better?
Problem
I had issues with yarn, so in Ubuntu for Windows I installed nvm and then with it nodejs, npm, yarn.
Yarn is installed in both cases, thought a tad different version.
//wsl$/Ubuntu/home/{USER}/dev/gitlab.our-company.com/laravel-backend (205-issue-title)
$ yarn --version
1.22.17
$ wsl
{USER}#DESKTOP-NAME:~/dev/gitlab.our-company.com/laravel-backend$ yarn --version
1.22.15
Now the problem is serving the app.
//wsl$/Ubuntu/home/{USER}/dev/gitlab.our-company.com/laravel-backend (205-issue-title)
$ yarn --cwd ./public/vue-frontend/ install && yarn --cwd ./public/vue-frontend/ serve
yarn install v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
[-/3] ⡀ waiting...
[2/3] ⡀ ejs
error \\wsl$\Ubuntu\home\{USER}\dev\gitlab.our-company.com/laravel-backend\public\vue-frontend\node_modules\yorkie: Command failed.
Exit code: 1
Command: node bin/install.js
Arguments:
Directory: \\wsl$\Ubuntu\home\{USER}\dev\gitlab.our-company.com/laravel-backend\public\vue-frontend\node_modules\yorkie
Output:
'\\wsl$\Ubuntu\home\{USER}\dev\gitlab.our-company.com/laravel-backend\public\vue-frontend\node_modules\yorkie'
CMD.EXE was started with the above path as the current directory.
UNC paths are not supported. Defaulting to Windows directory.
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module 'C:\Windows\bin\install.js'
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
or with wsl:
{USER}#DESKTOP-3OMP0G1:~/dev/gitlab.our-company.com/laravel-backend$ yarn --cwd ./public/vue-frontend/ install && yarn --cwd ./public/vue-frontend/ serve
yarn install v1.22.15
[1/4] Resolving packages...
[2/4] Fetching packages...
error An unexpected error occurred: "https://gitlab.our-company.com/api/v4/projects/{PROJECT_ID}/packages/npm/#our-company/case-messaging/-/#our-company/case-messaging-1.0.3.tgz: Request failed \"404 Not Found\"".
info If you think this is a bug, please open a bug report with the information provided in "/home/{USER}/dev/gitlab.our-company.com/laravel-backend/public/vue-frontend/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Answer 1

I now believe the second way ie. in wsl is the right way.
If anyone has a deeper, better or different explanation I will review it, and likely mark it as the accepted answer.
The problem I had with running yarn install in wsl is somewhat unrelated to the question and was caused by an NPM package that resides in Our Company's self hosted GitLab (as opposed to NPM public registry) and npm had no access to download the case-messaging package.
Solved it with
npm config set #our-company:registry https://gitlab.our-company.com/api/v4/projects/{PROJECT_ID}/packages/npm/
npm config set -- '//gitlab.our-company.com/api/v4/projects/{PROJECT_ID}/packages/npm/:_authToken' "${AUTH_TOKEN}"