I have an ionic 3 app. It builds and runs on Android and iOS as expected. Usually the app can be tested in a browser by executing ionic serve shell command and then navigating to http://localhost:8100/ URL in the browser.
But is there a way to deploy this ionic app to a web browser as a platform, so it could be later deployed to a web server and be publicly available?
You can add browser as a platform, then build it and copy the /www folder on your webserver.
ionic platform add browser (or if using ionic-cli v3 ionic cordova platform add browser)
ionic build browser --prod (or if using ionic-cli v3 ionic cordova build browser --prod)
Copy files from the /www folder to your webservers root directory.
Related
I am uploading my Ionic Capacitor app to TestFlight using a paid developer account and it continues to be configured to use the localhost hostname for the URL.
I have tried a plethora of commands for building the project out to XCode.
ionic capacitor run ios --external --prod
ionic build
ionic cap sync
ionic cap copy
ionic capacitor build ios --prod
I am still learning the process, is it supposed to run on localhost when you use TestFlight?
This is the capacitor.config.ts file:
import { CapacitorConfig } from "#capacitor/cli";
const config: CapacitorConfig = {
appId: "com.traineraid",
appName: "Traineraid",
webDir: "build",
bundledWebRuntime: false,
server: {},
};
export default config;
One of the main reasons I am having difficulty is the I have firebase emulators set up that run instead of the production server when using a localhost URL, so when open the app using TestFlight on my phone, it warns me it is trying to use the emulators, which I don't have running, and it obviously can't work.
Is there a step of piece that is missing from this that is causing these problems? Or is this how it actually is supposed to operate and the code is what needs to change?
Capacitor apps ship with the app files bundled inside the app, so there is no “production server”, all the files are local.
Capacitor serves the local files from capacitor://localhost on iOS and http://localhost on Android, because you need an url to load in the app, but the url doesn’t really matter much.
When you run ionic capacitor run ios --external --prod it uses a local dev web server, but that’s just to allow live reload and making development easier, but for publishing the app you don’t need a server. Just run ionic build and then npx cap copy and all the files will be copied to the app bundle.
I have implemented a camera functionality in an ionic-angular based application.I am getting an error Camera is not defined.The above mentioned error is occurring when I am using the command ionic serve.The issue doesn't exist when command ionic browser is used.Also getting the same error Camera is not defined when I deployed the app to firebase.Any suggestions for steps I need to follow while deploying the app to firebase to avoid the error ?
Below is the behavior I could see.
I used the command ionic serve.
The Camera plugin doesn't loads in browser view and I could see the following error.
Error from browser
On using the command ionic run browser,Could see camera getting loaded.This is browser view.ionic run browser
This application is deployed using firebase deploy command and hosted in a firebase environment.I could see the same behavior ie(Camera not loading) when accessed the url through an android phone(Moto X Play). Is this expected?.Do I need to execute some other steps while deploying my application to firebase.
Also I have included the ngCordova dependencies in my app.js and included the cordova.js just before ng-cordova.js in my index.html.Currently this app is not installed in playstore or Apple app store.This application is developed in ionic and can be viewed in mobile device by accessing firebase hosting url in which the application is deployed.
Camera plugin is a cordova plugin.and some cordova plugins doesn't support in browser. so install your app into mobile, it will work fine.
I'm new to AngularJS. Is there any way to convert a whole AngularJS application to a mobile native App (Android and iOS) or AngularJS itself. Is there a way to create a mobile app?
I have referred the xdk and phonegap.
Another solution that worked for me in android :
1. Create a plain native app in android.
2. Keep the angular app in resources folder.
3. Call the app in webview.
Similar solution may be possible in ios also, I haven't tried yet.
You can use Apache Cordova or PhoneGap. The use of cross platform libs is very comfortable while you are able to create different native apps by using one sourcecode. With phonegap/cordova you need node.js.
These are the default CLI commands for setup your application. You should create a new hybrid app by using the following commands. You could migrate your AngularJS application by copy-past your files into the new app directory.
Install cordova via NPM
npm install -g cordova.
Create your app (You could put your AngularJS App in your app directory and make it work)
cordova create <path>
Add a platform e.g. iOS or Android (The following command need to be run in the app <path> directory cordova create <path> has been configured.
cordova platform add android --save
Run your app in emulator
cordova run android
Build a native App like:
cordova build android
I have a webapp which I build with Angularjs 2.0, I want to convert it to android apk and install it on android phone and test.
I dont have any experience in building mobile native app or converting webapp to native app.
I have gone through How to convert an existing AngularJS web app to a Cordova app?
Any suggestion/guidance will be helpful.
The most simple explanation is you will need to put your angular files in the www folder, setup your configuration file, make sure the android platform is installed, then run the Android emulate and/or build command to see if it works. That's a very oversimplified version.
Once you've got it working there's a process to go through to prepare the apk to be uploaded to the Google Play Store. You have to be a registered developer for the play store, which is $25/year.
https://scotch.io/#vijayk036/building-hybrid-mobile-apps-using-cordova-and-angularjs-for-android
https://thebhwgroup.com/blog/converting-angularjs-website-cordova-app-ios-and-android
I built a web-app using AngularJS + Angular Material and now want to deploy it to the AppStore (using Cordova I guess?)
What are the steps that I need to do to achieve this?
Install cordova
npm install -g cordova
Create a new cordova project.
cordova create hello com.example.hello HelloWorld
This will create new directory - hello and inside hello you will have your new cordova project - HelloWord, package name - com.example.hello
Add your angularjs app code to 'www' folder inside hello directory.
Now add iOS as a platform to your cordova project.
cordova platform add ios --save
If you need to access gallery, camera, or any other device feature, you will have to add a cordova-plugin for same.
For example to get access to device camera.
cordova plugin add cordova-plugin-camera
Read more about how you will handle events associated with camera inside your angular app. Go through that plugin's documentation.
I would recommend you to use ng-cordova for using cordova-plugins. Read more about ng-cordova here.
Now you will build your cordova project to generate .ipa file for iOS device.
cordova build ios
Inside your hello directory you will have a xcodeproj file -hello/platforms/ios/hello.xcodeproj open it in Xcode and run on an emulator to test.
Purchase your apple developer account and sign into your xcode with your apple account.
From Xcode you will get option to Archive And Publish your app to Appstore.
Few links to get started
App store documentation to know detailed publishing process here
Cordova documentation here