

- #IONIC LIVERELOAD NOT WORKING HOW TO#
- #IONIC LIVERELOAD NOT WORKING INSTALL#
- #IONIC LIVERELOAD NOT WORKING ANDROID#
- #IONIC LIVERELOAD NOT WORKING CODE#

#IONIC LIVERELOAD NOT WORKING ANDROID#
The CA certificate is not installed - make sure the certificate appears in iOS Settings > General > Device Management, or Android Settings > Security > Encryption & Certificates, or Mac Keychain Access.

The problem will be related to one of the following: You may get better diagnostics by running your app in XCode or Android Studio. Next, we'll create the certificate: openssl req -config cr-ca.txt -key ca.key -new -x509 -days 3650 -sha256 -out ca.crtĪ white screen on startup is the typical problem associated with a misconfigured app that is attempting to use HTTPS. In development, you will need to issue your own and for this, we'll use the tool openssl.įirst, we'll create a private key (in this example the file is called ca.key): openssl genrsa -out ca.key 4096

In production, the certificate you use is issued by a trusted certificate authority (CA). To use HTTPS you need to have a certificate associated with your web server.
#IONIC LIVERELOAD NOT WORKING INSTALL#
Install and Trust the Root CA Certificate.Let's break down the tasks you need to accomplish:
#IONIC LIVERELOAD NOT WORKING HOW TO#
However, if you are interested in how this is done or would like to know how to do this manually then read on.
#IONIC LIVERELOAD NOT WORKING CODE#
This plugin works for iOS and Android: on the web, you must use a valid trusted certificate (see below).Ĭreating your own self-signed certificate and using it with your development web server is quite challenging which is why the Ionic VS Code extension removes this complexity for you. If you would like to avoid SSL errors in your project (eg for React/Vue) temporarily during development you can install the plugin you must remove this plugin before committing your code as it is not intended for production applications. In some scenarios, the VS Code extension will use a plugin to avoid SSL errors when running on iOS and Android avoiding the need to trust the self-signed certificate. The best way is to install and trust the certificate on the device (or your Mac/PC if testing using a web browser). When you check the box Use HTTPS it will generate a self-signed certificate on your computer and will display a page with instructions on how to download, install and trust the certificate.Īvoiding SSL errors is the quick way to work but it isn't the right way to work. The Ionic VS Code extension can help create a self-signed certificate and trust it on devices. The device will also need to trust the connection which means that if you use a self-signed certificate it will need to be installed and trusted on the device. If your app uses APIs that require a secure context (like web crypto) then it must be served using HTTPS (or not use live reload). Live Reload will use http (not https) and this may affect your application particularly if it uses APIs that require a secure context (such as geolocation, crypto). In the Ionic VS Code extension, you can choose Settings > Live Reload and then run on the Web or mobile device to use the Live Reload feature. Whenever you change a file in your editor the device will reload your app and display your changes. Select your platform of choice (iOS or Android) and connect a device to your computer.To aid with rapid development the Live Reload feature will allow your browser or mobile device to use your development web server instead of static files on your device. Let’s use Live Reload to implement photo deletion, the missing piece of our Photo Gallery feature. Therefore, being able to quickly write, build, test, and deploy code is crucial to keeping up our development speed. This is particularly useful when writing code that interacts with native plugins - we must run it on a device to verify that it works. We can also use it when developing on iOS and Android devices. Remember ionic serve? That was Live Reload working in the browser, allowing us to iterate quickly. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected. We can use the Ionic CLI’s Live Reload functionality to boost our productivity when building Ionic apps. The development experience is pretty quick, but what if I told you there was a way to go faster? So far, we’ve seen how easy it is to develop a cross-platform app that works everywhere.
