I'm trying to host my ionic 4 app on a webserver.
I've copied the WWW folder to the server and i'm encountering errors and a white blank screen
I've tried using ionic cordova platform add browser then copy the www folder to my webserver and still same errors.
same thing by running index.html on my local machine.
Do I need a server that supports node to serve my app?
any help would be much appreciated.
Related
I’m unfortunately having difficulty deploying my ionic project for web. No matter what I do, commands such as 'ionic build, ‘ionic build --prod’, ‘ng build --prod’, or whatsoever always create a www folder that is incorrect. The index.html in this www folder is always blank when viewed from a browser.
I’ve tested this issue on other ionic projects as well (just generated some from templates) and the same issue occurs here, with the index.html in the www folder always being displaying a blank site. If possible, I’d appreciate any help if that’s OK!
ionic cordova platform add browser
ionic cordova run browser
ionic cordova build browser --prod
For testing purpose use ionic serve . It will rebuild automatically every time when you update your code.
have you changed the base href in index.html from
base href="/"
to
base href="."
After generating Android build and inspect within Google chrome.
The url in app should be file:///android_asset/www/index.html (Image2)
But always getting localhost.
Why its showing localhost:8080 …?? (image1)
The url in app should be file:///android_asset/www/index.html
But its running in localhost://8080
yes, Ionic always getting node(npm) as a localhost server
I want to publish my app as PWA so what i did is
insert this script to index.html
<!--script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script-->
then install
npm run ionic:build --prod
it looks like it deploy it but my questions are:
what files I need to upload to host for publish the app as PWA?
why when I change something in the app and run ionic serve nothing changed and it changed only in the index.html of the WWW folder? why?(because now it's PWA??)
when I open www folder and I run open index.html when i press on button that open alert dialog it not open that. why?
when I run the command? only in the end of development?
Run
ionic cordova platform add browser
ionic build browser --prod --release
Then go to [project_folder]/platforms/browser/www and copy the content at you http server.
Don't bother with Cordova for a PWA. Just use npm run build --prod and upload the /www folder.
PWA is more of a collection of concepts, so it's not just "on" or "off". At a minimum though you probably want to add a manifest file so you can make it more "app like" by hiding the browser frame, setting your icon, app name etc. Uncommenting the line to add service worker doesn't magically make it a PWA if you haven't put anything "useful" into service worker (which you may or may not need to do, depending on how your app works). Also note that you will need HTTPS to use a service worker.
You will also need to manually remove the line from index.html that includes cordova.js (which will be a 404 error if you just upload /www).
I use this command for building web app
ionic cordova build browser
Then copy the contents from IONIC-PROJECT/platforms/browser/www to the web server.
I have created my first Ionic app using CLI, so I did:
ionic start my-project --v2 blank
I run ionic serve command inside the project's folder, and I can see the brand new project in the browser. I did some changes in the project and run ionic serve again, perfectly fine.
I created another project with CLI:
ionic start second-project --v2 blank
Then, I run ionic serve from inside the second project's folder and the first one is actually loaded, not the second one.
What did I miss?
I didn't try to clear the browser history but I remembered that I did play around with Service Workers in my first app, it was a PWA.
So I ran ionic serve then opened Chrome's Developer Tools and found out that it was still there, so I Unregistered the service worker and deleted it under the Cache Storage section.
Stopped and ran ionic serve again and it loads the right app now.
This is how I solved this issue.
Chrome was still using the cache from that previous app. I ran ionic serve it loaded my wrong app, then I opened the Developer Tools, and under Applications tab, Service Workers option, it was there.
I clicked the 'Unregister' option, then under 'Cache Storage' section I deleted the registered previous application's cache with the right click option. This solved my problem.
I am trying to run a LoopBack server with ionic client, but I am getting the "Error: Cannot GET /cordova.js" error.
My code can be cloned from github at: https://github.com/giladba/BetterTrader2.git
Problem description:
I created a LoopBack application, and at the client directory I created an Ionic tabs application.
After that, I ran these commands on the client directory:
ionic platform add android
ionic build android
In server/middleware.json I redirected the index.html folder to the Ionic www folder like so:
"files": {
"loopback#static": {
"params": "$!../client/www"
}
but when I run node . I get cordova.js not found when I open http://localhost:3000/ in the browser:
note that even though there is an exception the application seems to be working fine.
Any idea how I can fix the exception?
Cordova gets injected into the app when deployed on a mobile device. When you use the ionic serve command locally, for example, cordova.js always 404s. You don't need it unless you're on a mobile device in a cordova app, and it will be deployed automatically in that case.