docs(javascript): update the quickstart to fix npm run preview

brandyscarney · brandyscarney · commit 9bc2371f466d · 2025-11-12T15:59:09.000-05:00
diff --git a/docs/javascript/quickstart.md b/docs/javascript/quickstart.md
@@ -87,7 +87,7 @@ npm install vite-plugin-static-copy --save-dev
 
 Add a `vite.config.js` file at the project root with the following:
 
-```js
+```js title="vite.config.js"
 import { defineConfig } from 'vite';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
@@ -122,18 +122,14 @@ This copies the necessary Ionic files that Capacitor will need to work with lazy
 
 Replace the contents of `src/main.js` with the following:
 
-```js
-// Determine if the app is running in Capacitor
-const isCapacitor = location.protocol === 'capacitor:' || (window.Capacitor && window.Capacitor.platform !== 'web');
-
+```js title="src/main.js"
 // Load Ionic
-if (isCapacitor) {
-  // In Capacitor, import Ionic directly from copied dist files
-  import(/* @vite-ignore */ location.origin + '/ionic.esm.js');
-} else {
-  // In the browser, use the normal loader
-  import('@ionic/core/loader').then((m) => m.defineCustomElements(window));
-}
+(async () => {
+  // Set the path to a variable to
+  // prevent Vite from analyzing in dev
+  const ionicPath = '/ionic.esm.js';
+  await import(/* @vite-ignore */ ionicPath);
+})();
 
 // Core CSS required for Ionic components to work properly
 import '@ionic/core/css/core.css';
@@ -158,7 +154,7 @@ This initializes Ionic based on the environment and then imports all of the avai
 
 Update your `index.html` to configure the metadata and use Ionic components:
 
-```html
+```html title="index.html"
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
   <head>
@@ -190,7 +186,7 @@ This sets up the root of your application, using Ionic's `ion-app`, `ion-router`
 
 Routes are defined in the `index.html` using `ion-route` components inside the `ion-router`:
 
-```html
+```html title="index.html"
 <ion-router>
   <ion-route url="/" component="home-page"></ion-route>
   <ion-route url="/new" component="new-page"></ion-route>
@@ -203,7 +199,7 @@ When you visit the root URL (`/`), the `home-page` component will be loaded. Whe
 
 Create a new directory called `pages` inside the `src` folder, then add a file called `HomePage.js` in that directory with the following content:
 
-```js
+```js title="src/pages/HomePage.js"
 class HomePage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -236,7 +232,7 @@ For detailed information about Ionic layout components, see the [Header](/docs/a
 
 Next, add a `<script>` tag before the `src/main.js` import in `index.html` to import the Home page:
 
-```html
+```html title="index.html"
 <script type="module">
   import './src/pages/HomePage.js';
 </script>
@@ -252,7 +248,7 @@ At this point your browser should be displaying the Home page.
 
 You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button) to navigate to another page. Update the `HomePage` component in `src/pages/HomePage.js`:
 
-```js
+```js title="src/pages/HomePage.js"
 class HomePage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -283,7 +279,7 @@ customElements.define('home-page', HomePage);
 
 Add a new file named `NewPage.js` to `src/pages` with the following content:
 
-```js
+```js title="src/pages/NewPage.js"
 class NewPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -309,7 +305,7 @@ This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar]
 
 Next, update the `<script>` tag which imports the Home page in the `index.html` file to also import the New page:
 
-```html
+```html title="index.html"
 <script type="module">
   import './src/pages/HomePage.js';
   import './src/pages/NewPage.js';
@@ -320,7 +316,7 @@ Next, update the `<script>` tag which imports the Home page in the `index.html`
 
 To navigate to the new page, update the button in `src/pages/HomePage.js` to be inside of an `ion-router-link`:
 
-```html
+```html title="src/pages/HomePage.js"
 <ion-router-link href="/new">
   <ion-button>Navigate</ion-button>
 </ion-router-link>
@@ -338,7 +334,7 @@ Ionic JavaScript comes with [Ionicons](https://ionic.io/ionicons/) support. To u
 
 Add the necessary imports and register the icons in `src/main.js`:
 
-```js
+```js title="src/main.js"
 // ...Ionic initialization
 
 // Icon imports
@@ -352,7 +348,7 @@ addIcons({ heart, logoIonic });
 
 Next, update `src/pages/NewPage.js` to include the icons:
 
-```js
+```js title="src/pages/NewPage.js"
 class NewPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -383,7 +379,7 @@ For more information, see the [Icon documentation](/docs/api/icon) and the [Ioni
 
 Let's add a button that can scroll the content area to the bottom. Update `src/pages/NewPage.js` to include scrollable content and a scroll button:
 
-```js
+```js title="src/pages/NewPage.js"
 class NewPage extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
