search

Redocly / swagger-repo

CLI tool to help you manage your OpenAPI(fka Swagger) repo.
MIT License
18 stars 29 forks source link

Swagger Editor is not working #15

Closed lacek closed 5 years ago

lacek commented 5 years ago

Error is shown in console when browsing /swagger-editor:

Refused to apply style from 'http://localhost:8080/swagger-editor.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
swagger-editor:43 GET http://localhost:8080/swagger-editor-bundle.js net::ERR_ABORTED 404 (Not Found)
swagger-editor:44 GET http://localhost:8080/swagger-editor-standalone-preset.js net::ERR_ABORTED 404 (Not Found)
swagger-editor:82 Uncaught ReferenceError: SwaggerEditorBundle is not defined
    at window.onload (swagger-editor:82)

It appears that some of the files are not being served and MIME type of css file is incorrect.

RomanHotsiy commented 5 years ago

I can't reproduce it on my side. Do you have any details on how to reproduce it?

lacek commented 5 years ago

I am on macOS 10.14.5. Below are steps to reproduce the error:

node --version
# v12.1.0
npx --version
# 6.9.0
npx create-openapi-repo openapi
# Welcome to the OpenAPI-Repo generator!
# ? Do you already have OpenAPI/Swagger spec for your API? No
# ? Select OpenAPI version: OpenAPI 3
# ? API Name: openapi
# ? Split spec into separate files: paths/*, definitions/* [Experimental]? No
# ? Prepare manual code samples folder? No
# ? Install SwaggerUI? Yes
# ? Set up Travis CI? No
cd openapi
npm start
# visit http://localhost:8080, ReDoc UI is normal
# visit http://localhost:8080/swagger-editor, page is empty, error is shown in developer console
# Ctrl-C

# "Redocly config not found at redocly.yaml. Using empty..." was shown, so let's try fix it:
mv .redoclyrc redocly.yaml
npm start
# same result

I've got another Linux server with Docker, so I tried another set of steps to reproduce the same error within a Ubuntu container:

# port 8080 was occupied on the server, so forwards to port 3000
docker run -it --rm -p 3000:8080 ubuntu:18.04 bash
# we are not in container as root
apt-get update
apt-get install -y nodejs npm
node --version
# v8.10.0
npm --version
# 3.5.2
npm install --allow-root -g create-openapi-repo
create-openapi-repo openapi
# Welcome to the OpenAPI-Repo generator!
# ? Do you already have OpenAPI/Swagger spec for your API? No
# ? Select OpenAPI version: OpenAPI 3
# ? API Name: openapi
# ? Split spec into separate files: paths/*, definitions/* [Experimental]? No
# ? Prepare manual code samples folder? No
# ? Install SwaggerUI? Yes
# ? Set up Travis CI? No
cd openapi
npm start
# visit http://linux-server:3000/swagger-editor, page is empty, same error in console
# Ctrl-C
mv .redoclyrc redocly.yaml
npm start
# visit http://linux-server:3000/swagger-editor, page is empty, same error in console
RomanHotsiy commented 5 years ago

I just followed the steps you provided and everything works fine for me on Mac. Could you try again using the latest version?

lacek commented 5 years ago

Thanks @RomanHotsiy, it works on Mac now.

On the other hand, I have also tried on a Ubuntu 18.04 vagrant VM and problem still occurs.

On terminal 1:

vagrant@ubuntu:~$ sudo apt-get install -y nodejs npm
...
vagrant@ubuntu:~$ npm --version
3.5.2
vagrant@ubuntu:~$ node --version
v8.10.0
vagrant@ubuntu:~$ sudo npm install -g create-openapi-repo
vagrant@ubuntu:~$ create-openapi-repo openapi
Welcome to the OpenAPI-Repo generator!
? Do you already have OpenAPI/Swagger spec for your API? No
? Select OpenAPI version: OpenAPI 3
? API Name: openapi
? Split spec into separate files: paths/*, definitions/* [Experimental]? No
? Prepare manual code samples folder? No
? Install SwaggerUI? Yes
? Set up Travis CI? No
vagrant@ubuntu:~$ cd openapi
vagrant@ubuntu:~/openapi$ npm start

> openapi@1.0.0 start /home/vagrant/openapi
> swagger-repo serve

Development server started � :

  ✔ Documentation (ReDoc):      http://localhost:8080
  ✔ Documentation (SwaggerUI):  http://localhost:8080/swagger-ui/
  ✔ Swagger Editor:             http://localhost:8080/swagger-editor/

Watching changes...

In Chrome, http://localhost:8080/swagger-ui/ is still empty with the same error in conosle.

On terminal 2

vagrant@ubuntu:~$ curl http://localhost:8080/swagger-editor.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /swagger-editor.css</pre>
</body>
</html>

You may close the issue if you are not intended to investigate further on Ubuntu. I was testing on Ubuntu only to see if it's problem of setup on my Mac.

lacek commented 5 years ago

Thanks @RomanHotsiy, it works on Mac now.

On the other hand, I have also tried on a Ubuntu 18.04 vagrant VM and problem still occurs.

On terminal 1:

vagrant@ubuntu:~$ sudo apt-get install -y nodejs npm
...
vagrant@ubuntu:~$ npm --version
3.5.2
vagrant@ubuntu:~$ node --version
v8.10.0
vagrant@ubuntu:~$ sudo npm install -g create-openapi-repo
vagrant@ubuntu:~$ create-openapi-repo openapi
Welcome to the OpenAPI-Repo generator!
? Do you already have OpenAPI/Swagger spec for your API? No
? Select OpenAPI version: OpenAPI 3
? API Name: openapi
? Split spec into separate files: paths/*, definitions/* [Experimental]? No
? Prepare manual code samples folder? No
? Install SwaggerUI? Yes
? Set up Travis CI? No
vagrant@ubuntu:~$ cd openapi
vagrant@ubuntu:~/openapi$ npm start

> openapi@1.0.0 start /home/vagrant/openapi
> swagger-repo serve

Development server started � :

  ✔ Documentation (ReDoc):      http://localhost:8080
  ✔ Documentation (SwaggerUI):  http://localhost:8080/swagger-ui/
  ✔ Swagger Editor:             http://localhost:8080/swagger-editor/

Watching changes...

In Chrome, http://localhost:8080/swagger-ui/ is still empty with the same error in conosle.

On terminal 2

vagrant@ubuntu:~$ curl http://localhost:8080/swagger-editor.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /swagger-editor.css</pre>
</body>
</html>

You may close the issue if you are not intended to investigate further on Ubuntu. I was testing on Ubuntu only to see if it's problem of setup on my Mac.

Strange. It doesn't work on Mac again. Here's what I did:

  1. Test on Mac: successful
  2. Press Ctrl-C to stop
  3. Started the vagrant VM on a remote machine for Ubuntu testing
  4. Establish an SSH tunnel to the VM on remote machine and test: failed
  5. Closed SSH tunnel. Run npm start on Mac and visit /swagger-editor again: failed
  6. Remove the entire openapi folder and redo all the steps, still failed

I am sure I did no change to the openapi folder on my Mac between step 2-5. Not sure what triggers the problem.

RomanHotsiy commented 5 years ago

It looks like there is something on your side. I would appreciate if you could investigate further.

Thanks!

lacek commented 5 years ago

Finally got it. I got an empty page with error because I visited the URL http://localhost:8080/swagger-editor. By adding a trailing slash, everything works fine regardless of the environment (Mac/Linux/Linux in Docker).

It worked once and just once before because I copied and pasted the URL instead of typing by hand. This is so embarrassing. 😂