search

scottlamb / moonfire-nvr

Moonfire NVR, a security camera network video recorder
Other
1.22k stars 137 forks source link

Building From Source: UI Directory staging? #150

Closed jlpoolen closed 3 years ago

jlpoolen commented 3 years ago

On a RaspberryPi 4, building from source.

Following Building Moonfire NVR- Non-Docker setup

I've built the rust package and can run it, connections to camera succeed and videos are being saved. The instruction discuss the UI build as follows:

You can build the UI via npm and find it in the ui/dist directory:

$ cd ui
$ npm install
$ npm run build

My versions:

jlpoole@pi:/usr/local/src/moonfire-nvr/ui $ rustc -V
rustc 1.54.0 (a178d0322 2021-07-26)
jlpoole@pi:/usr/local/src/moonfire-nvr/ui $

jlpoole@pi:/usr/local/src/moonfire-nvr/ui $ node -v
v14.17.5
jlpoole@pi:/usr/local/src/moonfire-nvr/ui $ npm -v
6.14.14
jlpoole@pi:/usr/local/src/moonfire-nvr/ui $

Here are the screen shots of the two npm commands from above: putty_2021-08-19_20-08-14

putty_2021-08-19_20-21-08

I run nvr which looks fine, though there was an error message: putty_2021-08-19_20-27-10

I've spent over an hour drying to determine where web server is expecting to find the directory it needs to serve up the pages. I recall an issue over a years ago about a directory one level too high or too low, but could not find anything regarding that. I've tried various soft links for /usr/local/moonfire-nvr/ui and /usr/local/lib/moonfire-nvr/ui, but haven't achieved success.

I also tried following the instructions in the console and executed:

  sudo npm install -g serve
  serve -s build

The above causes a service on port 5000 which is not what I think is intended. If, while running nvr, I access port 8080, I get: no such static file

Question, after executing npm run build, is there a soft link or something else to get the built ui files staged for the web server?

scottlamb commented 3 years ago

Sorry for the confusion! This text:

You can build the UI via npm and find it in the ui/dist directory:

Is out of date. It should say ui/build instead. I'll fix it.

I just copy its contents recursively into /usr/local/lib/moonfire-nvr/ui, so I end up with a result like this:

$ ls -laFR /usr/local/lib/moonfire-nvr/ui
/usr/local/lib/moonfire-nvr/ui:
total 44
drwxr-xr-x 4 root root 4096 Aug 12 13:47 ./
drwxr-xr-x 5 root root 4096 Mar 16 22:04 ../
-rw-r--r-- 1 root root 1157 Aug 12 13:47 asset-manifest.json
-rw-r--r-- 1 root root  317 Aug 12 13:47 asset-manifest.json.gz
drwxr-xr-x 2 root root 4096 Aug 12 13:47 favicons/
-rw-r--r-- 1 root root 2646 Aug 12 13:47 index.html
-rw-r--r-- 1 root root 1268 Aug 12 13:47 index.html.gz
-rw-r--r-- 1 root root   69 Aug 12 13:47 robots.txt
-rw-r--r-- 1 root root  513 Aug 12 13:47 site.webmanifest
-rw-r--r-- 1 root root  289 Aug 12 13:47 site.webmanifest.gz
drwxr-xr-x 5 root root 4096 Aug 12 13:47 static/

/usr/local/lib/moonfire-nvr/ui/favicons:
total 60
drwxr-xr-x 2 root root  4096 Aug 12 13:47 ./
drwxr-xr-x 4 root root  4096 Aug 12 13:47 ../
-rw-r--r-- 1 root root  2463 Aug 12 13:47 android-chrome-192x192-22fa756c4c8a94dde.png
-rw-r--r-- 1 root root  5884 Aug 12 13:47 android-chrome-512x512-0403b1c77057918bb.png
-rw-r--r-- 1 root root  2250 Aug 12 13:47 apple-touch-icon-94a09b5d2ddb5af47.png
-rw-r--r-- 1 root root   550 Aug 12 13:47 favicon-16x16-b16b3f2883aacf9f1.png
-rw-r--r-- 1 root root   824 Aug 12 13:47 favicon-32x32-ab95901a9e0d040e2.png
-rw-r--r-- 1 root root 15086 Aug 12 13:47 favicon-e6c276d91e88aab6f.ico
-rw-r--r-- 1 root root  2215 Aug 12 13:47 favicon-e6c276d91e88aab6f.ico.gz
-rw-r--r-- 1 root root   439 Aug 12 13:47 safari-pinned-tab-9792c2c82f04639f8.svg
-rw-r--r-- 1 root root   294 Aug 12 13:47 safari-pinned-tab-9792c2c82f04639f8.svg.gz

/usr/local/lib/moonfire-nvr/ui/static:
total 20
drwxr-xr-x 5 root root 4096 Aug 12 13:47 ./
drwxr-xr-x 4 root root 4096 Aug 12 13:47 ../
drwxr-xr-x 2 root root 4096 Aug 12 13:47 css/
drwxr-xr-x 2 root root 4096 Aug 12 13:47 js/
drwxr-xr-x 2 root root 4096 Aug 12 13:47 media/

/usr/local/lib/moonfire-nvr/ui/static/css:
total 36
drwxr-xr-x 2 root root 4096 Aug 12 13:47 ./
drwxr-xr-x 5 root root 4096 Aug 12 13:47 ../
-rw-r--r-- 1 root root 2236 Aug 12 13:47 2.8c49bb0a.chunk.css
-rw-r--r-- 1 root root  540 Aug 12 13:47 2.8c49bb0a.chunk.css.gz
-rw-r--r-- 1 root root 3266 Aug 12 13:47 2.8c49bb0a.chunk.css.map
-rw-r--r-- 1 root root  713 Aug 12 13:47 2.8c49bb0a.chunk.css.map.gz
-rw-r--r-- 1 root root   91 Aug 12 13:47 main.7ef73230.chunk.css
-rw-r--r-- 1 root root  463 Aug 12 13:47 main.7ef73230.chunk.css.map
-rw-r--r-- 1 root root  359 Aug 12 13:47 main.7ef73230.chunk.css.map.gz

/usr/local/lib/moonfire-nvr/ui/static/js:
total 4264
drwxr-xr-x 2 root root    4096 Aug 12 13:47 ./
drwxr-xr-x 5 root root    4096 Aug 12 13:47 ../
-rw-r--r-- 1 root root  623918 Aug 12 13:47 2.eaf846e9.chunk.js
-rw-r--r-- 1 root root  183656 Aug 12 13:47 2.eaf846e9.chunk.js.gz
-rw-r--r-- 1 root root    1875 Aug 12 13:47 2.eaf846e9.chunk.js.LICENSE.txt
-rw-r--r-- 1 root root     381 Aug 12 13:47 2.eaf846e9.chunk.js.LICENSE.txt.gz
-rw-r--r-- 1 root root 2605357 Aug 12 13:47 2.eaf846e9.chunk.js.map
-rw-r--r-- 1 root root  665233 Aug 12 13:47 2.eaf846e9.chunk.js.map.gz
-rw-r--r-- 1 root root   42144 Aug 12 13:47 main.0538035d.chunk.js
-rw-r--r-- 1 root root   12558 Aug 12 13:47 main.0538035d.chunk.js.gz
-rw-r--r-- 1 root root  132747 Aug 12 13:47 main.0538035d.chunk.js.map
-rw-r--r-- 1 root root   40472 Aug 12 13:47 main.0538035d.chunk.js.map.gz
-rw-r--r-- 1 root root    1545 Aug 12 13:47 runtime-main.95a67319.js
-rw-r--r-- 1 root root     767 Aug 12 13:47 runtime-main.95a67319.js.gz
-rw-r--r-- 1 root root    8254 Aug 12 13:47 runtime-main.95a67319.js.map
-rw-r--r-- 1 root root    2902 Aug 12 13:47 runtime-main.95a67319.js.map.gz

/usr/local/lib/moonfire-nvr/ui/static/media:
total 212
drwxr-xr-x 2 root root  4096 Aug 12 13:47 ./
drwxr-xr-x 5 root root  4096 Aug 12 13:47 ../
-rw-r--r-- 1 root root 65244 Aug 12 13:47 roboto-all-400-normal.376ea5d9.woff
-rw-r--r-- 1 root root 65084 Aug 12 13:47 roboto-all-400-normal.376ea5d9.woff.gz
-rw-r--r-- 1 root root  9688 Aug 12 13:47 roboto-cyrillic-400-normal.5e493812.woff2
-rw-r--r-- 1 root root 15344 Aug 12 13:47 roboto-cyrillic-ext-400-normal.493afe7a.woff2
-rw-r--r-- 1 root root  7100 Aug 12 13:47 roboto-greek-400-normal.1cbfc636.woff2
-rw-r--r-- 1 root root  1516 Aug 12 13:47 roboto-greek-ext-400-normal.e769aa77.woff2
-rw-r--r-- 1 root root 15688 Aug 12 13:47 roboto-latin-400-normal.4673b453.woff2
-rw-r--r-- 1 root root 11860 Aug 12 13:47 roboto-latin-ext-400-normal.c3dcdbd5.woff2
-rw-r--r-- 1 root root  5540 Aug 12 13:47 roboto-vietnamese-400-normal.c0bec65d.woff2

One trick is that if Moonfire NVR is running while you replace /usr/local/lib/moonfire-nvr/ui itself, you need to restart the server. It opens that directory only once on startup and resolves all its paths relative to that. (Similar to if you do cd /usr/local/lib/moonfire-nvr/ui from a shell.)

jlpoolen commented 3 years ago

Thank you. I am able to access (after logging in) the site. Here what I used:

ln -s /usr/local/src/moonfire-nvr/ui/build /usr/local/lib/moonfire-nvr/ui
brian-liu1 commented 3 years ago

On a RaspberryPi 4, building from source.

Following Building Moonfire NVR- Non-Docker setup

I've built the rust package and can run it, connections to camera succeed and videos are being saved. The instruction discuss the UI build as follows:

You can build the UI via npm and find it in the ui/dist directory:

$ cd ui
$ npm install
$ npm run build

My versions:

jlpoole@pi:/usr/local/src/moonfire-nvr/ui $ rustc -V
rustc 1.54.0 (a178d0322 2021-07-26)
jlpoole@pi:/usr/local/src/moonfire-nvr/ui $

jlpoole@pi:/usr/local/src/moonfire-nvr/ui $ node -v
v14.17.5
jlpoole@pi:/usr/local/src/moonfire-nvr/ui $ npm -v
6.14.14
jlpoole@pi:/usr/local/src/moonfire-nvr/ui $

Here are the screen shots of the two npm commands from above: putty_2021-08-19_20-08-14

putty_2021-08-19_20-21-08

I run nvr which looks fine, though there was an error message: putty_2021-08-19_20-27-10

I've spent over an hour drying to determine where web server is expecting to find the directory it needs to serve up the pages. I recall an issue over a years ago about a directory one level too high or too low, but could not find anything regarding that. I've tried various soft links for /usr/local/moonfire-nvr/ui and /usr/local/lib/moonfire-nvr/ui, but haven't achieved success.

I also tried following the instructions in the console and executed:

  sudo npm install -g serve
  serve -s build

The above causes a service on port 5000 which is not what I think is intended. If, while running nvr, I access port 8080, I get: no such static file

Question, after executing npm run build, is there a soft link or something else to get the built ui files staged for the web server?

hey man, can you share your compile solutions? I cross-compile the nvr for my bananapi m2u on ubuntu without docker. I just compile ncurses, ffmpeg, sqlite3, and then compile moonfir-nvr.

jlpoolen commented 3 years ago

Brian Liu,

I'll see what I can do over the weekend. What I would do is is provide a step-by-step log of what I did following Brian Lamb's directions. By the way, my compile was directly on the Raspberry Pi4, it was not a cross-compile. I think the compile in rust takes about 20 minutes, so it's not a matter of hours or days.