stencil firebase

ステンシル +ファイアベース

これは、ステンシル +ファイアベース +ステンシルストアを使用してWebAppを作成するためのボイラープレートです。

特徴 ？

• FireBaseセットアップ
• ステンシルストアのセットアップ
• ログイン/登録/更新プロファイル/ログアウト機能（基本的な機能）
• ログイン後にアクセスされるルートの保護

はじめる

このボイラープレートの使用を開始するには、このレポを新しいディレクトリにクローンします。

git clone https://github.com/ranjeetsinghbnl/stencil-firebase.git

と実行：

npm install

使用法 ？

Firebase構成をセットアップします

ファイルにFirebase構成をセットアップしてください

 src -> config -> config.ts

 const firebaseConfig = {
  apiKey : "" ,
  authDomain : "" ,
  databaseURL : "" ,
  projectId : "" ,
  storageBucket : "" ,
  messagingSenderId : "" ,
  appId : ""
} ;

FireBase Web構成のセットアップFireBase Web Configの詳細

プロジェクトを開始するには、実行してください。

npm run start

生産用のアプリを構築するには、実行してください。

npm run build

ユニットテストを一度実行するには、実行してください。

 npm run test

ユニットテストを実行し、開発中にファイルの変更を監視するには、実行中です。

 npm run test.watch

プロジェクト構造？€

サービス

このクラスは、FireBaseにアプリケーションの認証機能を処理します。

 src -> services -> auth.service.ts -> Class FirebaseAuthService

より多くのクラスを作成して、機能をグループ化できます。

店

アプリケーションストア

 src -> store -> app.store.ts

インターフェイス

アプリケーションで使用されるインターフェイス

 src -> interface -> interface.ts

ユーティリティ

アプリケーションメッセージを解析し、フォーム構成を保持するためのユーティリティ

 src -> util -> util.ts

構成

アプリケーションレベルの構成

 src -> config -> config.ts

資産

アプリケーションレベル資産

 src -> assets

コンポーネント

アプリケーションレベルコンポーネント

 src -> components ->
1. <app-flash-message> for showing alert messages
2. <app-home> Dashboard 
3. <app-root> entry component of the application
4. <common> sidebar functional component used in login/register components
5. <page> for showing pages
6. <auth> -> having login/register/update-profile components

スタイリング？

スタイリングコンポーネントにscssを使用しました。 THSボイラープレートには、基本的なデザインがあります。つまり、ステンシルストアとともにステンシルWebアプリでFireBaseの構成と使用に重点を置いています。ニーズに応じてルックスをカスタマイズできます。

FireBaseエラーメッセージ

APIによって返された変更を変更せずに、エラーメッセージを直接表示しました。 FirebaseAuthServiceコードを変更して、それらをカスタマイズできます

貢献？

• リクエストをプルしますか？星はいつでも大歓迎です。
• 変更については、最初に問題を開いて、変更したいことを議論してください。

接触 ？

？ [email protected]

？ Twitter @ranjeetsingh_bl

LinkedIn @ranjeetsinghbnl

ライセンス

MIT©Ranjeet Singh