Ionic PWA を作成して Netlify へリリースする手順
- 2018 11/27
- カテゴリー : Mobile App Framework
- ionic . Netlify
- コメントを書く
Ionic PWA を作成して Netlify へリリースしてみたので、その手順をご紹介します。
Install Node.js
2018/11/27 時点で、LTS 最新バージョン Node.js 10.14.0 を利用します。
nvm install v10.14.0
nvm use v10.14.0 |
stencil で ionic-pwa 作成
$ npx create-stencil ✔ Pick a starter › ionic-pwa ✔ Project name › stencil-ionic-pwa-sandbox ✔ All setup in 20 ms Next steps: $ cd stencil-ionic-pwa-sandbox $ npm start Further reading: - https://beta.ionicframework.com |
$ npm install $ npm start > stencil-ionic-pwa-sandbox@0.0.1 start /Users/yourname/works/codenote-net/stencil-ionic-pwa-sandbox > stencil build --dev --watch --serve [13:25.3] @stencil/core v0.15.2 🌯 [13:25.3] build, app, dev mode, started ... [13:25.3] transpile started ... [13:26.5] transpile finished in 1.11 s [13:30.8] module map started ... [13:30.8] generate styles started ... [13:31.0] compile global style start ... [13:31.4] compile global style finish in 371 ms [13:31.4] generate styles finished in 610 ms [13:32.2] module map finished in 1.48 s [13:32.2] generate bundles started ... [13:32.2] generate bundles finished in 13 ms [13:32.2] generate app files started ... [13:32.9] generate app files finished in 633 ms [ WARN ] Bundling Warning Generated an empty bundle [13:34.0] dev server: http://localhost:3333/ [13:34.0] build finished, watching for changes... in 8.68 s |
Netlify へリリース
GitHub repo 作成 & 公開
git clone git@github.com:codenote-net/stencil-ionic-pwa-sandbox.git mv stencil-ionic-pwa-sandbox/* ./ mv stencil-ionic-pwa-sandbox/.* ./ rmdir stencil-ionic-pwa-sandbox |
git add . git commit -m ":tada: Created ionic-pwa by `npx create-stencil`" git push |
以下の GitHub Public repository に公開してます。
GitHub repo を Netlify へ Deploy する
Netlify の https://app.netlify.com/start ページから、GitHub repository を連携して手順を踏んで deploy までします。
Netlify へ deploy した ionic-pwa は、https://stencil-ionic-pwa-sandbox.netlify.com/ からアクセスできます。
以上、stencil で ionic-pwa 作成して、Netlify へリリースした現場からお送りしました。
参考情報
- ionic-team/stencil-app-starter: Minimal starter project for building web components (or apps!) with Stencil
- @stencil/core – npm