https://github.com/cerivitos/angular-tailwind-firebase
A starter template for web apps using Angular v13, Tailwind CSS, Firebase and Vercel
https://github.com/cerivitos/angular-tailwind-firebase
angular angular13 angularfire firebase tailwindcss template vercel
Last synced: 10 months ago
JSON representation
A starter template for web apps using Angular v13, Tailwind CSS, Firebase and Vercel
- Host: GitHub
- URL: https://github.com/cerivitos/angular-tailwind-firebase
- Owner: cerivitos
- Created: 2022-03-29T14:26:29.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-29T15:02:29.000Z (almost 4 years ago)
- Last Synced: 2025-01-23T11:17:01.779Z (about 1 year ago)
- Topics: angular, angular13, angularfire, firebase, tailwindcss, template, vercel
- Language: HTML
- Homepage:
- Size: 284 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
🔥🔥🔥
Angular-Tailwind-Firebase Starter Template
###
This is a starter template with my commonly used dependencies for building web apps with Angular v13.
## Tailwind
[Tailwind CSS v3](https://tailwindcss.com) is set up with the `line-clamp` plugin which is useful to control text in fixed dimension containers.
## Firebase
Start by [creating](https://firebase.com) a Firebase web project and copy the config object to `environment.ts`.
```
firestoreConfig: {
apiKey: '',
authDomain: '',
databaseURL: '',
projectId: '',
storageBucket: '',
messagingSenderId: '',
},
```
Tip: Do check out [ReCaptcha v3](https://www.google.com/recaptcha/about) which is really useful for Firestore/Real Time Database security. Unfortunately implementation in Angular is not very well documented. Usually, I implement the ReCaptcha check in a Service which handles my calls to Firebase.
```
...
import {
initializeAppCheck,
ReCaptchaV3Provider,
} from '@angular/fire/app-check';
...
@Injectable({
providedIn: 'root',
})
export class DataService {
constructor(
private firestore: AngularFirestore,
private http: HttpClient
) {
initializeAppCheck(getApp(), {
provider: new ReCaptchaV3Provider(environment.appCheckKey),
isTokenAutoRefreshEnabled: true,
});
}
...
}
```
Remember to include your [unique App Check key](https://firebase.google.com/docs/app-check/web/recaptcha-provider) from ReCaptcha v3 in Firebase Settings.
## Vercel Serverless Functions
I usually use [Vercel](https://vercel.com) for hosting. Vercel allows you to create serverless functions simply by creating an exported function in the `/api` folder. For example, this function will return 'Hello World!' at the end point `https://your-app.vercel.app/api/query` when hosted on Vercel.
**api/query.ts**
```
import type { VercelRequest, VercelResponse } from '@vercel/node';
export default (req: VercelRequest, res: VercelResponse) => {
res.status(200).send('Hello World!);
};
```
Types for Vercel functions are already included.
## Miscellaneous
[Web APIs for Angular](https://github.com/ng-web-apis/common) are included. This provides useful injection tokens to access common Web APIs. For example, `WINDOW` allows access to the global `window` object.
My go-to toast library is [Hot Toast](https://github.com/ngneat/hot-toast).
## License
MIT (2022)