I am new to Ionic and have made my first app that runs perfectly locally using ionic serve , but I am having troubles running it on my web server.
I have read the docs and various other sources that seem to imply that you just run a ionic build --prod and then copy the www folder to your web server and away you go but I just got a white screen and no errors.
I then tried adding cordova platform browser and building using ionic cordova build browser and hosting the built files from this, but same result.. Is there something I'm missing here?
I had this the other day. First off, be sure you aren't relying on any Cordova plugins as they won't work in the browser.
You do this:
ionic cordova platform add browser
ionic build --prod
then copy the www in platforms\browser\www to the webserver
This is just a basic deploy. There are tutorials for making the app a PWA (which means it can be installed via the browser as an app on your device home screen).
Deploy with NodeJs
To create the file server.js in you project directory root
const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname + '/www'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname+'/www/index.html'));
});
app.listen(port);
console.log(`RUNNING ON PORT ${port}`);
and runing command ionic build --prod && node server.js
Related
I have a mobile application in ionic and have uploaded it in playstore. Now I want to host it in a website. How do i do that with ionic 4 and mysql?
I have tried visiting the ionic documentation about PWA but they are using firebase.
ng add #angular/pwa
ionic build --prod --service-worker
ionic build --prod
if you not need Cordova use:
npm run ionic:build --prod
and copy all from the www folder to your Web Server
or if you need Cordova
then Use Browser Platform for websites.
ionic cordova platform add browser
ionic cordova build browser --prod --release
and copy all from the /platforms/browser/www folder to your Web Server
i just created an Ionic project and i added capacitor on it ( with a "npx cap init" ), i set up my service worker ( i just left the <--- ...... ---> in my index.html ). Then i run " ionic serve " from my laptop, and i tried to access it from my mobile phone ( so basically i did a personnal hotspot with my mobile internet, i mean my laptop and mobile phone have the same internet connection ), and it works.
I can access to my ionic app from my mobile whereas it is runt on my laptop, but now i'd like to add/download this app on my mobile phone and use it offline.
Do you know any way i can do that ?
Thanks a lot !
Capacitor works by serving your static assets (like javascript and HTML) from a self-hosted web server, whose behavior is dependent on your capacitor.config.json. This behaviour is most obvious if you look at the source code.
If you have server.url specified in capacitor.config.json, Capacitor's self-hosted server will act as a proxy for the server you point to.
If you do not have server.url specified, Capacitor's self-hosted web server will serve the files that were bundled with your native app.
Based on this, when you are creating the build for your phone, you will need to remove the server url property from your capacitor.config.json. You may also need to generate the capacitor.config.json on the fly in order to separate your development and production needs.
Note that the Ionic Framework and Capacitor have two completely different deployment paths; this answer assumes that you use Capacitor to create your builds.
Of course you can make an app and install it on your phone - that is basic purpose of Capacitor. Docs for android, docs for ios
Steps are similar to this (example for android):
Install Android Studio
At capacitor.config.json define techSupportEmail
npx cap add android
npm run build && npx cap copy android && npx cap open android
Enable developer mode on your phone
Plug your phone in
In Android Studio choose your device and hit "play" button
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 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.
I am building a hybrid app using ionic 3 .While I try to run it in browser it gives me a "Missing Command Error".It runs on android and ios though.But i wanted to test it on browser too.
Testing your app in a browser is as simple as running the serve command in your project's root folder.
ionic serve
if you want to run in the ionic lab then run command.
ionic serve -l