"Page not found" when trying to access API documentation

[d1ndra]

Describe the bug API documentation doesn't show, instead says "Page not found"

To Reproduce Steps to reproduce the behavior:

1. Go to home page / API list page
2. Click on any catalog
3. "Page not found"

Expected behavior List of APIs

Screenshots .

Version Info 1.1.0 of apigee-devportal-kickstart-drupal

[jacine]

Hello @d1ndra!

I'm not able to reproduce this with a fresh install, using the composer create-project... instructions in the readme.

A typical "Page not found" Drupal page looks like this (below), which is different from what you're seeing. Note the difference in the title and body text.

Here's a screenshot of what the page should look like. The content of these pages use SmartDocs and their content is loaded with JavaScript:

It looks like simply reloading the page might resolve the issue, but if that doesn't work, can you please let us know the following details:

• Do you have drupal/apigee_api_catalog installed, and if so, which version? You should have 1.0.0-rc1. You can use the composer show command to get this information quickly.
• Did you run the Drupal installer to install this today, or try to upgrade from a previous version? If you tried to upgrade, reinstalling might solve the problem.

Thanks! Jacine

[cnovak]

That "Page not found" is coming from the SmartDocs Angular application that is embedded into the page. Also note that the SmartDocs app is being loaded from a CDN.

I also tested this locally to make sure I don't see any issues:

1. composer create-project apigee/devportal-kickstart-project:8.x-dev kickstart --no-interaction
2. cd kickstart
3. composer quick-start
4. When browser opens up to home page, click on "APIs"
5. Click on "Communication" or any other API
6. Page renders properly

There are a few other things that could help use figure this out besides with @jacine pointed out:

1. If you open Chrome developer tools or similar tool on other browsers, do you see errors in the console?
2. The SmartDocs Angular application is being pulled from a CDN, could the CDN be inaccessible? If you look at Chrome network tab, reload the page. Are the files highlighted in this screenshot loading? Want to make sure the browser is loading the files from https://www.gstatic.com/smartdocs/1.0.1, such as [https://www.gstatic.com/smartdocs/1.0.1/main.js].
3. The SmartDocs Angular application loads the spec from session storage. Open the Application tab in Chrome developer tools and you should see a Session Storage key of "specs" for the spec you are loading:

[d1ndra]

Hi @jacine, @cnovak Thanks for the quick response. I'd faced this issue in another setup so I had done a fresh install of the site and continued to face this error.

1. drupal/apigee_api_catalog is at 1.0.0-rc1 as per composer show
2. The smartdocs files are loaded via gstatic.com... and are accessible
3. The specs variable in session storage has the corresponding open API spec when page is accessed

However the console does have some errors:

1. CORS issue when trying to access Open API spec via localhost, it's trying to access the API spec via my system's machine name instead. This error is seen intermittently and is not reproducible: Error text:

   Access to XMLHttpRequest at 'http://<machine-name.domain>/drupal8-devportal/web/sites/default/files/apidoc_specs/petstore.yaml' 
   from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 
   header is present on the requested resource.

2. Angular error, this is seen when trying to access the API documentations.

   Uncaught TypeError: Cannot read property 'attributes' of undefined
   at Object.Angular (detector.js:535)
   at detector.js:567
   at detector.js:645

[cnovak]

Thanks for the info @d1ndra, that helps explain the problem.

The SmartDocs module gets the URL for the spec in public filesystem, which will either be the file_public_base_url setting in your settings.php file or will use the base URL of the site.

You should not have to set the file_public_base_url however unless your public files are not in a default place. The base url is determined by the HTTP host header or the PHP $_SERVER vars which should be set by your web server.

Are you sure you have configured your web server properly? There are many tutorials on the web, or you can look at instructions on how to host the site on your local machine. It could also be that your web server is defaulting back to the server's host name, which is localhost because it is not set?

It looks like you installed Drupal CMS in s subdirectory which may be causing you issues. The path to the file from your configuration is http://<machine-name.domain>/drupal8-devportal/web/sites/default/files/apidoc_specs/petstore.yaml, but it should be http://<machine-name.domain>/sites/default/files/apidoc_specs/petstore.yaml if Drupal is in your web server's document root. I think you did not set your webroot properly. If you are using Apache, make sure to set the DocumentRoot in Apache's httpd.conf to the path of your Drupal directory. If you are using Nginx, check out the Nginx configuration for Drupal. You can see the Nginx configuration sets root to be the place Drupal is installed on the server.

Will close issue for now, but reopen if you have any more questions.