This is a boilerplate for creating a webapp using Stencil + Firebase + Stencil Store.
- Firebase setup
- Stencil Store setup
- Login/Register/Update Profile/Logout functionality(Basic one)
- Protecting routes that are accessed after login
To start using this boilerplate, clone this repo to a new directory:
git clone https://github.com/ranjeetsinghbnl/stencil-firebase.git
and run:
npm install
Setup Firebase configuration
Please setup firebase configuration in the file
src -> config -> config.ts
const firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
You can find more about firebase web config setup Firebase Web Config
To start a project, run:
npm run start
To build the app for production, run:
npm run build
To run the unit tests once, run:
npm run test
To run the unit tests and watch for file changes during development, run:
npm run test.watch
This class will handle application authenticate features to firebase.
src -> services -> auth.service.ts -> Class FirebaseAuthService
You can create more classes to group a functionality.
Application store
src -> store -> app.store.ts
Interfaces used in the application
src -> interface -> interface.ts
Utility for parsing application messages and holding form configurations
src -> util -> util.ts
Application level configurations
src -> config -> config.ts
Application level assets
src -> assets
Application level components
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
I have used scss
for styling components. Ths boilerplate have a basic design i.e it focus more on configuring and using firebase in stencil web app along with stencil store. You can customize the looks as per your needs.
I have shown the error message directly without modifying them returned by the API. You can customize them by modifying the FirebaseAuthService
code
- Pull requests and 🌟 stars are always welcome.
- For changes, please open an issue first to discuss what you would like to change.
🐦 Twitter @ranjeetsingh_bl
💼 Linkedin @ranjeetsinghbnl
MIT © Ranjeet Singh