Closed selfhoster1312 closed 11 months ago
Hi @selfhoster1312, I'm using nodejs v20.2.0
. And I get this output:
$ npm install
...
$ npm run build
> torrust-index-frontend@2.0.0 build
> vite build
vite v2.9.15 building for production...
transforming (96) node_modules/axios/lib/core/dispatchRequest.jsBrowserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
✓ 152 modules transformed.
dist/assets/fontawesome-webfont.674f50d2.7bfcab6d.eot 161.86 KiB
dist/assets/element-icons.535877f5.ab40a589.woff 27.54 KiB
dist/assets/fontawesome-webfont.af7ae505.2adefcbc.woff2 75.35 KiB
dist/assets/element-icons.732389de.a30f5b3b.ttf 54.64 KiB
dist/assets/fontawesome-webfont.fee66e71.ba0c59de.woff 95.73 KiB
dist/assets/fontawesome-webfont.b06871f2.aa58f33f.ttf 161.67 KiB
dist/assets/fontawesome-webfont.912ec66d.ad615792.svg 433.96 KiB
dist/index.html 0.67 KiB
dist/assets/index.16faea89.css 124.54 KiB / gzip: 22.33 KiB
dist/assets/index.95b2aba7.js 3165.91 KiB / gzip: 977.69 KiB
(!) Some chunks are larger than 500 KiB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
Can you paste all the steps here and your node version?, for example:
git clone git@github.com:torrust/torrust-index-frontend.git
cd torrust-index-frontend
git reset --hard v2.0.0
npm install
npm run build
Can you also try with the npm run dev
command?
You will also need to install the backend and also the tracker.
The documentation on https://torrust.com/ works only for the develop
branch because @WarmBeer is migrating to VUE3 and Nuxt (nuxt-3
branch). We will update the documentation before the new release once the migration/update is finished.
I also want to write a tutorial for the new documentation page to explain how to set up a dev environment. We are working on all those things right now.
Regarding IRC/XMPP channel, we only use GitHub for now. Not only issues but also discussions:
But I think It would be nice to create a Torrust server on Discord. Maybe after the new big release, we are preparing now.
Thanks for quick reply. My npm version is 9.2.0 (debian bookworm). I cloned from the repository, and i noticed it checked out the nuxt-3
branch. Here's npm install
:
$ npm install
> postinstall
> nuxt prepare
Nuxi 3.0.0 17:50:15
ℹ Using Tailwind CSS from ~/assets/css/tailwind.css nuxt:tailwindcss 17:50:17
✔ Types generated in .nuxt 17:50:18
up to date, audited 1003 packages in 6s
194 packages are looking for funding
run `npm fund` for details
4 high severity vulnerabilities
To address all issues, run:
npm audit fix
Run `npm audit` for details.
Here's npm run build
:
npm run dev
does produce a URL with which i can access the site (it works). But it's very heavy (111 requests, 1.9MB). After adding "no-console": "off",
to the rules of .eslintrc.js
, npm run build
builds successfully (with tons of warnings) but i don't have a dist folder produced.
I also want to write a tutorial for the new documentation page to explain how to set up a dev environment. We are working on all those things right now.
I'd be glad to help with documentation if i can get things running. Are you suggesting i use the develop branch at the moment ?
But I think It would be nice to create a Torrust server on Discord
May i suggest using a standard technology instead? Discord is very hostile to users and their privacy, and can close down at anytime because it's a for-profit business. IRC, XMPP and Matrix are standard protocols with many clients, can interoperate with one another, and don't depend on the goodwill of a corporation. I can suggest non-profit hosts for these networks if you like.
Hi @selfhoster1312
You are using the default branch nuxt-3
, which is not stable yet. I think @WarmBeer is still working on it. In fact, I do not know why it is the default branch. So I would suggest using develop
for now.
Anyway, I'm not that much into front-end stuff either, specially nuxt
. If you make it work, you can comment here. We will add it to the new documentation. We have not agreed yet where to put the new documentation; we are using the Rust documentation (doc.rs) for the backend. I was working on an embedded Rust static web server. If we do that, maybe we can put the documentation there too. But I think for this repo it makes sense to use a different format, maybe some markdown files in the docs. What do you think @da2ce7 @WarmBeer?
Regarding discord, I understand your reasons, and we will take them into consideration. For the time being, you can ask me via discord josecelano#9705, although I have not worked too much on this repo so far, and I'm not too much into frontend. But I would try to help you.
Hi @selfhoster1312, finally, I've had time today to recheck this issue. I think you can fix it by running:
npx update-browserslist-db@latest
At least, It worked for me with node v20.2.0
.
After executing the npm run generate
command it will create the .output
dir.
Hi @selfhoster1312, I've created a minimum installation guide for the new version:
https://github.com/torrust/torrust-index-frontend/blob/nuxt-3/docs/index.md
Can you check with the latest version? I've fixed most of the warnings. Now I can run the build npm run build
and preview the build using node .output/server/index.mjs
The output:
Thanks for working on this! Here's what i get so far:
$ npm run build
> build
> nuxt build
sh: 1: nuxt: not found
It's probably missing nuxt as a dependency. I'll try to install manually and update this comment.
EDIT: After npm install nuxt
i get:
$ npm run build
> build
> nuxt build
Nuxi 3.6.0 16:21:52
Nuxt 3.6.0 with Nitro 2.5.1 16:21:52
ℹ Using Tailwind CSS from ~/assets/css/tailwind.css nuxt:tailwindcss 16:21:54
ℹ Building client... 16:21:55
ℹ vite v4.3.9 building for production... 16:21:56
transforming (23) plugins/notifications.client.ts
🌼 daisyUI components 2.51.5 https://daisyui.com
✔ Including: base, components, 2 themes, utilities
❤ Support daisyUI: https://opencollective.com/daisyui
ℹ ✓ 43 modules transformed. 16:22:02
ℹ ✓ built in 6.06s 16:22:02
ERROR [vite-plugin-eslint] 16:22:02
/home/user/Prog/torrust/torrust-index-frontend/pages/torrent/[infoHash].vue
44:1 error torrust-index-types-lib import should occur before import of #app import/order
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the --fix option.
file: /home/user/Prog/torrust/torrust-index-frontend/pages/torrent/[infoHash].vue
ERROR 16:22:02
/home/user/Prog/torrust/torrust-index-frontend/pages/torrent/[infoHash].vue
44:1 error torrust-index-types-lib import should occur before import of #app import/order
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the --fix option.
pages/torrent/[infoHash].vue
44:1 error torrust-index-types-lib import should occur before import of #app import/order
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the --fix option.
at error (node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:2213:30)
at Object.error (node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:24706:20)
at Object.error (node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:23834:42)
at Object.transform (node_modules/vite-plugin-eslint/dist/index.js:1:2469)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async transform (node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:23811:16)
at async ModuleLoader.addModuleSource (node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:24011:30)
Here's the diff to get it to build:
diff --git a/composables/states.ts b/composables/states.ts
index e8f61c0..5763226 100644
--- a/composables/states.ts
+++ b/composables/states.ts
@@ -1,6 +1,6 @@
-import { useRuntimeConfig, useState } from "#app";
-import { PublicSettings, TorrentCategory, User, TorrentTag } from "torrust-index-types-lib";
import { Rest } from "torrust-index-api-lib";
+import { PublicSettings, TorrentCategory, User, TorrentTag } from "torrust-index-types-lib";
+import { useRuntimeConfig, useState } from "#app";
export const useRestApi = () => useState<Rest>("rest-api", () => new Rest(useRuntimeConfig().public.apiBase));
export const useCategories = () => useState<Array<TorrentCategory>>("categories", () => new Array<TorrentCategory>());
diff --git a/package-lock.json b/package-lock.json
index 745d0d2..b285234 100644
diff --git a/pages/torrent/[infoHash].vue b/pages/torrent/[infoHash].vue
index 2f82375..0d73433 100644
--- a/pages/torrent/[infoHash].vue
+++ b/pages/torrent/[infoHash].vue
@@ -40,8 +40,8 @@
<script setup lang="ts">
import { ChevronLeftIcon } from "@heroicons/vue/24/solid";
import { Ref } from "vue";
-import { useRoute, useRuntimeConfig } from "#app";
import { Torrent } from "torrust-index-types-lib";
+import { useRoute, useRuntimeConfig } from "#app";
import TorrentActionCard from "~/components/torrent/TorrentActionCard.vue";
import TorrentDescriptionTab from "~/components/torrent/TorrentDescriptionTab.vue";
import TorrentFilesTab from "~/components/torrent/TorrentFilesTab.vue";
Your new docs say:
If you run the backend as it is, you will see the following error in the browser console
I don't have this error, however i have other client-side errors:
TypeError: (intermediate value)(...) is undefined
NuxtJS 7
entry.5ad00eb8.js:1:13929
TypeError: (intermediate value)(...) is undefined
NuxtJS 45
entry.5ad00eb8.js:1:13929
Uncaught (in promise) TypeError: L is undefined
NuxtJS 13
torrents.ff3d9f38.js:1:13564
Also, i had to change the environment variable NITRO_PORT
because the index backend was already running on port 3000.
Now when i access the site:
TypeError: W(...) is undefined
NuxtJS 48
entry.5ad00eb8.js:1:13929
Hi @selfhoster1312
Regarding the diff, I made similar changes some hours ago. Could you let me know if you are using the latest commit?
Regarding the backend, you can execute it with the following:
TORRUST_IDX_BACK_CORS_PERMISSIVE=true cargo run
To avoid the problem with the CORS policy. This is also recent.
Regarding the port you can run the app with:
npm run dev
As you can see in the package.json:
"dev": "nuxt dev --port 3001"
It changes the port to 3001 to avoid the collision with the API. You can also change the API port in the config.toml file.
Regarding the sign-up form, I do not know why it's not working for you. I've added a workflow. Here, you can check the requirements.
And finally, regarding the torrent database, it is empty. Exactly, you have to upload new torrents. The index only shows information about the torrent you manage. It only imports statistics from the tracker for the torrents you have previously uploaded. It would be nice to have a prefill console command, for example, but we have the torrent info (metadata), which is not present in the tracker.
Regarding the diff, I made similar changes some hours ago. Could you let me know if you are using the latest commit?
My bad i was still running nuxt-3
branch and not develop
, because i see your new docs link was on the nuxt-3 branch... When trying develop branch no need to reorder imports indeed!
I still have some errors in browser console:
[vite] connecting... client.ts:18:8
[vite] connected. client.ts:133:14
<Suspense> is an experimental feature and its API will likely change. deps:1358:43
[Vue warn]: Unhandled error during execution of render function
at <Torrents onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<
Proxy { <target>: Proxy, <handler>: {…} }
> >
at <RouteProvider key="/torrents" routeProps=
Object { Component: {…}, route: {…} }
pageKey="/torrents" ... >
at <RouterView name=undefined route=undefined >
at <NuxtPage>
at <App key=3 >
at <NuxtRoot> deps:97:13
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
at <Torrents onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<
Proxy { <target>: Proxy, <handler>: {…} }
> >
at <RouteProvider key="/torrents" routeProps=
Object { Component: {…}, route: {…} }
pageKey="/torrents" ... >
at <RouterView name=undefined route=undefined >
at <NuxtPage>
at <App key=3 >
at <NuxtRoot> deps:97:13
Uncaught (in promise) TypeError: $setup.tags is undefined
NuxtJS 45
torrents.vue:20:13
[Vue warn]: Unhandled error during execution of render function
at <Torrents onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<
Proxy { <target>: Proxy, <handler>: {…} }
> >
at <RouteProvider key="/torrents" routeProps=
Object { Component: {…}, route: {…} }
pageKey="/torrents" ... >
at <RouterView name=undefined route=undefined >
at <NuxtPage>
at <App key=3 >
at <NuxtRoot> deps:97:13
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
at <Torrents onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<
Proxy { <target>: Proxy, <handler>: {…} }
> >
at <RouteProvider key="/torrents" routeProps=
Object { Component: {…}, route: {…} }
pageKey="/torrents" ... >
at <RouterView name=undefined route=undefined >
at <NuxtPage>
at <App key=3 >
at <NuxtRoot> deps:97:13
Uncaught (in promise) TypeError: $setup.categories is undefined
NuxtJS 45
torrents.vue:13:13
Uncaught (in promise) TypeError: v is undefined
NuxtJS 13
torrents.vue:148:6
And when i try to create an account:
[Vue warn]: Unhandled error during execution of render function
at <Torrents onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<
Proxy { <target>: Proxy, <handler>: {…} }
> >
at <RouteProvider key="/torrents" routeProps=
Object { Component: {…}, route: {…} }
pageKey="/torrents" ... >
at <RouterView name=undefined route=undefined >
at <NuxtPage>
at <App key=3 >
at <NuxtRoot> deps:97:13
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
at <Torrents onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<
Proxy { <target>: Proxy, <handler>: {…} }
> >
at <RouteProvider key="/torrents" routeProps=
Object { Component: {…}, route: {…} }
pageKey="/torrents" ... >
at <RouterView name=undefined route=undefined >
at <NuxtPage>
at <App key=3 >
at <NuxtRoot> deps:97:13
Uncaught (in promise) TypeError: $setup.categories is undefined
NuxtJS 45
torrents.vue:13:13
Uncaught (in promise) TypeError: v is undefined
NuxtJS 13
torrents.vue:148:6
[Vue warn]: Unhandled error during execution of render function
at <AuthenticationForm>
at <AuthenticationModal>
at <App key=3 >
at <NuxtRoot> deps:97:13
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
at <AuthenticationForm>
at <AuthenticationModal>
at <App key=3 >
at <NuxtRoot> deps:97:13
Uncaught (in promise) TypeError: $setup.settings is undefined
NuxtJS 48
AuthenticationForm.vue:12:24
The index only shows information about the torrent you manage.
Thanks that's more clear although not exactly what i'm looking for! :)
Hi @selfhoster1312, I've been cleaning some console errors/warnings. There are still some of them. Some of them are caused by dependencies. I guess they will be fixed when we update the dependencies.
But I can run the app even with some warnings. But I do not see yours. Which nodejs version are you using? I'm using:
v20.2.0
9.6.6
Regarding what you are looking for if you think it could be a nice-to-have feature, you can open a discussion here. Maybe you do not need the Index but only the Tracker. The tracker has an API. If you want to collect all the torrents in the tracker, you could build a console command for the tracker, a new console command which uses the tracker API, a new frontend app using only the Tracker API, a new feature for this Index to list the torrents in the tracker, ...
I've seen you have explained your use case here.
But I can run the app even with some warnings. But I do not see yours.
These are browser errors not npm errors. I'm using node v18.13.0 and npm v9.2.0 from Debian bookworm repositories.
I've seen you have explained your use case here.
Yes sorry i did not know about discussions. Should i move it there?
But I can run the app even with some warnings. But I do not see yours.
These are browser errors not npm errors. I'm using node v18.13.0 and npm v9.2.0 from Debian bookworm repositories.
Ok, as I'm going to add support for docker, I think I can test with those versions, but it will take me some time. I'm fixing some bugs, and then I will start with the docker support.
I've seen you have explained your use case here.
Yes sorry i did not know about discussions. Should i move it there?
Yes, I can move it, we are using discussions instead of issues for open discussions.
I think I can test with those versions, but it will take me some time
Take your time. No hurry on my side. I could also try with newer versions from NixOS but i guess it's good to document what versions of npm/node work or not. However, is it common for npm projects to build successfully but then produce runtime errors on the client side due to a wrong version? That sounds really bad to me but i'm more used to Rust where we have a culture of compile-time errors :)
I think I can test with those versions, but it will take me some time
Take your time. No hurry on my side. I could also try with newer versions from NixOS but i guess it's good to document what versions of npm/node work or not. However, is it common for npm projects to build successfully but then produce runtime errors on the client side due to a wrong version? That sounds really bad to me but i'm more used to Rust where we have a culture of compile-time errors :)
If you are running npm run dev
you might have some extra errors/warnings. For production, you should not see those errors. And they should not depend on the node version you used to build it, as far as I know. Maybe you can try running the production version with:
npm run build
npm run preview
I'm working on the next major release, after that, I'm planning to add E2E tests that could be executed for all the node versions we want to support in parallel. I think the LTS and the current would be enough.
Notice that we are not using the node LTS (18). The active LTS start for version 20 is in October.
Maybe you can try running the production version with
I still have the same errors in Firefox/Chromium. Just to be clear, they're browser console errors not "server" errors.
Good luck working on the next release, i'll be happy to try then!
Hi @selfhoster1312, I've added docker configuration on my fork.
You can run the app with:
cd /tmp
git clone git@github.com:josecelano/torrust-index-frontend.git
cd torrust-index-frontend/
git switch issue-134-docker-support
./docker/bin/build.sh && ./docker/bin/run.sh
That will run the app in "production" mode.
The Dockerfile
uses node 20
FROM node:20.2 as base
But you can change it to your version before building the image and running the app:
FROM node:18.13.0 as base
It's working for the production build, but I also get browser console errors for the development version. You can run the dev mode with:
./docker/bin/build-dev.sh && ./docker/bin/run-dev.sh
I get this errors:
It could be because I'm using an experimental version of the Devtools package.
Nuxt Devtools is enabled v0.6.4 (experimental)
Maybe you can just downgrade that package or update node, or install several node versions, or use docker. I'm not planning to maintain node 18 version because in October the version 20 will be the LTS and I'm working on the next major release. The previous release is pretty old, I do not know which node version is required. I've started working recently on this repo.
The node LTS is 20.10.0 (https://nodejs.org/en/download/). That's the minimum requirement now. We will update docs.
In Firefox/Chrome console:
I also tried bundling from source, but
npm i; npm run build
did not produce adist
folder. I know nothing about "frontend" development so i don't know if that's normal, but that's not what's written in the docs.PS: Is there an IRC/XMPP channel to get in touch and contribute?