404 Not Found The page you were looking for could not be found

🙋Get Help
1

Hello,

we are trying out Frontity to see if we should use it in a project. We get this page when we try to browse to our site in Chrome:

Screen Shot 2021-04-15 at 11.56.43 AM
Screen Shot 2021-04-15 at 11.56.43 AM3840×1798 289 KB

we have a Dockerized setup consisting of 4 containers:

  • myapp-ui: the container running frontity. this was setup using the boilerplate described in Quick start guide - Frontity Docs and is running npx frontity dev
  • myapp-nginx: the container to which myapp-ui forwards requests
  • myapp-wordpress: the container to which myapp-nginx forwards requests. this is an alpine container running wordpress on PHP-FPM (7.4-php-fpm-alpine)
  • myapp-mysql: the MySQL container

The good thing is that we have tested there is no networking issue. The containers are all able to reach each other. We also don’t see any errors in the logs.

myapp-nginx shows this:

2021/04/14 21:30:49 [notice] 7#7: *2 "/wp-admin$" does not match "/wp-json/wp/v2/posts", client: 172.23.0.2, server: , request: "GET /wp-json/wp/v2/posts?_embed=true&slug=myapp HTTP/1.1", host: "myapp-nginx"
2021/04/14 21:30:49 [notice] 7#7: *2 "^(/[^/]+)?(/wp-.*)" matches "/wp-json/wp/v2/posts", client: 172.23.0.2, server: , request: "GET /wp-json/wp/v2/posts?_embed=true&slug=myapp HTTP/1.1", host: "myapp-nginx"
2021/04/14 21:30:49 [notice] 7#7: *2 rewritten data: "/wp-json/wp/v2/posts", args: "_embed=true&slug=myapp", client: 172.23.0.2, server: , request: "GET /wp-json/wp/v2/posts?_embed=true&slug=myapp HTTP/1.1", host: "myapp-nginx"
172.23.0.2 - - [14/Apr/2021:21:30:50 +0000] "GET /wp-json/wp/v2/posts?_embed=true&slug=myapp HTTP/1.1" 200 12 "-" "node-fetch/1.0 (+https://github.com/bitinn/node-fetch)"
2021/04/14 21:30:50 [notice] 7#7: *4 "/wp-admin$" does not match "/wp-json/wp/v2/pages", client: 172.23.0.2, server: , request: "GET /wp-json/wp/v2/pages?_embed=true&slug=myapp HTTP/1.1", host: "myapp-nginx"
2021/04/14 21:30:50 [notice] 7#7: *4 "^(/[^/]+)?(/wp-.*)" matches "/wp-json/wp/v2/pages", client: 172.23.0.2, server: , request: "GET /wp-json/wp/v2/pages?_embed=true&slug=myapp HTTP/1.1", host: "myapp-nginx"
2021/04/14 21:30:50 [notice] 7#7: *4 rewritten data: "/wp-json/wp/v2/pages", args: "_embed=true&slug=myapp", client: 172.23.0.2, server: , request: "GET /wp-json/wp/v2/pages?_embed=true&slug=myapp HTTP/1.1", host: "myapp-nginx"
172.23.0.2 - - [14/Apr/2021:21:30:50 +0000] "GET /wp-json/wp/v2/pages?_embed=true&slug=myapp HTTP/1.1" 200 12 "-" "node-fetch/1.0 (+https://github.com/bitinn/node-fetch)"
2021/04/14 21:30:50 [notice] 7#7: *6 "/wp-admin$" does not match "/wp-json/wp/v2/media", client: 172.23.0.2, server: , request: "GET /wp-json/wp/v2/media?_embed=true&slug=myapp HTTP/1.1", host: "myapp-nginx"
2021/04/14 21:30:50 [notice] 7#7: *6 "^(/[^/]+)?(/wp-.*)" matches "/wp-json/wp/v2/media", client: 172.23.0.2, server: , request: "GET /wp-json/wp/v2/media?_embed=true&slug=myapp HTTP/1.1", host: "myapp-nginx"
2021/04/14 21:30:50 [notice] 7#7: *6 rewritten data: "/wp-json/wp/v2/media", args: "_embed=true&slug=myapp", client: 172.23.0.2, server: , request: "GET /wp-json/wp/v2/media?_embed=true&slug=myapp HTTP/1.1", host: "myapp-nginx"
172.23.0.2 - - [14/Apr/2021:21:30:50 +0000] "GET /wp-json/wp/v2/media?_embed=true&slug=myapp HTTP/1.1" 200 12 "-" "node-fetch/1.0 (+https://github.com/bitinn/node-fetch)"

myapp-wordpress shows:

172.23.0.5 -  14/Apr/2021:21:47:55 +0000 "GET /index.php" 200

further if we make a curl request from myapp-ui we get this:

/home/node # curl http://myapp-nginx/wp-json/wp/v2/posts?_embed=true&slug=myapp
/home/node # [{"id":1,"date":"2021-04-12T17:10:57","date_gmt":"2021-04-12T17:10:57","guid":{"rendered":"https:\/\/local.mysite.com\/myapp\/?p=1"},"modified":"2021-04-12T17:10:57","modified_gmt":"2021-04-12T17:10:57","slug":"hello-world","status":"publish","type":"post","link":"https:\/\/local.mysite.com\/myapp\/hello-world\/","title":{"rendered":"Hello world!"},"content":{"rendered":"\n<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/posts\/1"}],"collection":[{"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":0,"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"wp:attachment":[{"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]},"_embedded":{"author":[{"id":1,"name":"sjain68","url":"https:\/\/local.mysite.com\/myapp","description":"","link":"https:\/\/local.mysite.com\/myapp\/author\/sjain68\/","slug":"sjain68","avatar_urls":{"24":"http:\/\/0.gravatar.com\/avatar\/05ce5b0acb996948a553fe18edde87fc?s=24&d=mm&r=g","48":"http:\/\/0.gravatar.com\/avatar\/05ce5b0acb996948a553fe18edde87fc?s=48&d=mm&r=g","96":"http:\/\/0.gravatar.com\/avatar\/05ce5b0acb996948a553fe18edde87fc?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/users\/1"}],"collection":[{"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/users"}]}}],"replies":[[{"id":1,"parent":0,"author":0,"author_name":"A WordPress Commenter","author_url":"https:\/\/wordpress.org\/","date":"2021-04-12T17:10:57","content":{"rendered":"<p>Hi, this is a comment.<br \/>\nTo get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.<br \/>\nCommenter avatars come from <a href=\"https:\/\/gravatar.com\">Gravatar<\/a>.<\/p>\n"},"link":"https:\/\/local.mysite.com\/myapp\/hello-world\/#comment-1","type":"comment","author_avatar_urls":{"24":"http:\/\/1.gravatar.com\/avatar\/d7a973c7dab26985da5f961be7b74480?s=24&d=mm&r=g","48":"http:\/\/1.gravatar.com\/avatar\/d7a973c7dab26985da5f961be7b74480?s=48&d=mm&r=g","96":"http:\/\/1.gravatar.com\/avatar\/d7a973c7dab26985da5f961be7b74480?s=96&d=mm&r=g"},"_links":{"self":[{"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/comments\/1"}],"collection":[{"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/comments"}],"up":[{"embeddable":true,"post_type":"post","href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/posts\/1"}]}}]],"wp:term":[[{"id":1,"link":"https:\/\/local.mysite.com\/myapp\/category\/uncategorized\/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","_links":{"self":[{"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/categories\/1"}],"collection":[{"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/categories"}],"about":[{"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/taxonomies\/category"}],"wp:post_type":[{"href":"https:\/\/local.mysite.com\/myapp\/wp-json\/wp\/v2\/posts?categories=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}],[]]}}]

can anyone help us fix this? not sure what is the problem. If it matters we are running v5.4 of wordpress

bash-5.0# wp core version --allow-root
5.4
2

further we have set state.frontity.url and state.source.url to both http://myapp-nginx in frontity.settings.js. We also verified that if we run the app without using frontity we get normal WordPress screen of a freshly installed site.

3

we found the reason for this error. It happens because the URLs frontity sends back to the browser for AJAX requests are not correctly prefixed. In my post I said we have 4 containers but its actually more complicated than that. We also have a frontend container:

  • frontend: this container forwards requests of the form mydomain.com/myapp to the frontity container.

Our initial request to mydomain.com/myapp gets forwarded to Frontity but from there Frontity sends back an XHR to the browser to load mydomain.com/static/myapp.module.js. This call fails.

The fix is that Frontity should set the URL to mydomain.com/**myapp**/static/myapp.module.js. This URL will be correctly forwarded by our frontend to the Frontity container. Can anyone tell us how to do this?

In the settings file there is state.frontity.url but setting it to https://mydomain.com/myapp does not prefix the Frontity URLs with /myapp

4

there is a very long thread I found at Make the backend URL a global setting - #28 by mburridge but over there they are saying:

image
image1312×190 26.9 KB

and even though we set state.frontity.url to https://mydomain.com/myapp, Frontity drops the /myapp from the base url it uses for its assets.

5

In fact what we are observing is that state.frontity.url does not seem to matter at all. we can set it to whatever in:

const settings: Settings = {
  "name": "app-ui",
  "state": {
    "frontity": {
      "url": "https://does-not-matter",
      "title": "Test Frontity Blog",
      "description": "WordPress installation for Frontity development"
    }
  },

and the result is the same.