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
> [email protected] 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 [email protected]: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 へリリースした現場からお送りしました。