Bug(frontend): when Dockerfile.prod is used, you can't connect to ft_transcendence

[Mel-louie]

I suppose it comes from the FortyTwo.vue component, but not really sure... So the problem is: When you launch ft_transcendence with Dockerfile.prod, you can connect to database and swagger. In frontend, you arrive on the LOGIN OR CREATE ACCOUNT button page. Everything is fine so far. But when you click on the button, you are not redirect to the profile page, and there is this error in the firefox browser console:

Uncaught (in promise)
Exception { name: "NS_ERROR_MALFORMED_URI", message: "", result: 2152398858, filename: "http://localhost:8000/assets/FortyTwo.964606ab.js", lineNumber: 1, columnNumber: 0, data: null, stack: "authenticate@http://localhost:8000/assets/FortyTwo.964606ab.js:1:312\nlogin@http://localhost:8000/assets/FortyTwo.964606ab.js:1:422\nT/<.default</<.default</<.default</<.default</n[0]@http://localhost:8000/assets/FortyTwo.964606ab.js:1:997\nsj/</<@http://localhost:8000/assets/index.efb34a30.js:4:45763\nDn@http://localhost:8000/assets/index.efb34a30.js:4:656\nLr@http://localhost:8000/assets/index.efb34a30.js:4:737\nLr@http://localhost:8000/assets/index.efb34a30.js:4:835\nr@http://localhost:8000/assets/index.efb34a30.js:4:45547\nEventListener.handleEvent*Fn@http://localhost:8000/assets/index.efb34a30.js:4:45008\naj@http://localhost:8000/assets/index.efb34a30.js:4:45214\nlj@http://localhost:8000/assets/index.efb34a30.js:4:45888\nE@http://localhost:8000/assets/index.efb34a30.js:4:25220\n$@http://localhost:8000/assets/index.efb34a30.js:4:24889\np@http://localhost:8000/assets/index.efb34a30.js:4:24294\nce@http://localhost:8000/assets/index.efb34a30.js:4:28739\nrun@http://localhost:8000/assets/index.efb34a30.js:1:5517\nN/R.update@http://localhost:8000/assets/index.efb34a30.js:4:29015\nN@http://localhost:8000/assets/index.efb34a30.js:4:29042\nM@http://localhost:8000/assets/index.efb34a30.js:4:27841\nT@http://localhost:8000/assets/index.efb34a30.js:4:27624\np@http://localhost:8000/assets/index.efb34a30.js:4:24324\nO@http://localhost:8000/assets/index.efb34a30.js:4:25858\nE@http://localhost:8000/assets/index.efb34a30.js:4:25091\n$@http://localhost:8000/assets/index.efb34a30.js:4:24889\np@http://localhost:8000/assets/index.efb34a30.js:4:24294\nce@http://localhost:8000/assets/index.efb34a30.js:4:28739\nrun@http://localhost:8000/assets/index.efb34a30.js:1:5517\nN/R.update@http://localhost:8000/assets/index.efb34a30.js:4:29015\nN@http://localhost:8000/assets/index.efb34a30.js:4:29042\nM@http://localhost:8000/assets/index.efb34a30.js:4:27841\nT@http://localhost:8000/assets/index.efb34a30.js:4:27624\np@http://localhost:8000/assets/index.efb34a30.js:4:24324\nO@http://localhost:8000/assets/index.efb34a30.js:4:25858\nE@http://localhost:8000/assets/index.efb34a30.js:4:25091\n$@http://localhost:8000/assets/index.efb34a30.js:4:24889\np@http://localhost:8000/assets/index.efb34a30.js:4:24294\nce@http://localhost:8000/assets/index.efb34a30.js:4:28739\nrun@http://localhost:8000/assets/index.efb34a30.js:1:5517\nN/R.update@http://localhost:8000/assets/index.efb34a30.js:4:29015\nN@http://localhost:8000/assets/index.efb34a30.js:4:29042\nM@http://localhost:8000/assets/index.efb34a30.js:4:27841\nT@http://localhost:8000/assets/index.efb34a30.js:4:27624\np@http://localhost:8000/assets/index.efb34a30.js:4:24324\nO@http://localhost:8000/assets/index.efb34a30.js:4:25858\nE@http://localhost:8000/assets/index.efb34a30.js:4:25091\n$@http://localhost:8000/assets/index.efb34a30.js:4:24889\np@http://localhost:8000/assets/index.efb34a30.js:4:24294\nce@http://localhost:8000/assets/index.efb34a30.js:4:28739\nrun@http://localhost:8000/assets/index.efb34a30.js:1:5517\nN/R.update@http://localhost:8000/assets/index.efb34a30.js:4:29015\nN@http://localhost:8000/assets/index.efb34a30.js:4:29042\nM@http://localhost:8000/assets/index.efb34a30.js:4:27841\nT@http://localhost:8000/assets/index.efb34a30.js:4:27624\np@http://localhost:8000/assets/index.efb34a30.js:4:24324\nO@http://localhost:8000/assets/index.efb34a30.js:4:25858\nP@http://localhost:8000/assets/index.efb34a30.js:4:27349\np@http://localhost:8000/assets/index.efb34a30.js:4:24251\nO@http://localhost:8000/assets/index.efb34a30.js:4:25858\nE@http://localhost:8000/assets/index.efb34a30.js:4:25091\n$@http://localhost:8000/assets/index.efb34a30.js:4:24889\np@http://localhost:8000/assets/index.efb34a30.js:4:24294\nce@http://localhost:8000/assets/index.efb34a30.js:4:28739\nrun@http://localhost:8000/assets/index.efb34a30.js:1:5517\nN/R.update@http://localhost:8000/assets/index.efb34a30.js:4:29015\nN@http://localhost:8000/assets/index.efb34a30.js:4:29042\nM@http://localhost:8000/assets/index.efb34a30.js:4:27841\nT@http://localhost:8000/assets/index.efb34a30.js:4:27624\np@http://localhost:8000/assets/index.efb34a30.js:4:24324\nce@http://localhost:8000/assets/index.efb34a30.js:4:28739\nrun@http://localhost:8000/assets/index.efb34a30.js:1:5517\nN/R.update@http://localhost:8000/assets/index.efb34a30.js:4:29015\nN@http://localhost:8000/assets/index.efb34a30.js:4:29042\nM@http://localhost:8000/assets/index.efb34a30.js:4:27841\nT@http://localhost:8000/assets/index.efb34a30.js:4:27624\np@http://localhost:8000/assets/index.efb34a30.js:4:24324\nce@http://localhost:8000/assets/index.efb34a30.js:4:28295\nrun@http://localhost:8000/assets/index.efb34a30.js:1:5517\nN/R.update@http://localhost:8000/assets/index.efb34a30.js:4:29015\nDn@http://localhost:8000/assets/index.efb34a30.js:4:664\nJI@http://localhost:8000/assets/index.efb34a30.js:4:2296\npromise callback*ZI@http://localhost:8000/assets/index.efb34a30.js:4:1604\nvp@http://localhost:8000/assets/index.efb34a30.js:4:1561\nN/R.effect<@http://localhost:8000/assets/index.efb34a30.js:4:28982\ndS@http://localhost:8000/assets/index.efb34a30.js:1:6834\nk1@http://localhost:8000/assets/index.efb34a30.js:1:6770\nUI@http://localhost:8000/assets/index.efb34a30.js:1:12188\nset value@http://localhost:8000/assets/index.efb34a30.js:1:12644\nsetup/<@http://localhost:8000/assets/index.efb34a30.js:4:11096\npromise callback*setup@http://localhost:8000/assets/index.efb34a30.js:4:11086\nDn@http://localhost:8000/assets/index.efb34a30.js:4:656\nVD@http://localhost:8000/assets/index.efb34a30.js:4:40350\njD@http://localhost:8000/assets/index.efb34a30.js:4:40133\nM@http://localhost:8000/assets/index.efb34a30.js:4:27739\nT@http://localhost:8000/assets/index.efb34a30.js:4:27624\np@http://localhost:8000/assets/index.efb34a30.js:4:24324\nce@http://localhost:8000/assets/index.efb34a30.js:4:28739\nrun@http://localhost:8000/assets/index.efb34a30.js:1:5517\nN/R.update@http://localhost:8000/assets/index.efb34a30.js:4:29015\nN@http://localhost:8000/assets/index.efb34a30.js:4:29042\n" }
[FortyTwo.964606ab.js:1](http://localhost:8000/assets/FortyTwo.964606ab.js)

Chrome browser console seems to provide more hints:

Uncaught (in promise) DOMException: Failed to set the 'href' property on 'Location': 'http://undefined:undefined/auth/callback' is not a valid URL.
    at Proxy.authenticate (http://localhost:8000/assets/FortyTwo.964606ab.js:1:308)
    at Proxy.login (http://localhost:8000/assets/FortyTwo.964606ab.js:1:422)
    at e.isTwoFAEnabled.a.onClick.n.<computed>.n.<computed> (http://localhost:8000/assets/FortyTwo.964606ab.js:1:997)
    at http://localhost:8000/assets/index.efb34a30.js:4:45763
    at Dn (http://localhost:8000/assets/index.efb34a30.js:4:656)
    at Lr (http://localhost:8000/assets/index.efb34a30.js:4:735)
    at Lr (http://localhost:8000/assets/index.efb34a30.js:4:835)
    at HTMLButtonElement.r (http://localhost:8000/assets/index.efb34a30.js:4:45547)

The error maybe comes from the window.location.href = `${config.backendURL}/auth/callback\; l.33, in `FortyTwo.vue.

I tried to remove node_modules's repo, and prune and remove volume from docker.

[Mel-louie]

Our config is empty. In frontend/src/config/index.ts, the const config doesn't get the backendURL.

• Vite statically replaces .env variables in prod mode. I quote: "It is therefore necessary to always reference them using the full static string. For example, dynamic access to keys like import.meta.env[key] will not work." https://vitejs.dev/guide/env-and-mode.html
  • So, we can't use Dockerfile.prod as it is currently used. And that's the cause of the errors in the first post here.

[Mel-louie]

• About the idea of using Dockerfile instead of Dockerfile.prod, if we disable hot-reload:

  • I made a branch where it is disabled mdesfont/hot-reload.
  • But, there is an error that appears: Firefox can’t establish a connection to the server at ws://localhost/. [@vite-plugin-checker-runtime:1328:13](http://localhost:8000/@vite-plugin-checker-runtime)

  I think the important part isvite-plugin-checker. It's a checker that check several plugin of vite. And it check vite-hot-module-reload. But since vite-hot-module-reload is not enabled, it triggers an error. I can't manage to prevent this error. I'm not sure we can have vite-plugin-checker without hot reload checks. In vite.config.ts, we have the possibility to comment:

  checker({
  vueTsc: true,
  }),

  and then, there is no error or hot reload. But I'm not sure it's a good idea. In fact, I don't really now. vite-plugin-checker seems to be a great plugin, but maybe not that important at this point.

[fyusuf-a]

• About the idea of using Dockerfile instead of Dockerfile.prod, if we disable hot-reload:

  • I made a branch where it is disabled mdesfont/hot-reload.

  • But, there is an error that appears: Firefox can’t establish a connection to the server at ws://localhost/. [@vite-plugin-checker-runtime:1328:13](http://localhost:8000/@vite-plugin-checker-runtime)

    I think the important part isvite-plugin-checker. It's a checker that check several plugin of vite. And it check vite-hot-module-reload. But since vite-hot-module-reload is not enabled, it triggers an error. I can't manage to prevent this error. I'm not sure we can have vite-plugin-checker without hot reload checks. In vite.config.ts, we have the possibility to comment:

checker({
    vueTsc: true,
}),

and then, there is no error or hot reload. But I'm not sure it's a good idea. In fact, I don't really now. vite-plugin-checker seems to be a great plugin, but maybe not that important at this point.

It is not a problem to comment the checker. There is by default no type checking when using vite, this is what this plugin does. If we merge a PR solving this issue at the very end (before the correction), it is not an issue.