Page not found

I have an ionic web app I’m trying to host on Netlify. When the page loads, it immediately navigates to my app’s login page (which is the default page in the app). When I try to reload the page, I get a page not found error.

I opened a terminal window to the www folder for my app and started an HTTP server, when I load the site, it loads as expected, then opens the login pave. When I reload the page, I get the page not found error. Here’s the local http-server output:

Microsoft Windows [Version 10.0.19042.746]
(c) 2020 Microsoft Corporation. All rights reserved.

Starting up http-server, serving ./
Available on:
  http://192.168.86.56:8080
  http://192.168.83.1:8080
  http://192.168.189.1:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server
[2021-01-17T16:23:57.626Z]  "GET /login" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36"
(node:27432) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
(Use `node --trace-deprecation ...` to show where the warning was created)
[2021-01-17T16:23:57.632Z]  "GET /login" Error (404): "Not found"

Any ideas what I’m doing wrong?

Just for grins, I:

  • Created a new blank project
  • Navigated to the new folder
  • Executed ionic build --prod
  • Changed to the project’s www folder
  • Executed http-server to start a local http server
  • navigated to the localhost location/port

The app loads perfectly, but when I try to reload, I get the not found error.

This is on Windows with the latest Ionic CLI

C:\Users\john\build-test\www>http-server
Starting up http-server, serving ./
Available on:
  http://192.168.86.56:8080
  http://192.168.83.1:8080
  http://192.168.189.1:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server
[2021-01-19T13:35:00.155Z]  "GET /home" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36"
(node:5996) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
(Use `node --trace-deprecation ...` to show where the warning was created)
[2021-01-19T13:35:00.160Z]  "GET /home" Error (404): "Not found"

Executed the same process on macOS with the same result (but slightly different output):

~/dev/build-test/www(main*) » http-server                        johnwargo@mini
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.86.50:8080
  http://192.168.86.48:8080
Hit CTRL-C to stop the server
[2021-01-19T13:52:27.668Z]  "GET /" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
(node:80510) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
[2021-01-19T13:52:27.735Z]  "GET /styles.b90531eb9c5954f757a1.css" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
[2021-01-19T13:52:27.737Z]  "GET /runtime-es2015.72e154c6c41d99a3840f.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
[2021-01-19T13:52:27.740Z]  "GET /polyfills-es2015.91389ecfa80f1063947d.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
[2021-01-19T13:52:27.741Z]  "GET /main-es2015.f14e06aa710ec5b382ce.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
[2021-01-19T13:52:27.870Z]  "GET /common-es2015.32207e7603ff9baca653.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
[2021-01-19T13:52:27.871Z]  "GET /15-es2015.5b5e1f16bcc8195a83c1.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
[2021-01-19T13:52:27.872Z]  "GET /10-es2015.775c74753705e6ce0950.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
[2021-01-19T13:52:27.901Z]  "GET /2-es2015.05eed7de919f5db013e3.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
[2021-01-19T13:52:27.999Z]  "GET /assets/icon/favicon.png" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
[2021-01-19T13:52:28.033Z]  "GET /60-es2015.68bc8ede1f90da11ec06.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
[2021-01-19T13:52:28.033Z]  "GET /56-es2015.c5de253468fa85eef715.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
[2021-01-19T13:52:28.035Z]  "GET /11-es2015.2d1c7d3918cee21af685.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
[2021-01-19T13:52:29.700Z]  "GET /sw-36.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
[2021-01-19T13:52:29.701Z]  "GET /sw-36.js" Error (404): "Not found"
[2021-01-19T13:52:30.086Z]  "GET /home" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
[2021-01-19T13:52:30.087Z]  "GET /home" Error (404): "Not found"
[2021-01-19T13:52:31.129Z]  "GET /sw-36.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
[2021-01-19T13:52:31.130Z]  "GET /sw-36.js" Error (404): "Not found"

not sure if it helps, but issuing command to serve as SPA helps? I would expect not, but is something to include as well, in order to have the router work properly…

http-server-spa www index.html

etc…

Am I wrong in thinking that I should be able to create a new project, build it for production, then serve it somewhere? That’s what the CLI takes care of. I shouldn’t have to install another server process to run this, the built project should run out of the box on netlify, via http-server, wherever, right?

The ionic cli builds the assets

A separate action is needed to deploy on a server

Netlify or in my case Firebase

Nginx should word, or any http server as long as the config is right

In most cases it should suffice to have the content of the www folder copied as is

Specifically, you need to ensure all your base are belong to index.html.

Yes, I know that. My point it that the ionic-build --prod command is supposed to generate a deployable set of files. When I go in after that and execute a local HTTP server, the site should work in the browser.

It doesn’t. I’ve proven this with my project, a new project on Windows, and a new project on macOS. oh, and on Netlify.

I’m not asking how to deploy to a server. I’m asking, why doesn’t this work? I’ve tried this three different ways on two different operating systems. I’m pretty sure its broken. Can someone try this out and see if you get different results? Its not working any way I’ve tried it, but I’m trying to figure out if I’m doing something wrong.

Can you try installing http-server-spa using npm and then serve like this? It works with me.

http-server-spa www index.html

yeah, that works - but doesn’t help me fix the issue with hosting on Netlify. Let me try some other options to get this to work.

Then it is likely the rewrite to index.html for all routes that is not enabled?

yeah, that makes sense - I was not aware of that on netlify. I moved the site to Firebase Hosting and they automatically configure those redirects. My API’s there anyway, so it makes sense for the site to be hosted there too. Thanks for your help with this.

1 Like

Well, at firebase init time you still need to select “yes” to do the rewrites. If you don’t, you have the same issue. So, not fully automagically.

Glad you got it solved.