Ionic deployment problem

[jasper-bot]

Hi all

Im trying to deploy my first netlify site. I am using ionic react with firebase.
When i deploy and go to the site with my desktop, all is working fine. When i go to the same link via my phone it says the page is not found. I have

-added a file _redirects with /* /index.html 200 (i downloaded my deploy code and it was there)
-Followed this tutorial: How to Deploy a React Application and did everything in there (enabled the api, set the domain in firebase, added the ionic/cli dependency, …)
-there is an index.html in my deploy code

I dont dare to link my site as this is a test deploy (i took it offline) to try and understand netlify with ionic and i havent yet added all the security for the firebase backend

Build settings:

build log:
7:50:23 PM: Build ready to start
7:50:25 PM: build-image version: 8925038cf853b22d6397cdcb9904ac88b66bb383 (focal)
7:50:25 PM: build-image tag: v4.5.0
7:50:25 PM: buildbot version: f344a535fc9e872014eaaa404a4e12d2d8b86d78
7:50:25 PM: Fetching cached dependencies
7:50:25 PM: Starting to download cache of 230.5MB
7:50:26 PM: Finished downloading cache in 1.144866417s
7:50:26 PM: Starting to extract cache
7:50:35 PM: Finished extracting cache in 9.245002789s
7:50:36 PM: Finished fetching cache in 10.479162417s
7:50:36 PM: Starting to prepare the repo for build
7:50:36 PM: Preparing Git Reference refs/heads/master
7:50:37 PM: Parsing package.json dependencies
7:50:38 PM: Starting build script
7:50:38 PM: Installing dependencies
7:50:38 PM: Python version set to 2.7
7:50:38 PM: Started restoring cached node version
7:50:41 PM: Finished restoring cached node version
7:50:42 PM: v16.13.1 is already installed.
7:50:42 PM: Now using node v16.13.1 (npm v8.1.2)
7:50:42 PM: Started restoring cached build plugins
7:50:42 PM: Finished restoring cached build plugins
7:50:42 PM: Attempting ruby version 2.7.2, read from environment
7:50:44 PM: Using ruby version 2.7.2
7:50:45 PM: Using PHP version 8.0
7:50:45 PM: Started restoring cached node modules
7:50:45 PM: Finished restoring cached node modules
7:50:45 PM: Started restoring cached go cache
7:50:45 PM: Finished restoring cached go cache
7:50:45 PM: go version go1.16.5 linux/amd64
7:50:45 PM: go version go1.16.5 linux/amd64
7:50:45 PM: Installing missing commands
7:50:45 PM: Verify run directory
7:50:47 PM: ​
7:50:47 PM: ────────────────────────────────────────────────────────────────
7:50:47 PM: Netlify Build
7:50:47 PM: ────────────────────────────────────────────────────────────────
7:50:47 PM: ​
7:50:47 PM: ❯ Version
7:50:47 PM: @netlify/build 20.0.4
7:50:47 PM: ​
7:50:47 PM: ❯ Flags
7:50:47 PM: baseRelDir: true
7:50:47 PM: buildId: 61abb86f69aa9c0007e72637
7:50:47 PM: deployId: 61abb86f69aa9c0007e72639
7:50:47 PM: ​
7:50:47 PM: ❯ Current directory
7:50:47 PM: /opt/build/repo
7:50:47 PM: ​
7:50:47 PM: ❯ Config file
7:50:47 PM: No config file was defined: using default values.
7:50:47 PM: ​
7:50:47 PM: ❯ Context
7:50:47 PM: production
7:50:47 PM: ​
7:50:47 PM: ────────────────────────────────────────────────────────────────
7:50:47 PM: 1. Build command from Netlify app
7:50:47 PM: ────────────────────────────────────────────────────────────────
7:50:47 PM: ​
7:50:47 PM: $ npm run build
7:50:47 PM: > brechtskookboek@0.0.1 build
7:50:47 PM: > ionic build
7:50:48 PM: > react-scripts build
7:50:51 PM: Creating an optimized production build…
7:51:24 PM: Compiled successfully.
7:51:24 PM:
7:51:24 PM: File sizes after gzip:
7:51:24 PM: 248.29 KB build/static/js/4.a2199161.chunk.js
7:51:24 PM: 30.11 KB build/static/js/57.c69a6871.chunk.js
7:51:24 PM: 26.37 KB build/static/js/55.81e9bf33.chunk.js
7:51:24 PM: 10.76 KB build/static/js/10.a2dc05d7.chunk.js
7:51:24 PM: 10.29 KB build/static/js/7.e65696aa.chunk.js
7:51:24 PM: 7.89 KB build/static/js/26.271a7ec5.chunk.js
7:51:24 PM: 7.76 KB build/static/js/main.b96860f6.chunk.js
7:51:24 PM: 7 KB build/static/js/6.2ee63194.chunk.js
7:51:24 PM: 6.01 KB build/static/js/11.2ab68ca3.chunk.js
7:51:24 PM: 5.9 KB build/static/js/49.8d5aca07.chunk.js
7:51:24 PM: 5.55 KB build/static/js/polyfills-dom.ae13af0f.chunk.js
7:51:24 PM: 5.37 KB build/static/js/34.2f841fae.chunk.js
7:51:24 PM: 5.26 KB build/static/js/28.1e037d20.chunk.js
7:51:24 PM: 5.22 KB build/static/js/19.e960177b.chunk.js
7:51:24 PM: 4.74 KB build/static/js/5.599b593b.chunk.js
7:51:24 PM: 4.66 KB build/static/js/31.8329ce63.chunk.js
7:51:24 PM: 4.62 KB build/static/js/14.c85ce645.chunk.js
7:51:24 PM: 4.59 KB build/static/js/32.acc76f57.chunk.js
7:51:24 PM: 4.46 KB build/static/js/33.2496a8b6.chunk.js
7:51:24 PM: 4.35 KB build/static/js/25.a042b699.chunk.js
7:51:24 PM: 4.25 KB build/static/js/8.9a70e3e2.chunk.js
7:51:24 PM: 4.08 KB build/static/js/35.b3700a58.chunk.js
7:51:24 PM: 3.99 KB build/static/js/23.9c2d6951.chunk.js
7:51:24 PM: 3.79 KB build/static/js/36.5e4cb33d.chunk.js
7:51:24 PM: 3.69 KB build/static/css/4.532f36fa.chunk.css
7:51:24 PM: 3.59 KB build/static/js/39.2c8f6ae7.chunk.js
7:51:24 PM: 3.53 KB build/static/js/24.0476210f.chunk.js
7:51:24 PM: 3.45 KB build/static/js/9.e39c5604.chunk.js
7:51:24 PM: 3.41 KB build/static/js/41.21b0e188.chunk.js
7:51:24 PM: 3.41 KB build/static/js/12.945404a3.chunk.js
7:51:24 PM: 3.15 KB build/static/js/51.a61192bc.chunk.js
7:51:24 PM: 3 KB build/static/js/30.6047133a.chunk.js
7:51:24 PM: 2.87 KB build/static/js/38.cc0139ff.chunk.js
7:51:24 PM: 2.8 KB build/static/js/18.958b528e.chunk.js
7:51:24 PM: 2.5 KB build/static/js/16.5b4fc4b7.chunk.js
7:51:24 PM: 2.49 KB build/static/js/27.565cd576.chunk.js
7:51:24 PM: 2.45 KB build/static/js/20.1bc73381.chunk.js
7:51:24 PM: 2.35 KB build/static/js/21.e7a0aa6a.chunk.js
7:51:24 PM: 2.29 KB build/static/js/29.14469869.chunk.js
7:51:24 PM: 2.07 KB build/static/js/53.c7ea70fa.chunk.js
7:51:24 PM: 2.01 KB build/static/js/43.7954b43f.chunk.js
7:51:24 PM: 1.99 KB build/static/js/13.cff733e3.chunk.js
7:51:24 PM: 1.92 KB build/static/js/15.408261f3.chunk.js
7:51:24 PM: 1.92 KB build/static/js/40.dc534173.chunk.js
7:51:24 PM: 1.89 KB build/static/css/main.d0c6a374.chunk.css
7:51:24 PM: 1.73 KB build/static/js/58.bd9ef7ba.chunk.js
7:51:24 PM: 1.71 KB build/static/js/45.d917f372.chunk.js
7:51:24 PM: 1.71 KB build/static/js/47.5744ea6d.chunk.js
7:51:24 PM: 1.69 KB build/static/js/runtime-main.df33dab5.js
7:51:24 PM: 1.6 KB build/static/js/22.07e7bd2a.chunk.js
7:51:24 PM: 1.52 KB build/static/js/50.685f74de.chunk.js
7:51:24 PM: 1.4 KB build/static/js/59.16e3bb47.chunk.js
7:51:24 PM: 1.25 KB build/static/js/17.5249fc89.chunk.js
7:51:24 PM: 1.14 KB build/static/js/48.bcf5e8d6.chunk.js
7:51:24 PM: 964 B build/static/js/56.d32c320e.chunk.js
7:51:24 PM: 775 B build/static/js/46.545dd1b8.chunk.js
7:51:24 PM: 706 B build/static/js/44.aef836fa.chunk.js
7:51:24 PM: 701 B build/static/js/52.148d8834.chunk.js
7:51:24 PM: 688 B build/static/js/37.d1b46d09.chunk.js
7:51:24 PM: 485 B build/static/js/42.c9d8854a.chunk.js
7:51:24 PM: 476 B build/static/js/0.be1c0674.chunk.js
7:51:24 PM: 469 B build/static/js/54.1b8876b1.chunk.js
7:51:24 PM: The project was built assuming it is hosted at /.
7:51:24 PM: You can control this with the homepage field in your package.json.
7:51:24 PM: The build folder is ready to be deployed.
7:51:24 PM: You may serve it with a static server:
7:51:24 PM: npm install -g serve
7:51:24 PM: serve -s build
7:51:24 PM: Find out more about deployment here:
7:51:24 PM: Deployment | Create React App
7:51:24 PM: ​
7:51:24 PM: (build.command completed in 37.4s)
7:51:24 PM: ​
7:51:24 PM: ────────────────────────────────────────────────────────────────
7:51:24 PM: 2. Deploy site
7:51:24 PM: ────────────────────────────────────────────────────────────────
7:51:24 PM: ​
7:51:24 PM: Starting to deploy site from ‘build’
7:51:24 PM: Creating deploy tree
7:51:24 PM: Creating deploy upload records
7:51:25 PM: 0 new files to upload
7:51:25 PM: 0 new functions to upload
7:51:25 PM: Site deploy was successfully initiated
7:51:25 PM: ​
7:51:25 PM: (Deploy site completed in 234ms)
7:51:25 PM: ​
7:51:25 PM: ────────────────────────────────────────────────────────────────
7:51:25 PM: Netlify Build Complete
7:51:25 PM: ────────────────────────────────────────────────────────────────
7:51:25 PM: ​
7:51:25 PM: (Netlify Build completed in 37.8s)
7:51:25 PM: Starting post processing
7:51:25 PM: Post processing - HTML
7:51:25 PM: Post processing - header rules
7:51:25 PM: Post processing - redirect rules
7:51:25 PM: Post processing done
7:51:25 PM: Caching artifacts
7:51:25 PM: Started saving node modules
7:51:25 PM: Finished saving node modules
7:51:25 PM: Started saving build plugins
7:51:25 PM: Finished saving build plugins
7:51:25 PM: Started saving pip cache
7:51:25 PM: Site is live
7:51:25 PM: Finished saving pip cache
7:51:25 PM: Started saving emacs cask dependencies
7:51:25 PM: Finished saving emacs cask dependencies
7:51:25 PM: Started saving maven dependencies
7:51:25 PM: Finished saving maven dependencies
7:51:25 PM: Started saving boot dependencies
7:51:25 PM: Finished saving boot dependencies
7:51:25 PM: Started saving rust rustup cache
7:51:25 PM: Finished saving rust rustup cache
7:51:25 PM: Started saving go dependencies
7:51:25 PM: Finished saving go dependencies
7:51:25 PM: Build script success
7:52:08 PM: Finished processing build request in 1m42.644068131s

[hrishikesh]

Hi @jasper-bot,

You call this Ionic, but it seems like CRA app to me. In any case, could you share the repo?

[jasper-bot]

Here you go. Its an Ionic React project (so still react but using ionic components etc)

GitHub - Jasper-bot/brechts-kookboek-solid

[hrishikesh]

Could you share on what URL exactly you’re seeing a 404? The site seems to load fine for me, the redirects are also correctly setup.

[jasper-bot]

when im going directly to /login it gives a 404… when going to home, it redirects to login (like it’s supposed to) and works correctly

[luke]

Hi, @jasper-bot. Your site uses client side routing in the javascript. In order for this to work for direct links, a special “single-page application” (SPA) redirect rule is required.

There is a support guide about this here:

[Support Guide] Direct links to my single page app (SPA) don't work

Last reviewed by Netlify Support - August, 2023 If you’re building a Single Page Application (SPA), or an app that manages its own routes (url paths), you’ll want to add a _redirects file to your publish directory with the following line to take advantage of browser history pushstate: /* /index.html 200 You can read more information in our docs, which can be found here.

If you create that redirect, the direct links will work as required. If this doesn’t resolve it or if there are other questions, please let us know.

[jasper-bot]

I dont understand, ive done that.

I have the _redirects file with

/*   /index.html   200

but when going to /login, i still get the page not found error. But if im going directly to home, all works correctly.

Is there something else i need to add in the _redirects file?

[luke]

Hi, @jasper-bot. I get a 200 response for that URL:

$ curl --compressed -svo /dev/null https://<redacted site subdomain>.netlify.app/login  2>&1 | egrep '^< '
< HTTP/2 200
< cache-control: public, max-age=0, must-revalidate
< content-type: text/html; charset=UTF-8
< date: Wed, 08 Dec 2021 10:00:33 GMT
< etag: "27c60e78ed0dcd79039fd44dd57ce2f5-ssl-df"
< strict-transport-security: max-age=31536000; includeSubDomains; preload
< content-encoding: gzip
< vary: Accept-Encoding
< content-length: 548
< age: 0
< server: Netlify
< x-nf-request-id: 01FPCQSM6KSNZJXVAEXE8NNQ0N
<

If you are stilling getting not found errors locally, my best guess is that your local system’s service worker has cached them. We have a support guide about service workers here:

[Support Guide] Understanding & unregistering service workers

Last reviewed by Netlify Support - August, 2023 A service worker is a script that your browser runs in the background to accomplish a variety of tasks. Browsers cache service workers for 24 hours by default, and don’t update them when you reload your page. Therefore, you may have a service worker on your site which could prevent you from seeing the latest and greatest changes that you’ve made. If you suspect a service worker is causing this issue, I recommend disabling/removing the service wor…