Problem about Visualizer build

Web Support
1

Hi, I’m trying to build the latest github code of Visualizer on Ubuntu 18.04, following the guidline at: https://github.com/Kitware/visualizer.

  1. After I git clone the code to local path, I copy it to the directory of /data/visualizer
  2. I give the read/write/modify rights of /data to all account using “sudo chmod -R 777 /data”
  3. I go into visualizer directory
  4. sudo npm install
    But I come across the problem as follows:
    image
    image.jpg1543×693 387 KB

    I have try to google, and try some solution, such as:
  5. install node-gyp, python, make, gcc
  6. modify the default path of npm
  7. modify the rights of ~/.npm path
    But all failed.
    Can anyone help me? Thank you~
2

Are you trying to build it because you want to expand the code or just use it?

If it is just to use it, you just need the ./dist/ directory and the ./server/ ones. It is already built.

Regarding your issue, it is specific to node and some of our dependency for testing. Depending on your usage, you can remove those dependencies.

Let me know what’s your goal behind that.

Thanks,

Seb

3

Thank you. We want to expand it and develop our specific app of web visualization

—Original—

4

I’ve just noticed that you are doing sudo npm install. You should never do sudo when you do a npm install in a project. I can’t tell if that’s your issue, but you don’t want to mixup permission inside your repo/project.

5

I still have problem.
I user Ubuntu 18.04 LTS and login with administrative account steven.
My node version and npm version is as following snapshot

image
image.png738×905 146 KB

I want to know whether this problem is related with the user account or the dir path?

6

pkg-config: not found

Try to install it? Did you install build-essential so you could build and compile applications on your system?

7

I just follow the website: https://github.com/kitware/visualizer
So I did not find the build-essential section in the user guid. Where is it ?

8

I almost come to success. Summery as follows:

install node and npm:

sudo apt-get install nodejs-legacy
sudo apt-get install npm
sudo npm install npm@latest -g
sudo npm install -g n
sudo n stable

install other essential package:

sudo apt-get install build-essential pkg-config libcairo2-dev libjpeg-dev libgif-dev

So my problem is the lack of the other essential package in my Ubuntu system, which is not shown in the guidline.

9

The document assume you have a machine setup for development. We don’t go into details on how to install a computer.

What is happening is that one of the dependency needs to compile some code (C++) and on linux to do so you need a bunch of tools such as a compiler, build tools and so on.

The Linux distribution simplify the process by providing a meta package with that set of tools. To install on your system those build tools, you should be able to run the following command line:

sudo apt-get install build-essential

10

What is the error now?

Because so far the issue were:

  1. permission issue as you ran the install command as sudo
  2. you were missing pkg-config

So now, if you have pkg-config, there is no reason to get the same error?

11

After I install those package, no errors prompt.
But only one issue is that the “npm link” command should add sudo.

image
image.png733×801 125 KB

12

npm link is not required for development. It is only needed if you use the Visualizer executable which helps to generate the appropriate command line.

All the npm issue you are facing are computer specific and are dependent on the way you’ve installed node.

13

So could you tell me the best way of installing node and npm for Visualizer development ?

14

A google search lead me to this blog which seems to do the trick.

15

Excuse me, how do you edit and code the .mcss style file?
image
I guess you code it in some visualization IDE?

16

It is css (module), so a plain text editor should do fine.

17

I am trying to compile the source code in webpack enviroment.
For automated compile and see the webpage, I install the webpack-dev-server first.
Then go to the visualizer directory, I run “npm run dev”, but the webpage is empty, just the title come out.

image
image.png1856×929 195 KB

image
image.png1045×904 96 KB

So where is the problem? thanks!

18

Where is the ParaView server? You need to run the server

$ pvpython ./server/pvw-visualizer.py --content ./dist --data ~/ --port 8080

Then you can incrementally build the web app with the following command line

$ npm run build -- --watch
19

I have try your way, and it works. Thank you~
BTY, I find that this way is just used for coding and debug at the same time.
Is there anyway that I can see the realtime change of webpage when coding?

20

I’m pretty sure you can, but keep in mind that you have a stateful server side connected via websocket.
You can probably use the webpack-dev-server as long your properly configure the proxy for the websocket.