Default install, changed url but Internal Server Error is thrown

🙋Get Help
#1

Hello,

I am new to frontity and would like to get familiar but I’m having a hard time connecting to my local instance.

I followed the directions and was able to view the demo/default installation.

I wanted to see what my data looked like but instead I get an Internal Server Error. I don’t see any error in Chrome DevTools others than the error mentioned. I do however see an error in VSCode, the url it’s trying to reach returns a full page of JSON. So I am getting a response back. Please advise as to what I can check. What are the possible reasons this error is thrown?

I tried changing the wpsource from “url”: “localhost:8000” to “api”: “localhost:8000/wp-json”.
I’ve checked all suggestions as far as permalinks, default pages etc. I’ve disabled all plugins and renamed .htaccess, no luck :slight_smile:

NOTE: I’ve removed “http://” from my urls as I kept getting an error and couldn’t save.

Wordpress site Hosted locally from Docker (Windows 10) and runs without error. I can use and access the api using Postman.

Exact error in terminal: FetchError: request to localhost:8000/wp-json/wp/v2/posts?_embed=true&page=1 failed, reason: socket hang up
at ClientRequest.eval (webpack-internal:///./node_modules/node-fetch/lib/index.mjs:1465:11)
at ClientRequest.emit (node:events:376:20)
at ClientRequest.EventEmitter.emit (node:domain:470:12)
at Socket.socketOnEnd (node:_http_client:498:9)
at Socket.emit (node:events:388:22)
at Socket.EventEmitter.emit (node:domain:470:12)
at endReadableNT (node:internal/streams/readable:1305:12)
at processTicksAndRejections (node:internal/process/task_queues:80:21)

Thanks for any clues. There isn’t anything for me to upload to a repo as I’m using the default install and only changed the url and my wordpress sites is in dev and only accessible locally right now.

#2

Hi @rjustyjunk

Welcome to the Frontity community.

Sorry that you’re experiencing this problem just as you’re getting started with Frontity.

I think that the wpsource url property needs to have the protocol, so either http or https. What error were you getting? Why couldn’t you save? The content of the file shouldn’t prevent you saving.

Can you provide a link to a repo so that we can take a look at your code, or at least post the contents of your frontity.settings.js file. Also please run npx frontity info at the command prompt and post the output here.

#3

Hello and thanks for responding! My url property indeed has the http protocol…I removed it as mentioned in the note above as I was prompted with an alert stating I was new and could not post more than 2 links in a comment. By removing the http from my comment I could then save here in this message board, not in frontity.

image

As I mentioned the only thing I changed in the frontity.settings.js was my url. This is what I currently have

const settings = {
  "name": "fronitydemo",
  "state": {
    "frontity": {
      "url": "https://test.frontity.org",
      "title": "Test Frontity Blog",
      "description": "WordPress installation for Frontity development"
    }
  },
  "packages": [
    {
      "name": "@frontity/mars-theme",
      "state": {
        "theme": {
          "menu": [
            [
              "Home",
              "/"
            ],
            [
              "Nature",
              "/category/nature/"
            ],
            [
              "Travel",
              "/category/travel/"
            ],
            [
              "Japan",
              "/tag/japan/"
            ],
            [
              "About Us",
              "/about-us/"
            ]
          ],
          "featured": {
            "showOnList": false,
            "showOnPost": false
          }
        }
      }
    },
    {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
            "api": "http://localhost:8000/wp-json"
        }
      }
    },
    "@frontity/tiny-router",
    "@frontity/html2react"
  ]
};

export default settings;

Output from running npx frontity info

## System:
 - OS: Windows 10 10.0.19041
 - CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
 - Memory: 15.72 GB / 31.85 GB
## Binaries:
 - Node: 15.5.1 - D:\Program Files\nodejs\node.EXE       
 - npm: 7.5.4 - D:\Program Files\nodejs\npm.CMD
## Browsers:
 - Chrome: 88.0.4324.182
 - Edge: Spartan (44.19041.423.0), Chromium (88.0.705.74)
 - Internet Explorer: 11.0.19041.1
## npmPackages:
 - @frontity/core: ^1.10.1 => 1.10.1
 - @frontity/html2react: ^1.6.1 => 1.6.1
 - @frontity/mars-theme: ./packages/mars-theme => 1.5.0  
 - @frontity/tiny-router: ^1.3.2 => 1.3.2
 - @frontity/wp-source: ^1.11.1 => 1.11.1
 - frontity: ^1.14.1 => 1.14.1
## npmGlobalPackages:
 - frontity: Not Found
 - npx: Not Found


  System info copied in the clipboard!
  You can now paste it in the Frontity Community or GitHub issue.
#7

Hi @rjustyjunk

Thanks for providing that info. I suggest trying the troubleshooting steps here.

If you’re still having problems check if you have spaces in any directory names in the path to the directory with the Frontity project. It shouldn’t make a difference but I think this has fixed some issues for Windows users running Frontity in the past. Try putting your Frontity project in a directory that has no spaces in the name, and no spaces in the names of any parent directories. Does the project now work?

Also, I see you’re using very recent versions of node/npm. Try rolling them back to earlier versions with nvm. Does that fix the problem?

Hope this helps. Let me know how you get on with these suggestions.

#9

Thank you. I do not have any spaces in my directory names. So that I can make sure I am thoroughly debugging, can you explain why simply changing the url/api address would require a different/older version of node/npm?
Can you provide me with some insight on how I can debug this further? There must be a way to expose the actual error being thrown but I’m just not familiar enough yet.

#10

No, not really - I just thought it might be an idea to try it with more tried and tested versions of node/npm rather than cutting edge versions. Frameworks such as Frontity have usually been developed and tested on platforms that aren’t quite the latest, and more recent versions may throw up some unanticipated bugs/issues. It’s a simple change to make with nvm so thought it might be worth trying just to see.

It probably won’t make a difference but I thought it might be worth ruling it out as a possibility.

There’s some possible insights into the “socket hang up” error here.

You say it works with the demo site at test.frontity.org? Can you try it with a different installation of WordPress. Do you still get the same error?

#11

No worries, thanks for the response. So I dug deeper and found that I am not even getting a response in the Docker container where the request is taking place. I can run the same exact url and perform a GET in Postman successfully and I see the request in the Docker log.

So I went ahead and setup a local copy of the wordpress site, copy of the code, using the same db hosted in Docker. With this setup I am able to successfully see and retrieve the posts from my local wordpress running on xampp. I did initially receive the same Internal Server error however I realized that, in frontity.settings.js if you have an "," at the end of a line AND there isn’t another line following it, this error will be thrown. I fixed it by removing the comma after /wp-json.

I guess this is a partial answer but I’m wondering why my Docker instance isn’t working with frontity…can you tell me or direct me to where I can find out if the connect command converts localhost to 0.0.0.0 or to 127.0.0.1? Docker uses bridging for networking and possible frontity isn’t “aware”.

#12

Hi @rjustyjunk

Good to hear that you’ve made some progress on resolving this and that it works with Xammp. I don’t have enough knowledge of Docker to be able to answer your questions, though it’s obviously not an issue that will affect you when it comes to deploy your site, but I appreciate it’s something you might want to resolve in your development environment. @cristianbote can you help on this?