====== StencilOneでアプリ作成 ======

2019年6月にStencilのVersion1.0が公開されました。

https://stenciljs.com/
{{:stencil:pasted:20190608-123827.png}}

それまでと異なり、StencilOneと、"One"という名前が追加され、ロゴも変わっています。

before: {{:stencil:pasted:20190608-124010.png?50|}} Stencil

after: {{:stencil:pasted:20190608-124039.png}}

とりあえず、StencilOneのデフォルトアプリを作成して、Netlifyにデプロイしてみたいと思います。

===== 開発環境 =====
<code>
Panasonic CF-RZ6
Windows 10 Pro (1803)
VisualStudioCode 1.35.0

git version 2.20.1.windows.1
nvm 1.1.7
node 10.2.0
npm 6.4.1
</code>


===== 新規StencilOneアプリの作成 =====
C:/　フォルダに stencil/ フォルダを作成し、C:/stencil/ フォルダをVisualStudioCodeで開き、Ctrl+@でターミナル画面を開き、以下を入力します。

<code>
npm init stencil
</code>

{{:stencil:pasted:20190608-125535.png}}

  -ionic-pwa を選択したままEnter
  -project nameは、stencilone-ionic-pwa

けっこうさくっとStencilアプリが作成されました。Ionic4-Angularと全然違う！

{{:stencil:pasted:20190608-125726.png}}

引き続き以下を入力します。

<code>
cd stencilone-ionic-pwa
npm start
</code>

{{:stencil:pasted:20190608-132010.png}}

ブラウザに右上のような画面が表示されるのに約20秒くらいかかりました。

Ionic4-Angularよりはだいぶ軽そうです。（当たり前っちゃ当たり前ですが。）

Ctrl+C => y + Enter でサーバを止めます。

===== GitHubにpushする =====
https://github.com/ にログインして、新規リポジトリを作成し、pushします。
今回は、stencilone-ionic-pwa という名前にしました。

<code>
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/adash333/stencilone-ionic-pwa.git
git push -u origin master
</code>

{{:stencil:pasted:20190608-132509.png}}

https://github.com/adash333/stencilone-ionic-pwa

===== Netlifyにデプロイ =====
https://www.netlify.com/ へログインし、New Site from Git をクリックし、上のリポジトリをデプロイします。
設定は以下のようにします。

{{:stencil:pasted:20190608-141907.png}}

{{:stencil:pasted:20190608-142840.png}}

デプロイできたようです。

https://blissful-thompson-334371.netlify.com/

{{:stencil:pasted:20190608-143401.png}}

{{:stencil:pasted:20190608-143416.png}}

===== ソースコードとDEMOサイト =====
ソースコード
https://github.com/adash333/stencilone-ionic-pwa

DEMOサイト
https://blissful-thompson-334371.netlify.com/


===== 参考リンク =====

https://github.com/ionic-team/stencil-app-starter


===== リンク =====
目次：[[stencil:index.html|Stencil.js]]