https://ionicframework.jp/docs/assets/js/342322b8.4fe2e752.js

1"use strict";(self.webpackChunkionic_docs=self.webpackChunkionic_docs||[]).push([["29642"],{23637(e,i,o){o.r(i),o.d(i,{metadata:()=>r,default:()=>h,frontMatter:()=>s,contentTitle:()=>d,toc:()=>c,assets:()=>a});var r=JSON.parse('{"id":"cli/livereload","title":"Live Reload","description":"Using the Live Reload option will reload the browser or Web View when you change your app\'s code in your development environment. This is particularly useful for developing using hardware devices.","source":"@site/docs/cli/livereload.md","sourceDirName":"cli","slug":"/cli/livereload","permalink":"/docs/cli/livereload","draft":false,"unlisted":false,"editUrl":"https://github.com/ionic-team/ionic-docs/edit/main/docs/cli/livereload.md","tags":[],"version":"current","frontMatter":{},"sidebar":"cli","previous":{"title":"\u8A2D\u5B9A","permalink":"/docs/cli/configuration"},"next":{"title":"\u30D7\u30ED\u30AD\u30B7\u3092\u5229\u7528\u3059\u308B","permalink":"/docs/cli/using-a-proxy"}}'),n=o(74848),l=o(28453);let s={},d="Live Reload",a={},c=[{value:"Terms",id:"terms",level:2},{value:"Usage",id:"usage",level:2},{value:"Capacitor",id:"capacitor",level:3},{value:"Cordova",id:"cordova",level:3},{value:"Android",id:"android",level:4},{value:"iOS",id:"ios",level:4},{value:"Tips",id:"tips",level:2},{value:"Using SSL",id:"using-ssl",level:3}];function t(e){let i={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i.header,{children:(0,n.jsx)(i.h1,{id:"live-reload",children:"Live Reload"})}),"\n",(0,n.jsxs)(i.p,{children:["Using the Live Reload option will reload the browser or ",(0,n.jsx)(i.a,{href:"/docs/core-concepts/webview",children:"Web View"})," when you change your app's code in your development environment. This is particularly useful for developing using hardware devices."]}),"\n",(0,n.jsx)(i.h2,{id:"terms",children:"Terms"}),"\n",(0,n.jsxs)(i.p,{children:["Live Reload is a conflated term. With ",(0,n.jsx)(i.code,{children:"ionic serve"}),", Live Reload just refers to reloading the browser when changes are made. Live Reload can also be used with Capacitor and Cordova to provide the same experience on virtual and hardware devices, which eliminates the need for re-deploying a native binary."]}),"\n",(0,n.jsx)(i.h2,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(i.p,{children:"Since Live Reload requires the Web View to load your app from a URL hosted by your computer instead of just reading files on the device, setting up live-reload for hardware devices can be tricky."}),"\n",(0,n.jsx)(i.p,{children:"As with regular device deploys, you will need a cable to connect your device to your computer. The difference is the Ionic CLI configures the Web View to load your app from the dev server on your computer."}),"\n",(0,n.jsx)(i.h3,{id:"capacitor",children:"Capacitor"}),"\n",(0,n.jsxs)(i.p,{children:["To use Live Reload with Capacitor, make sure you're either using a virtual device or a hardware device connected to the same Wi-Fi network as your computer. Then, you'll need to specify that you want to use an external IP address for the dev server using the ",(0,n.jsx)(i.code,{children:"--external"})," flag."]}),"\n",(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-shell",children:"$ ionic capacitor run ios -l --external\n$ ionic capacitor run android -l --external\n"})}),"\n",(0,n.jsx)(i.admonition,{type:"note",children:(0,n.jsxs)(i.p,{children:["Remember, with the ",(0,n.jsx)(i.code,{children:"--external"})," option, others on your Wi-Fi network will be able to access your app."]})}),"\n",(0,n.jsx)(i.h3,{id:"cordova",children:"Cordova"}),"\n",(0,n.jsx)(i.h4,{id:"android",children:"Android"}),"\n",(0,n.jsxs)(i.p,{children:["For Android devices, the Ionic CLI will automatically forward the dev server port. This means you can use a ",(0,n.jsx)(i.code,{children:"localhost"})," address and it will refer to your computer when loaded in the Web View, not the device."]}),"\n",(0,n.jsxs)(i.p,{children:["The following all-in-one command will start a live-reload server on ",(0,n.jsx)(i.co

1de,{children:"localhost"})," and deploy the app to an Android device using Cordova:"]}),"\n",(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-shell",children:"ionic cordova run android -l\n"})}),"\n",(0,n.jsx)(i.h4,{id:"ios",children:"iOS"}),"\n",(0,n.jsx)(i.p,{children:"For iOS devices, port forwarding is not yet an option. This means you'll need to connect your device to the same Wi-Fi network as your computer and use an external address for the dev server."}),"\n",(0,n.jsx)(i.p,{children:"In some cases, the Ionic CLI won't know the address with which to configure the Web View, so you may be prompted to select one. Be sure to select the address of your computer on your Wi-Fi network."}),"\n",(0,n.jsxs)(i.p,{children:["The following all-in-one command will start a live-reload server on ",(0,n.jsx)(i.strong,{children:"all addresses"})," and deploy the app to an iOS device using Cordova:"]}),"\n",(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-shell",children:"ionic cordova run ios -l --external\n"})}),"\n",(0,n.jsx)(i.admonition,{type:"note",children:(0,n.jsxs)(i.p,{children:["Remember, with the ",(0,n.jsx)(i.code,{children:"--external"})," option, others on your Wi-Fi network will be able to access your app."]})}),"\n",(0,n.jsx)(i.h2,{id:"tips",children:"Tips"}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsxs)(i.li,{children:["Cordova \u3067\u306F\u3001",(0,n.jsx)(i.code,{children:"--device"}),"\u3001",(0,n.jsx)(i.code,{children:"--emulator"}),"\u3001\u304A\u3088\u3073",(0,n.jsx)(i.code,{children:"--target"}),"\u30AA\u30D7\u30B7\u30E7\u30F3\u3092\u4F7F\u7528\u3057\u3066\u30BF\u30FC\u30B2\u30C3\u30C8\u30C7\u30D0\u30A4\u30B9\u3092\u7D5E\u308A\u8FBC\u307F\u307E\u3059\u3002",(0,n.jsx)(i.code,{children:"--list"}),"\u30AA\u30D7\u30B7\u30E7\u30F3\u3092\u4F7F\u7528\u3059\u308B\u3068\u3001\u3059\u3079\u3066\u306E\u30BF\u30FC\u30B2\u30C3\u30C8\u3092\u4E00\u89A7\u8868\u793A\u3067\u304D\u307E\u3059\u3002\u4F7F\u7528\u65B9\u6CD5\u306F",(0,n.jsx)(i.a,{href:"/docs/cli/commands/cordova-run",children:"\u30B3\u30DE\u30F3\u30C9\u30C9\u30AD\u30E5\u30E1\u30F3\u30C8"}),"\u3092\u53C2\u7167\u3057\u3066\u304F\u3060\u3055\u3044\u3002"]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.code,{children:"ionic serve"}),"\u304A\u3088\u3073",(0,n.jsx)(i.code,{children:"ionic cordova run"}),"\u307E\u305F\u306F",(0,n.jsx)(i.code,{children:"ionic capacitor run"}),"\u306E",(0,n.jsx)(i.code,{children:"--livereload-url"}),"\u30AA\u30D7\u30B7\u30E7\u30F3\u3092\u4F7F\u7528\u3059\u308B\u3053\u3068\u3067\u3001\u958B\u767A\u30B5\u30FC\u30D0\u30FC\u30D7\u30ED\u30BB\u30B9\u3068\u30C7\u30D7\u30ED\u30A4\u30D7\u30ED\u30BB\u30B9\u3092\u5206\u96E2\u3067\u304D\u307E\u3059\u3002"]}),"\n",(0,n.jsxs)(i.li,{children:["Android \u306E\u5834\u5408\u3001",(0,n.jsx)(i.a,{href:"https://developer.android.com/studio/command-line/adb",children:"adb"}),"\u3092\u8A2D\u5B9A\u3057\u3066\u3001adb \u30B5\u30FC\u30D0\u30FC\u5B9F\u884C\u4E2D\u306B\u5E38\u306B\u30DD\u30FC\u30C8\u3092\u8EE2\u9001\u3059\u308B\u3053\u3068\u304C\u53EF\u80FD\u3067\u3059\uFF08",(0,n.jsx)(i.code,{children:"adb reverse"}),"\u3092\u53C2\u7167\uFF09\u3002\u30DD\u30FC\u30C8\u8EE2\u9001\u304C\u8A2D\u5B9A\u3055\u308C\u308B\u3068\u3001\u5916\u90E8\u30A2\u30C9\u30EC\u30B9\u306F\u4E0D\u8981\u306B\u306A\u308A\u307E\u3059\u3002\u307E\u305F\u3001\u5F8C\u7D9A\u306E\u30C7\u30D7\u30ED\u30A4\u306B USB \u30B1\u30FC\u30D6\u30EB\u3092\u4F7F\u7528\u3057\u306A\u304F\u3066\u3082\u3001TCP \u7D4C\u7531\u3067 adb \u30D6\u30EA\u30C3\u30B8\u3092\u8A2D\u5B9A\u3059\u308B\u3053\u3068\u3082\u3067\u304D\u307E\u3059\u3002"]}),"\n",(0,n.jsxs)(i.li,{children:["Angular \u3092\u4F7F\u7528\u3057\u305F\u958B\u767A\u30B3\u30F3\u30C6\u30CA\u3067\u306F\u3001\u30E9\u30A4\u30D6\u30EA\u30ED\u30FC\u30C9\u304C\u52D5\u4F5C\u3057\u306A\u3044\u5834\u5408\u304C\u3042\u308A\u307E\u3059\u3002\u3053\u308C\u3092\u4FEE\u6B63\u3059\u308B\u306B\u306F\u3001",(0,n.jsx)(i.code,{children:"angular.json"}),"\u5185\u3067",(0,n.jsx)(i.code,{children:"projects.app.architect.serve.configurations.development.poll"}),"\u3092",(0,n.jsx)(i.code,{children:"1"}),"\u306B\u8A2D\u5B9A\u3057\u3066\u304F\u3060\u3055\u3044\u3002"]}),"\n"]}),"\n",(0,n.jsx)(i.h3,{id:"using-ssl",children:"Using SSL"}),"\n",(0,n.jsxs)(i.p,{children:["Live reload will use HTTP by default which will cause web APIs that require a secure context (like ",(0,n.jsx)(i.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API",children:"web crypto"}),") to fail. To establish a secure context you can use the ",(0,n.jsx)(i.co

1de,{children:"--ssl"})," argument to use HTTPS."]}),"\n",(0,n.jsx)(i.p,{children:"For example, with an Angular application you can run the following to pass a certificate and private key and serve your app with HTTPS:"}),"\n",(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-shell",children:"ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key'\n"})}),"\n",(0,n.jsxs)(i.p,{children:["\u81EA\u5DF1\u7F72\u540D\u8A3C\u660E\u66F8\u3092\u4F7F\u7528\u3057\u3001\u30C7\u30D0\u30A4\u30B9\u306B\u3088\u3063\u3066\u4FE1\u983C\u3055\u308C\u308B\u3088\u3046\u306B\u3059\u308B\u3053\u3068\u306F\u8907\u96D1\u306A\u30C8\u30D4\u30C3\u30AF\u3067\u3042\u308A\u3001",(0,n.jsx)(i.a,{href:"https://ionic.zendesk.com/hc/en-us/articles/11384425513623",children:"Ionic \u30B5\u30DD\u30FC\u30C8\u8A18\u4E8B\u306E\u81EA\u5DF1\u7F72\u540D\u8A3C\u660E\u66F8\u306B\u95A2\u3059\u308B\u8A18\u4E8B"}),"\u3067\u53D6\u308A\u4E0A\u3052\u3089\u308C\u3066\u3044\u307E\u3059\u3002"]})]})}function h(e={}){let{wrapper:i}={...(0,l.R)(),...e.components};return i?(0,n.jsx)(i,{...e,children:(0,n.jsx)(t,{...e})}):t(e)}},28453(e,i,o){o.d(i,{R:()=>s,x:()=>d});var r=o(96540);let n={},l=r.createContext(n);function s(e){let i=r.useContext(l);return r.useMemo(function(){return"function"==typeof e?e(i):{...i,...e}},[i,e])}function d(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:s(e.components),r.createElement(l.Provider,{value:i},e.children)}}}]);