Swagger-editor: Installing Locali Showing Blank Screen

Created on 26 Apr 2016 · 15Comments · Source: swagger-api/swagger-editor

I start server with http-server and everything seem ok, i`ve got:

Starting up http-server, serving /swagger/swagger-editor-master/
Available on:
  http://127.0.0.1:80

When I open url to localhost the page appear blank, html codes inside is as follow:

<!doctype html> <head> <meta charset="utf-8"> <title>Swagger Editor</title> <meta name="description" content="Swagger Editor"> <meta name="viewport" content="width=device-width"> <link rel="icon" type="image/png" href="./images/favicon-32x32.png" sizes="32x32" /> <link rel="icon" type="image/png" href="./images/favicon-16x16.png" sizes="16x16" /> <link rel="stylesheet" href="dist/styles.css"> <link rel="stylesheet" href="styles/branding.css"> </head> <body> <div class="total-wrapper" ui-view></div> <script src="dist/bundle.js"></script> <script src="scripts/branding.js"></script> </body> </html>

Are this issue from configuration settings or something?

please help, thank you.

help wanted bug

Source

E1101

Most helpful comment

You need to build from master. After you clone the Swagger Editor, you need to run npm install and then npm start.

saharj on 29 Apr 2016

👍2

All 15 comments

I have no idea why that's happening. Please read the README.md file and follow the instructions.

saharj on 28 Apr 2016

I tried the swagger editor and face the same problem. Followed the readme .
npm install -g http-server
wget https://github.com/swagger-api/swagger-editor/releases/download/v2.9.9/swagger-editor.zip
unzip swagger-editor.zip
http-server swagger-editor

The server started with a message
Starting up http-server, serving swagger-editor
Available on:
http://127.0.0.1:8080
http://10.229.56.14:8080

But when i hit the url I get a blank page. I expect the the page to give me a swagger editor. Am I right

Priyanky on 29 Apr 2016

You need to build from master. After you clone the Swagger Editor, you need to run npm install and then npm start.

saharj on 29 Apr 2016

👍2

so running localy , Using http-server module alone will not suffice. We still need to built from source?

Priyanky on 29 Apr 2016

I'm having this issue as well. I did as the readme said, got the master from here, then npm install & npm start, blank page. browser console tells me bundle.js is missing, don't know if that one's important...

dreaganluna on 9 May 2016

same issue, any help is much appreciated

quincogdell on 16 May 2016

I can't reproduce this issue.

Try this and let me know if this worked

npm install -g http-server
wget https://github.com/swagger-api/swagger-editor/releases/download/v2.10.1/swagger-editor.zip
unzip swagger-editor.zip
http-server swagger-editor

saharj on 17 May 2016

npm install solve my problem. it's not documented. I just follow the documentation.

thanks.

E1101 on 17 May 2016

I tried to run swagger-editor from Windows. If I clone the master branch, then do npm install / npm start, I get the same issue - blank page (404 error - dist/bundle.js not found).
The solution with http-server & zipped release worked fine.
I think that the problem is with building/bundling under windows - the dist folder is missing when I just run npm start (or npm build) after cloning the master.

smax48 on 18 May 2016

I am building in Ubuntu and it does the same thing. The dist directory is missing.

LordRix on 18 May 2016

👍1

I have found that the best (albeit imperfect) solution to this issue is to download the latest released version of swagger-editor, using the wget command shown in saharj's comment above and then symlink the dist folder from the unzipped package into the cloned swagger-editor repo. Once that is done, reloading the app in the browser worked for me.

inteq on 21 May 2016

👍1

Version cloned from githut doesn't work (white screen), because it doesn't contain "dist" directory.

But, you can make it work simply downloading it from
https://github.com/swagger-api/swagger-editor/releases/download/v2.10.3/swagger-editor.zip
Alternatively you can clone branch gh-pages which seems to include "dist" folder.

Can someone enlighten me why "dist" directory is added to .gitignore on master branch?
I think this case should be mentioned in docs...

kgkg on 20 Aug 2016

Cloned the gh-pages branch, dd npm install and npm start and worked fine. I am on a Mac though

vincyontop on 21 Jan 2017

I had the same problem. I solved not using the command "http-server swagger-editor" to start the editor. Instead I run the npm install and npm start inside the folder swagger-editor-master (https://github.com/swagger-api/swagger-editor)