0

I have created documentation for my Django app using apidoc library. It creates docs using angular. App is running on Heroku.

Docs are working nicely when I open index.html file, but I cannot open them via http://localhost:5000/docs.

Firstly I got this error:

"Variables and attributes may not begin with underscores: '__' " , which I was able to bypass by putting {% verbatim %} and {% endverbatim %} into the index.html file. (Which I'm not very happy with in the first place and would like to do it some other way).

Then the page is stuck on the loading screen, but when I open it in Chrome I have the following error:

"Uncaught SyntaxError: Unexpected token <" in polyfill.js:1 and require.min.js:1

And also 3 warnings:

"Resource interpreted as Stylesheet but transferred with MIME type text/html"

in vendor/bootstrap.min.cs, vendor/prettify.css and css/style.css

We are using apidocs also in other project with Node where it works perfectly, so I think it's an issue with Django. Since the documentation is generated automatically, I would prefer to introduce changes into the app, not docs. I tried it on Chrome and Safari.

My questions 1. What can I do to make it work? 2. How can I make Django compatible with Angular without putting {%verbatim%} tags into index.html?

Here is my controller:

from django.shortcuts import render

def show_docs(request):
    return render(request, 'index.html')

and url_pattern:

from django.conf.urls import include, url
from django.contrib import admin
admin.autodiscover()
import my_app.controller
from django.views.decorators.csrf import csrf_exempt

urlpatterns = [
    url(r'^docs/', my_app.controller.show_docs),
]

index.html head:

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Loading...</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="vendor/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="vendor/prettify.css" rel="stylesheet" media="screen">
  <link href="css/style.css" rel="stylesheet" media="screen, print">
  <link href="img/favicon.ico" rel="icon" type="image/x-icon">
  <link href="css/apidoccustom.css" rel="stylesheet" media="screen, print">
  <script src="vendor/polyfill.js"></script>
</head>

edit: Thanks to answer from hubert, I was able to find the source of the problem. It turns out, that Django doesn't work that good with RequireJS, which is used by api docs.

I had to add the following changes to the generated code to make it work: Points 1-4 are for index.html, point 5, 6 are for main.js:

  1. Add this line above tag:

{% load static %}

  1. Add "{% static" + " %}" tags to all tags so it looks like this:

<link href="{% static "vendor/bootstrap.min.css" %}" rel="stylesheet" media="screen">

  1. Add the same static tags to tags with polyfill.js and require.min.js:

<script src="{% static "vendor/polyfill.js" %}"></script> <script data-main="{% static "main.js" %}" src="{% static "vendor/require.min.js" %}"></script>

  1. Add {% verbatim %} at the beginning of and {% endverbatim %} at the end of , BUT BEFORE with require.min.js!

  2. In main.js add following lines to paths at the beginning of the file:

apiProject: './api_project.js', apiData: './api_data.js',

  1. Change lines:

'./api_project.js', './api_data.js',

to:

'api_project', 'api_data',

Community
  • 1
  • 1
mstechly
  • 15
  • 8

1 Answers1

1

From this two errors:

"Uncaught SyntaxError: Unexpected token <" in polyfill.js:1 and require.min.js:1
"Resource interpreted as Stylesheet but transferred with MIME type text/html"

I would assume that there is something wrong with loading your static files. Probably you have 404 or 500 on them and django loads then default route. Check if you have correct routing for static files.

Hubert
  • 42
  • 6