Studio 404 not found

[aykonsvk]

Describe the bug

I get this error:

$ ./node_modules/.bin/asyncapi start:studio
(node:89108) [MODULE_NOT_FOUND] Error Plugin: @asyncapi/cli: Cannot find module '@oclif/plugin-help/lib/command'
Require stack:
- /Users/m/PhpstormProjects/spec/examples/social-media/node_modules/@fmvilas/oclif-plugin-spaced-commands/lib/hooks/init.js
- /Users/m/PhpstormProjects/spec/examples/social-media/node_modules/@oclif/config/lib/config.js
- /Users/m/PhpstormProjects/spec/examples/social-media/node_modules/@oclif/config/lib/index.js
- /Users/m/PhpstormProjects/spec/examples/social-media/node_modules/@oclif/command/lib/command.js
- /Users/m/PhpstormProjects/spec/examples/social-media/node_modules/@oclif/command/lib/index.js
- /Users/m/PhpstormProjects/spec/examples/social-media/node_modules/@asyncapi/cli/bin/run
module: @oclif/[email protected]
task: runHook init
plugin: @asyncapi/cli
root: /Users/m/PhpstormProjects/spec/examples/social-media/node_modules/@asyncapi/cli
See more details with DEBUG=*
(Use `node --trace-warnings ...` to show where the warning was created)
Studio is running at http://localhost:3210?liveServer=3210
Watching changes on file asyncapi.yaml

but browser opens up and shows message 404 - The requested path could not be found

How to Reproduce

• installed locally/globally using npm install @asyncapi/cli
• when I got first error with oclif, I added more packages.

{
  "dependencies": {
    "@asyncapi/cli": "^0.14.1",
    "@oclif/command": "^1.8.16",
    "@oclif/plugin-help": "^5.1.11",
    "oclif": "^2.4.5"
  }
}

• run ./node_modules/.bin/asyncapi start:studio or ./node_modules/.bin/asyncapi new

the guide to create a new file works and I can verify that a new file was created.

macOS Monterey, node - v17.6.0, npm - 8.5.1

Expected behavior

It will open a studio in the browser with the studio.

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[Souvikns]

@aykonsvk currently CLI shows this warning in production but the development environment works fine you can check this #192 I already have this updated oclif to its latest version which you can check #203 , we haven't merged this yet since some other PR's will break so waiting for now.

I am having issue reproducing the bug , I installed the CLI globally and then ran the commands, so my commands look something like this asyncapi new and asyncapi start:studio -f ./asyncapi.yaml and they are working as intended but I still see the warnings.

Also can you try running asyncapi start:studio -f ./path-to-asyncapi-file. Let me know if you still face the problem.

[aykonsvk]

I tried it when installed @asyncapi/cli as devDependency locally or globally using the mentioned command above and the result was same. Error and 404.

[imabp]

As @Souvikns mentioned, we are waiting for PRs to get merged, to make sure, this error resolves in to production release.

But for now, @aykonsvk feel free to follow these steps to run locally.

$ git clone https://github.com/asyncapi/cli.git
$ cd cli
$ npm install
$ bin/run <command> <flags> <paths if any>

<command>= validate, new, diff, etc
<flags = -w, -h , etc
<path> = if any command (for ex: diff / validate) requires path.

[Souvikns]

@aykonsvk can you update to the latest version and check once, your issue should be fixed now, but if it isn't just let me know.

[aykonsvk]

After the update there is no error in the console. but I still have 404.

Tried new file with

$ node_modules/@asyncapi/cli/bin/run new                                                                  

? name of the file? asyncapi.yaml
? would you like to start your new file from one of our examples? Yes
? What example would you like to use? Streetlights Kafka API - (protocols: kafka-secure)
? open in Studio? Yes
Created file asyncapi.yaml...
Studio is running at http://localhost:3210?liveServer=3210
Watching changes on file asyncapi.yaml

And also opening existing with full path:

$ node_modules/@asyncapi/cli/bin/run start studio -f /Users/aykon/PhpstormProjects/async-docs/asyncapi.yaml

Studio is running at http://localhost:3210?liveServer=3210
Watching changes on file /Users/aykon/PhpstormProjects/async-docs/asyncapi.yaml

[derberg]

@aykonsvk I just installed latest CLI

$ asyncapi --version
@asyncapi/cli/0.17.0 darwin-x64 node-v16.4.0

All works well for me. I replicated all your steps and see no issues. I see you are working on sources, can you please make sure you are really using latest?

[andrew-williams-cko]

I also had this 404 issue - but it seems to only happen when @asyncapi/cli is installed locally, when installed globally (npm i -g), it seems to work fine.

[aykonsvk]

@andrew-williams-cko Thank you! That helped. Tried to reproduce the problem even in docker and it is not working when package is not globally installed.

[derberg]

just to clarify @aykonsvk @andrew-williams-cko do you see a use case to use CLI as a local package?

[andrew-williams-cko]

just to clarify @aykonsvk @andrew-williams-cko do you see a use case to use CLI as a local package?

Mainly for convinience, as adding an extra step on Getting Started for potential contributors isn't ideal, but then again, it's just one tiny extra step, so not a deal breaker.

[derberg]

Mainly for convinience oh yeah, actually for good DX it makes sense to enable support for it. I on my own use rimraf quite a lot and can imagine that you have some script in package.json like npm run validate or something.

So yeah, this is not yet fixed, we need to investigate what's wrong

[derberg]

ok folks, so

1. I added "@asyncapi/cli": "^0.19.1" to devDependencies in my project
2. created some dummy asyncapi file
3. added script like "studio": "asyncapi --version && asyncapi start studio"
4. ran script npm run studio
5. Got this

   @asyncapi/cli/0.19.1 darwin-x64 node-v16.4.0
   Studio is running at http://localhost:3210?liveServer=3210
   Watching changes on file asyncapi.yml
   

6. Studio opens and works like a charm, not 404

Maybe you have some ports opened? did you try p flag with a custom port? Hard to fix without reproducing, or did I misunderstand your use case?

[Pcrab]

I found if I install with npm globally, start:studio works, but if I use yarn or pnpm, it will always return a 404.

[derberg]

I tried with the latest CLI, installed in my project as a local dependency with YARN and all is good.

I really cannot reproduce it.
The error looks like connected to https://github.com/asyncapi/cli/blob/master/src/models/Studio.ts#L49. Maybe because of some issues on your side, the @asyncapi/studio dependency is not installed, therefore the server cannot host anything from ../../node_modules/@asyncapi/studio/build. This is my only suspicion as I cannot reproduce. I really do not know 😞

[mihirkothari25]

I ran into the same issue with pnpm. Installed it as a dev dependency at both the root level and the package level and encountered a 404 when running studio.
It works fine with the global installation of the cli.

[derberg]

@mihirkothari25

I ran into the same issue with pnpm. Installed it as a dev dependency at both the root level and the package level and encountered a 404 when running studio.

can you confirm if node_modules inside installed @asyncapi/cli you have @asyncapi/studio ?

[mihirkothari25]

@derberg I doesn't contain it.

[derberg]

Damn, it is almost completely empty 🤔 at least we know why we get the error, but why the heck deps are not resolved by pnpn...

... looking at docs

pnpm uses a content-addressable filesystem to store all files from all module directories on a disk. When using npm or Yarn, if you have 100 projects using lodash, you will have 100 copies of lodash on disk. With pnpm, lodash will be stored in a content-addressable storage, so

Looks like it is normal. That if you installed it also globally, it is the only place where it stays and won't go to local package 🤔 but there is also no symlink so what magic is used to import deps... I have no idea 🤣

We need to figę how we can fallback to global location, or in different words, how to safely resolve "build" path relative to node_modules

[mkotharicvent]

@derberg is there anything we can do to resolve this issue? I can also create a repo that reproduces this issue if that helps? This seems like a pnpm only issue at this point.

[derberg]

@mkotharicvent I don't think we need to reproduce. We know issue is related to this line -> https://github.com/asyncapi/cli/blob/master/src/models/Studio.ts#L49 and that in case of pnpm, prod dependencies are not installed for the CLI (as they are in global location, thus picked up from there) so @asyncapi/studio is not installed in the same directory, thus server serves nothing.

Easiest but ugliest solution:

1. update readme with instructions and workaround
2. add here https://github.com/asyncapi/cli/blob/master/src/models/Studio.ts#L49 a check, that if the build file doesn't exist, the server will not start and proper console error will be thrown with an explanation

Something better from UX point of view:

• maybe there is a package resolver that would allow us to find a location of @asyncapi/studio on a drive, and host from given location, no matter if npm, pnpm or yarn is used
• or maybe we should modify current approach, and just pull build file from the studio during the release and place in the dist dir

An approach with better release process might make more sense 🤔 then @asyncapi/studio would be just a devDependency.

What do you think?

[woylie]

I just tried adding the cli (version 0.19.4) as a dev dependency to a yarn 1.22.18 project (no pnpm). I generated a new file with asyncapi new, but when I started studio, I got "404 - The requested path could not be found" in the browser as well.

It looks like the dependencies have been installed, though:

I then tried to install the cli globally with yarn, but I got the same result.

[derberg]

@magicmatatjahu @Souvikns @boyney123

Hey folks, what do you think about #244 (comment) and 👇🏼

or maybe we should modify current approach, and just pull build file from the studio during the release and place in the dist dir

I think we should give it a try and not depend on dependencies and all these different package managers

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[tsauerwein]

The issue still exists with version 0.31.0. If I install the package locally with npm install @asyncapi/cli, I still see a 404 in the browser.

To reproduce:

$ nvm install v18.14.0
...
Now using node v18.14.0 (npm v9.3.1)

$ npm install  @asyncapi/cli
$ ./node_modules/.bin/asyncapi --help
All in one CLI for all AsyncAPI tools

VERSION
  @asyncapi/cli/0.31.0 darwin-arm64 node-v18.14.0
...

$ ./node_modules/.bin/asyncapi new
? name of the file? test.yml
? would you like to start your new file from one of our examples? No
? open in Studio? Yes
Created file test.yml...
Studio is running at http://localhost:3210?liveServer=3210
Watching changes on file test.yml

Installing it globally works.