- Setup with
Vite+React+TypeScript
Firebase
"backend"Firestore
- as DBAuthentication
-for login/authFunctions
- when a auth user is created to add custom claims - in this case role ADMIN toneshev.rumenn@gmail.com
user
Google Calendar API
- to add the events to authorized user- Load the GAPI lib
https://apis.google.com/js/api.js
globally inindex.html
- For this
Firebase Auth
is not enough, theGoogle Identity Services (GIS)
has to be used. Load thehttps://accounts.google.com/gsi/client
lib again globally inindex.html
- A OAuth app has to be created in the Google Console and use it's CLIENT_ID
- Then to authorize with the "implicit token flow" (the client only way - it only gives short-lived access token)
- Connect the GoogleLogin to Firebase - use the
signInWithCredential(...)
- Load the GAPI lib
- Client routing with
TanStack Router
Configure a "better" looking firebase hosting site
> Create a site climbcalendar
either from the web-console or from the firebase CLI
> Add a target
(named main here
) in firebase.json:hosing
and apply it to the newly created site
(e.g. exec ``firebase target:apply hosting main climbcalendar```)
> Now the app will be accessible on https://climbcalendar.web.app not on the "uglier" https://climbcalendar-13b0d.web.app (the project ID main site)
npm run dev
npm run deploy
Use the recommended Vite plugin for PWA - https://vite-pwa-org.netlify.app
- It will dynamically inject a manifest file. Before that can generate all needed icon assets using the
@vite-pwa/assets-generator
npm script. - Use the
registerType: "autoUpdate"
option as thus specific UI could be auto updated on new version
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level
parserOptions
property like this:
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}
- Replace
plugin:@typescript-eslint/recommended
toplugin:@typescript-eslint/recommended-type-checked
orplugin:@typescript-eslint/strict-type-checked
- Optionally add
plugin:@typescript-eslint/stylistic-type-checked
- Install eslint-plugin-react and add
plugin:react/recommended
&plugin:react/jsx-runtime
to theextends
list