Ionic PWA を作成して Netlify へリリースする手順

Ionic PWA を作成して Netlify へリリースしてみたので、その手順をご紹介します。

ionic Framework

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 までします。

New site from Git | Netlify

1. Create a new site | Netlify

2. Create a new site | Netlify

3. Create a new site | Netlify

Netlify へ deploy した ionic-pwa は、https://stencil-ionic-pwa-sandbox.netlify.com/ からアクセスできます。

以上、stencil で ionic-pwa 作成して、Netlify へリリースした現場からお送りしました。

参考情報

関連記事