404 error for every page

🙋Get Help
,
1

Hey there, I’ve seen many people talking about 404 error they run into when connecting their own Wordpress site and I tried to solve my problem, but so far with no luck.

This is the error I receive in the console:

image
image839Ă—98 5.49 KB

And this shows up in the terminal:

image
image832Ă—218 5.02 KB

Seems to happen to every page, although they are existing on my Wordpress site.

If I don’t specify the homepage in frontity.settings.js for @frontity/wp-source, it doesn’t throw an error, but then it fetches only the archived posts.

image

Deployed version of a site: https://rounda-77hap5kef.vercel.app/
Repository: https://github.com/aivarsyo/Rounda
Rest API: https://aivars.dk/admin.Rounda/wp-json

Can’t exactly figure out what causes it, but it’s weird as when I enter in url “/home” or “/test-page” which are existing pages on the Wordpress side, I can see this content at frontity.state.source.

2

Okay, so apparently Frontity didn’t like that my Wordpress folder starts with a capital letter. Once I changed it, the error went away and state.router.link shows me the right info about every page. It’s a bit confusing as I have another Frontity project where the Wordpress folder starts with a capital letter as well and no issues came up there, so I didn’t even think at first that could be a problem. I’ll just leave it here in case someone stumbles upon the same problem.

1 Like
3

Hi @aivars.lejnieks,

Glad you were able to solve your issue.
By “WordPress folder” do you mean the folder name in the file system? If it’s that, I don’t know what could be going on there.

@mmczaplinski any thoughts on this issue?

4

@juanma I’m not entirely sure.

@aivars.lejnieks Are you perhaps referring to the fact that https://aivars.dk/admin.Rounda/wp-json (note the capital R) doesn’t work, whereas https://aivars.dk/admin.rounda/wp-json does work?

5

Yes, it was exactly that :wink: I changed it from a capital R to r and it worked.
What was weird about it that when I checked frontity.state.source with an existing error, it was retrieving some data from API, so I’m not sure how it works.

6

@aivars.lejnieks So, I think this was just a typo, correct?

The WP REST API will not return anything if you use the URL with the incorrect casing (like https://aivars.dk/admin.Rounda/wp-json)

However, I would be also interested to see the other project that you mentioned where the incorrect casing did work. Maybe there is some inconsistency in how Frontity treats those URLs

1 Like
7

Not a typo, at that moment I had it called https://aivars.dk/admin.Rounda/wp-json in both - frontity.settings file and the URL itself, then I changed the URL (Wordpress folder) to admin.rounda and the same for settings file, and it worked. :wink:

This is another project I’m doing with Frontity and it works with capitalised folder name.


https://aivars.dk/admin.AgnePortfolio/wp-json

I need to note that in the development process on local machine it’s without “admin” in the URL, but it behaves the same way.

8

All right, I see but on the https://agne-portfolio.vercel site the state.source.api is (correctly) https://aivars.dk/admin.AgnePortfolio/wp-json

So, as far as I can tell, everything works correctly because if you try to go to https://aivars.dk/admin.agnePortfolio/wp-json (lowercase a), this link does not return anything. So I think that the issue that you saw did not have anything to do with Frontity.

Hmm, I think that this could not have worked. As far as I can tell, you have exactly match the casing of the URL of your REST API:

For https://aivars.dk/admin.AgnePortfolio/wp-json (uppercase), if you go to https://aivars.dk/admin.agnePortfolio/wp-json (lowercased version), it returns a 404.

For https://aivars.dk/admin.rounda/wp-json (lowercase), if you go to https://aivars.dk/admin.Rounda/wp-json (uppercased version it returns a 404.

PS. I can’t tell if you’re the author but I really like the illustrations on https://agne-portfolio.vercel.app/ :slight_smile:

1 Like
9

Same problem here.

When the URL at state.source.url contains a capital letter (properly written according to the project’s name/folder) and in combination with state.source.homepage, every call to the website returns a 404 error.

Frontity 1.13.0

10

Hi @alejocarependejo,

If you get an error when accessing your REST AP i (like in this case → https://aivars.dk/admin.Rounda/wp-json) this is something that doesn’t really have to do with Frontity but with the Wordpress installation

In order to work with Frontity you have to first assure you can access the REST API of your Wordpress

If you think the problem is somewhere else, can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions of technical issues with specific code

11

Hey @juanma,

thanks for your answer.

The problem totally seems to be in Frontity, so I am just going to paint it for you…

This works
image

Also this

{
  "name": "@frontity/wp-source",
  "state": {
    "source": {
      "url": "http://localhost/Tele/"
    }
  }
}

and this

{
  "name": "@frontity/wp-source",
  "state": {
    "source": {
      "url": "http://localhost/tele",
      "homepage": "/home"
    }
  }
}

but not this (404 Error)

{
  "name": "@frontity/wp-source",
  "state": {
    "source": {
      "url": "http://localhost/Tele",
      "homepage": "/home"
    }
  }
}

PS: How can you preview post before posting? :thinking:

12

Hi @alejocarependejo,

As setting the state.source.homepage overrides the / route, you should set state.source.postsPage as well in order to be able to access the posts archive in a different route.

You can find more info in the docs: state.source.homepage

13

@juanma

You didn’t get it. Please read carefully my last post again and notice the Ts at “tele” under url.

15

@luisherranz any thoughts here?

18

It seems like a bug to me. @alejocarependejo can you investigate it and if it is really a bug open an issue in https://github.com/frontity/frontity? Thanks!

You can install the Embedded mode plugin in your WordPress: https://github.com/frontity/frontity-embedded-proof-of-concept. It is not the final version, but it should make your previews work just fine.

1 Like