Preview.js does not work with Node running inside Docker

[paulrosen]

Describe the bug

When starting WebStorm I get the message "Preview.js crashed".

It says it is looking for a docker-compose file, but I have one. Here is my docker setup:

docker-compose.yml:

version: '3.7'

services:
  app:
    image: nmpvue3
    build: .
    container_name: nmpvue3
    volumes:
      - .:/srv/app
      - ../srf:/srv/srf
      - ./node_modules:/srv/app/node_modules
networks:
  default:
    external: true
    name: docker_default

Dockerfile:

FROM node:16.10.0

RUN apt-get update
RUN apt-get -y install default-jdk

RUN npm install -g [email protected]

RUN npm install -g nodemon

RUN mkdir /srv/app && chown node:node /srv/app

USER node

WORKDIR /srv/app

Reproduction

1. install preview.js from preferences/plugins/marketplace
2. restart webstorm by clicking the link asking to restart

Preview.js version

v1.6.0

System Info

macbookpro
webstorm
node is installed in a Docker instance NOT in mac OS

Used Package Manager

npm

Preview.js logs (check bottom panel in IntelliJ)

Preview.js crashed
Please report this issue at https://github.com/fwouts/previewjs/issues java.lang.Error: Can't find a suitable configuration file in this directory or any parent. Are you in the right directory? Supported filenames: docker-compose.yml, docker-compose.yaml, compose.yml, compose.yaml at com.previewjs.intellij.plugin.services.PreviewJsSharedService.isInstalled(PreviewJsService.kt:132) at com.previewjs.intellij.plugin.services.PreviewJsSharedService.access$isInstalled(PreviewJsService.kt:33) at com.previewjs.intellij.plugin.services.PreviewJsSharedService$actor$1.invokeSuspend(PreviewJsService.kt:67) at kotlin.coroutines.jvm.internal.BaseContinuationImpl.resumeWith(ContinuationImpl.kt:33) at kotlinx.coroutines.DispatchedTask.run(DispatchedTask.kt:106) at kotlinx.coroutines.internal.LimitedDispatcher.run(LimitedDispatcher.kt:42) at kotlinx.coroutines.scheduling.TaskImpl.run(Tasks.kt:95) at kotlinx.coroutines.scheduling.CoroutineScheduler.runSafely(CoroutineScheduler.kt:570) at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.executeTask(CoroutineScheduler.kt:749) at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.runWorker(CoroutineScheduler.kt:677) at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.run(CoroutineScheduler.kt:664)

### Browser logs (useful for rendering errors)

_No response_

### Anything else?

_No response_

[paulrosen]

I also tried installing it in VSCode and get this message:

Please wait while Preview.js installs dependencies. This could take a minute.

Dependencies will be installed in: /Users/me/.vscode/extensions/zenclabs.previewjs-1.6.0/dist/installed

Error: Preview.js was unable to run npm. Is it installed?

If not, you may need to restart your IDE after installing it.

So I guess it doesn't know how to get into the docker machine.

[fwouts]

Hi @paulrosen, thanks for the bug report.

I definitely hadn't considered this particular type of setup, so I'm not too surprised it's broken.

Do you have some kind of alias in your shell that runs docker-compose when you run node? I'm asking because there isn't any code in Preview.js that should be aware of the concept of Docker, but one difference between the IntelliJ and VS Code plugins is that IntelliJ runs node in an interactive login shell. Looks like it's not running it from the right directory though, and we may need to do that for VS Code too.

[fwouts]

Ah yes, in fact it does make sense, since Preview.js relies on running npm install in the plugin's install directory, that would be outside of your project directory and therefore the alias would fail to find the Docker Compose config.

I think this might be fixable with a simple change for WebStorm, and a slightly more involved change for VS Code!

Please still confirm what the alias looks like 🙂

[paulrosen]

I start with a script named docker-start.sh which contains

docker-compose run  -e VITE_PORT=$nmp_web --publish $nmp_web:$nmp_web --name=nmpvue3 --rm app bash

Where $nmp_web is defined in my profile. That starts the machine and gives me a command prompt.

[paulrosen]

I am flexible on how I set docker up, except that I want all of the node processing done on the virtual machine, so if you want me to add an alias, I will.

[fwouts]

Thanks for all the details. Heads up, support for this particular case might take a while given competing priorities.

If anyone else needs this, feel free to add a 👍 on the issue or reply with your own use case :)