ionic-team · thetaPC · Apr 19, 2024 · Feb 15, 2024 · Feb 15, 2024 · Feb 15, 2024
@@ -52,7 +52,7 @@ Each Ionic project has a project configuration file, usually at the project's ro
 The CLI will look for the following environment variables:
 
 - `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`.
-- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.md).
+- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.mdx).
 - `IONIC_TOKEN`: Automatically authenticates with [Appflow](https://ionic.io/appflow).
 
 ## Flags

@@ -1,6 +1,6 @@
 # Live Reload
 
-Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.md) when you change your app's code in your development environment. This is particularly useful for developing using hardware devices.
+Using the Live Reload option will reload the browser or [Web View](../core-concepts/webview.mdx) when you change your app's code in your development environment. This is particularly useful for developing using hardware devices.
 
 ## Terms
 

@@ -8,7 +8,7 @@ Thanks for the interest in contributing to Ionic Framework!
 
 ## Contributing Etiquette
 
-Please see the [Contributor Code of Conduct](coc.md) for information on the rules of conduct.
+Please see the [Contributor Code of Conduct](coc.mdx) for information on the rules of conduct.
 
 ## Creating an Issue
 

@@ -38,7 +38,7 @@ For apps that are built with Angular and `@ionic/angular`, we recommend using th
 
 An amazing feature of apps built with web technologies (such as Ionic apps!) is that it can run on virtually any platform: desktop computers, phones, tablets, cars, refrigerators, and more! The same code base for Ionic apps can work on many platforms because it is based on web standards and common APIs that are shared across these platforms.
 
-One of the most common use cases for Ionic is to build an app which can be downloaded from both the <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> and <a href="https://play.google.com/" target="_blank">Play Store</a>. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.md) which render any Ionic app, while still allowing for <i>full</i> Native SDK access.
+One of the most common use cases for Ionic is to build an app which can be downloaded from both the <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> and <a href="https://play.google.com/" target="_blank">Play Store</a>. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.mdx) which render any Ionic app, while still allowing for <i>full</i> Native SDK access.
 
 Projects such as <a href="https://capacitorjs.com/" target="_blank">Capacitor</a> and <a href="https://cordova.apache.org/" target="_blank">Cordova</a> are commonly used to give Ionic apps this access to Native SDKs. This means developers can quickly build out an app using common web development tools, and still have access to native features such as the device's accelerometer, camera, GPS, and more.
 

@@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards';
   />
 </head>
 
-Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's <a href="https://ionicframework.com/pwa" target="_blank">PWA Overview</a> or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) page for more info.
+Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's <a href="https://ionicframework.com/pwa" target="_blank">PWA Overview</a> or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.mdx) page for more info.
 
 For the frameworks Ionic supports, we've created dedicated guides that go into more detail. Below are links for Angular, React, and Vue.
 

@@ -1,9 +1,9 @@
 # Guides
 
-### [Your First Ionic App - v3](guides/first-app-v3/intro.md)
+### [Your First Ionic App - v3](guides/first-app-v3/intro.mdx)
 
 Follow along as we create a working Photo Gallery app using Ionic Framework v3 and Appflow.
 
-### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.md)
+### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.mdx)
 
 Follow along as we create a working Photo Gallery app using Ionic Framework v4 and Cordova.
@@ -70,7 +70,7 @@ Next, create a local, native build of the app.
 
 ## Android Builds
 
-Follow the [Android Setup instructions](../../../developing/android.md), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run:
+Follow the [Android Setup instructions](../../../developing/android.mdx), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run:
 
 ```shell
 ionic cordova build android --prod
@@ -80,13 +80,13 @@ This will generate a unsigned debug build (meaning the app can run on any Androi
 
 ## iOS Builds
 
-iOS is [a bit trickier to set up](../../../developing/ios.md) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run:
+iOS is [a bit trickier to set up](../../../developing/ios.mdx) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run:
 
 ```shell
 ionic cordova build ios --prod
 ```
 
-Then, continue to [follow the instructions here](../../../deployment/app-store.md) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice.
+Then, continue to [follow the instructions here](../../../deployment/app-store.mdx) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice.
 
 ## Add the Native App to Your Local Device
 

@@ -30,7 +30,7 @@ npm install -g @ionic/cli cordova
 :::note
 The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur.
 
-Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../../../developing/tips.md#resolving-permission-errors) for more information.
+Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../../../developing/tips.mdx#resolving-permission-errors) for more information.
 :::
 
 ## Create an App

@@ -13,7 +13,7 @@ $ ionic cordova platform add android
 
 These commands will create a `config.xml` file, which is used to define Cordova iOS and Android settings. Cordova reads this file and applies each setting as it builds each native app binary.
 
-There are more steps to configure [iOS](../../../developing/ios.md) and [Android](../../../developing/android.md) native tooling.
+There are more steps to configure [iOS](../../../developing/ios.mdx) and [Android](../../../developing/android.mdx) native tooling.
 
 Much better! Now we can add the camera functionality. By the way, you can find reference code for this [on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4).
 

@@ -13,15 +13,15 @@ The available config keys can be found in the [`IonicConfig`](#ionicconfig) inte
 
 The following example disables ripple effects and default the mode to Material Design:
 
-import GlobalExample from '@site/docs/developing/config/global/index.md';
+import GlobalExample from '@site/docs/developing/config/global/index.mdx';
 
 <GlobalExample />
 
 ## Per-Component Config
 
 Ionic Config is not reactive. Updating the config's value after the component has rendered will result in the previous value. It is recommended to use a component's properties instead of updating the config, when you require reactive values.
 
-import PerComponentExample from '@site/docs/developing/config/per-component/index.md';
+import PerComponentExample from '@site/docs/developing/config/per-component/index.mdx';
 
 <PerComponentExample />
 
@@ -31,23 +31,23 @@ Ionic Config can also be set on a per-platform basis. For example, this allows y
 
 In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
 
-import PerPlatformExample from '@site/docs/developing/config/per-platform/index.md';
+import PerPlatformExample from '@site/docs/developing/config/per-platform/index.mdx';
 
 <PerPlatformExample />
 
 ### Fallbacks
 
 The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match:
 
-import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.md';
+import PerPlatformFallbackExample from '@site/docs/developing/config/per-platform-overrides/index.mdx';
 
 <PerPlatformFallbackExample />
 
 ### Overrides
 
 This final example allows you to accumulate a config object based upon different platform requirements.
 
-import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.md';
+import PerPlatformOverridesExample from '@site/docs/developing/config/per-platform-fallback/index.mdx';
 
 <PerPlatformOverridesExample />
 

@@ -16,7 +16,7 @@ import TabItem from '@theme/TabItem';
 :::note
 Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly.
 
-See the [Angular Platform Documentation](../../../angular/platform.mdx) for the types of platforms you can detect.
+See the [Angular Platform Documentation](../../angular/platform.mdx) for the types of platforms you can detect.
 :::
 
 ```ts title="app.module.ts"

@@ -40,7 +40,7 @@ The table below shows how hardware back button support varies by environment.
 
 ### Hardware Back Button in a Browser or a PWA
 
-Ionic has experimental support for handling the hardware back button in a browser or a PWA by setting [`experimentalCloseWatcher: true` in the IonicConfig](./config.md). When this feature is enabled, Ionic will use the [Close Watcher API](https://github.com/WICG/close-watcher) to pass any close requests through the `ionBackButton` event. This includes pressing the hardware back button to navigate or the Escape key to dismiss a modal.
+Ionic has experimental support for handling the hardware back button in a browser or a PWA by setting [`experimentalCloseWatcher: true` in the IonicConfig](./config.mdx). When this feature is enabled, Ionic will use the [Close Watcher API](https://github.com/WICG/close-watcher) to pass any close requests through the `ionBackButton` event. This includes pressing the hardware back button to navigate or the Escape key to dismiss a modal.
 
 Chrome has support for Close Watcher starting in [Chrome 120](https://developer.chrome.com/blog/new-in-chrome-120).
 

@@ -12,9 +12,9 @@ title: Previewing
 
 There are many different options to test native functionality depending on your target platforms and needs.
 
-- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.md) for native functionality)
-- [Deploy to iOS](ios.md)
-- [Deploy to Android](android.md)
+- Run locally in a web browser (using [Platform Detection](../core-concepts/cross-platform.mdx) for native functionality)
+- [Deploy to iOS](ios.mdx)
+- [Deploy to Android](android.mdx)
 
 ## Run Locally in a Web Browser
 
@@ -44,8 +44,8 @@ If the external link isn't listed on the terminal, then run `ionic serve --exter
 
 :::
 
-When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.md).
-When you're ready to test on a real device, see here for [iOS](ios.md) and [Android](android.md).
+When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.mdx).
+When you're ready to test on a real device, see here for [iOS](ios.mdx) and [Android](android.mdx).
 
 ## Simulating a Mobile Viewport
 

@@ -4,7 +4,7 @@
 
 Configuration values are stored in JSON files. The Ionic CLI maintains a global configuration file, usually located at `~/.ionic/config.json`, and project configuration files, usually at the project's root directory as `ionic.config.json`.
 
-The CLI provides commands for setting and printing config values from project config files and the global CLI config file. See `ionic config --help` or see the documentation for usage of [`ionic config get`](commands/config-get.md) and [`ionic config set`](commands/config-set.md).
+The CLI provides commands for setting and printing config values from project config files and the global CLI config file. See `ionic config --help` or see the documentation for usage of [`ionic config get`](commands/config-get.mdx) and [`ionic config set`](commands/config-set.mdx).
 
 ### Project Configuration File
 
@@ -42,7 +42,7 @@ Each Ionic project has a project configuration file, usually at the project's ro
 The CLI will look for the following environment variables:
 
 - `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`.
-- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.md).
+- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.mdx).
 - `IONIC_TOKEN`: Automatically authenticates with [Appflow](https://ionic.io/appflow).
 
 ## Flags

@@ -1,6 +1,6 @@
 # Live Reload
 
-One option that can boost productivity when building Ionic apps is **Live Reload** (or **live-reload**). When active, Live Reload will reload the browser or [Web View](../core-concepts/webview.md) when changes in the app are detected. This is particularly useful for developing using hardware devices.
+One option that can boost productivity when building Ionic apps is **Live Reload** (or **live-reload**). When active, Live Reload will reload the browser or [Web View](../core-concepts/webview.mdx) when changes in the app are detected. This is particularly useful for developing using hardware devices.
 
 ## Terms
 
@@ -61,6 +61,6 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl
 
 ## Tips
 
-- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](commands/cordova-run.md).
+- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](commands/cordova-run.mdx).
 - You can separate the dev server process and the deploy process by using `ionic serve` and the `--livereload-url` option of `ionic cordova run` or `ionic capacitor run`.
 - For Android, it is possible to configure [adb](https://developer.android.com/studio/command-line/adb) to always forward ports while the adb server is running (see `adb reverse`). With port forwarding set up, an external address would no longer be required. You can also setup the adb bridge over TCP such that subsequent deploys no longer need a USB cable.
@@ -8,7 +8,7 @@ Thanks for the interest in contributing to Ionic Framework!
 
 ## Contributing Etiquette
 
-Please see the [Contributor Code of Conduct](coc.md) for information on the rules of conduct.
+Please see the [Contributor Code of Conduct](coc.mdx) for information on the rules of conduct.
 
 ## Creating an Issue
 

@@ -31,7 +31,7 @@ For apps that are built with Angular and `@ionic/angular`, we recommend using th
 
 An amazing feature of apps built with web technologies (such as Ionic apps!) is that it can run on virtually any platform: desktop computers, phones, tablets, cars, refrigerators, and more! The same code base for Ionic apps can work on many platforms because it is based on web standards and common APIs that are shared across these platforms.
 
-One of the most common use cases for Ionic is to build an app which can be downloaded from both the <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> and <a href="https://play.google.com/" target="_blank">Play Store</a>. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.md) which render any Ionic app, while still allowing for <i>full</i> Native SDK access.
+One of the most common use cases for Ionic is to build an app which can be downloaded from both the <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> and <a href="https://play.google.com/" target="_blank">Play Store</a>. Both iOS and Android software development kits (SDKs) provide [Web Views](webview.mdx) which render any Ionic app, while still allowing for <i>full</i> Native SDK access.
 
 Projects such as <a href="https://capacitorjs.com/" target="_blank">Capacitor</a> and <a href="https://cordova.apache.org/" target="_blank">Cordova</a> are commonly used to give Ionic apps this access to Native SDKs. This means developers can quickly build out an app using common web development tools, and still have access to native features such as the device's accelerometer, camera, GPS, and more.
 

@@ -9,7 +9,7 @@ import DocsCards from '@components/global/DocsCards';
 
 # Deploying a Progressive Web App
 
-Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's <a href="https://ionicframework.com/pwa" target="_blank">PWA Overview</a> or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) page for more info.
+Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's <a href="https://ionicframework.com/pwa" target="_blank">PWA Overview</a> or the [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.mdx) page for more info.
 
 For the frameworks Ionic supports, we've created dedicated guides that go into more detail. Below are links for Angular and React.
 

@@ -1,9 +1,9 @@
 # Guides
 
-### [Your First Ionic App - v3](guides/first-app-v3/intro.md)
+### [Your First Ionic App - v3](guides/first-app-v3/intro.mdx)
 
 Follow along as we create a working Photo Gallery app using Ionic Framework v3 and Appflow.
 
-### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.md)
+### [Your First Ionic 4 App - Angular and Cordova](guides/first-app-v4/intro.mdx)
 
 Follow along as we create a working Photo Gallery app using Ionic Framework v4 and Cordova.
@@ -70,7 +70,7 @@ Next, create a local, native build of the app.
 
 ## Android Builds
 
-Follow the [Android Setup instructions](../../../developing/android.md), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run:
+Follow the [Android Setup instructions](../../../developing/android.mdx), which includes installing Java 8 and Android Studio on your machine. Then, in your Terminal run:
 
 ```shell
 ionic cordova build android --prod
@@ -80,13 +80,13 @@ This will generate a unsigned debug build (meaning the app can run on any Androi
 
 ## iOS Builds
 
-iOS is [a bit trickier to set up](../../../developing/ios.md) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run:
+iOS is [a bit trickier to set up](../../../developing/ios.mdx) than Android and requires a Mac computer. Ensure XCode is updated to the latest version and set up a development team. Then, in your Terminal, run:
 
 ```shell
 ionic cordova build ios --prod
 ```
 
-Then, continue to [follow the instructions here](../../../deployment/app-store.md) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice.
+Then, continue to [follow the instructions here](../../../deployment/app-store.mdx) regarding signing certificates, etc. With a native version of your app built, let’s copy it to your device of choice.
 
 ## Add the Native App to Your Local Device