Switching from Webpack to Vite

[koistya]

As an attempt to simplify JavaScript bundling configuration and provide a better development experience (DX), starting from today the template will be using Vite instead of Webpack.

Also, in this release (#1974), the front-end source code has been moved into the /app folder (Yarn workspace) so that you could more easily add other packages (workspaces), e.g. /api with GraphQL/REST API backend powered by Next.js or something like that.

There is /edge folder (workspace) containing Cloudflare Worker script that allows deploying the app directly to Cloudfalre (CDN), which can be easily removed if you're not using Cloudflare.

Finally, the template now comes with an authentication logic powered by Firebase Auth (a.k.a, Google Identity Platform).

How to access the currently logged-in / authenticated User object

import { useCurrentUser } from "../core/auth.js";

function Example(): JSX.Template {
  const me = useCurrentUser();
  // => { uid: "xxx", displayName: "Konstantin", ... } - Firebase User object
  // => or, `null` when user was not authenticated yet
  // => or, `undefined` when authentication module was not loaded
}

In, order to open a login modal dialog or Apple/Google/Facebook login (popup) window use useAuth() React hook:

import { useAuth } from "../core/auth.js";

function Example(): JSX.Element {
  cosnt auth = useAuth();
  
  auth.signIn() // Opens a login dialog (with Apple/Google/Facebook login buttons)
  auth.signIn({ method: "google" }); // Opens Sign in via Google popup window
  
  // Here is how you can perform some action right after the user logged in into the app
  auth.signIn().then(user => { ... });
}