I figured SolidJS would be just like React, but it’s not. It’s way better. I had a few learning curves but got my app up and running. My biggest problem is the lack of good documentation for Solid Start techniques, but the framework itself is solid. See what I did there? ## TL;DR Solid Start is similar to [NextJS](https://code.build/p/nextjs-todo-app-with-firebase-sWvbf7) but works differently under the hood. Using helper functions like `Show` and `For` makes JSX more bearable and the underlying signals quick. The loaders require a few extra boilerplate steps, but `Suspense` can be powerful if you need streaming. ## Setup First, set up your `.env` file with the Firebase credentials as usual but with the `VITE_` prefix for client recognition. ```tsx VITE_PUBLIC_FIREBASE_CONFIG={"apiKey":"...","authDomain":"..."...} ``` 📝 Make sure your keys have quotes. ### Firebase Library Create your `lib/firebase.ts` file, sharing your `app` for the server version. ```tsx import { getApp, getApps, initializeApp } from 'firebase/app'; import { getAuth } from 'firebase/auth'; import { getFirestore } from 'firebase/firestore'; const firebase_config = JSON.parse( import.meta.env.VITE_PUBLIC_FIREBASE_CONFIG ); // initialize and login export const app = getApps().length ? getApp() : initializeApp(firebase_config); export const auth = getAuth(app); export const db = getFirestore(app); ``` ## Shared Context I created a universal [Shared Context Library for React](https://code.build/p/nextjs-todo-app-with-firebase-sWvbf7#accessing-the-variable). Since this uses almost identical context code as React, it was easy to translate. This allows you to have one provider and import your reusable hooks wherever you want. ```tsx import { Component, JSX, createContext, useContext, type Context } from "solid-js"; const _Map = () => new Map(); const Context = createContext(_Map()); export const Provider: Component<{ children: JSX.Element }> = ({ children }) => {children}; const useContextProvider = (key: string) => { const context = useContext(Context); return { set value(v: T) { context.set(key, v); }, get value() { if (!context.has(key)) { throw Error(`Context key '${key}' Not Found!`); } return context.get(key) as T; } } }; export const useShared = ( key: string, fn: (value?: A) => T, initialValue?: A ) => { const provider = useContextProvider>(key); if (initialValue !== undefined) { const state = fn(initialValue); const Context = createContext(state); provider.value = Context; } return useContext(provider.value); }; ``` Put the `Provider` inside the `routes/index.ts` file so they can be used for our main route. Normally, you would share this everywhere. ```tsx import { Title } from "@solidjs/meta"; import Home from "~/components/home"; import { Provider } from "~/lib/use-shared"; export default function Index() { return (

SolidStart - Firebase

); } ``` 🖇️ Notice how easy it is to use the `Title` tag anywhere in your code edit the meta tag. ## User Hook The signals in Solid work almost identically to `useState` and `useEffect` in React; they are just faster and actually use signals. No more `useMemo` malarky for basic rendering. That being said, you can use `createMemo` to memoize expensive computations. For this example, we are using `createStore`, but we could have used `createSignal`. ```tsx import { useShared } from "./use-shared"; import { User, onIdTokenChanged, signOut, signInWithPopup, GoogleAuthProvider } from "firebase/auth"; import { auth } from "./firebase"; import { createStore } from "solid-js/store"; import { onCleanup } from "solid-js"; export interface userData { photoURL: string | null; uid: string; displayName: string | null; email: string | null; }; type UserState = { loading: boolean; data: userData | null; }; export function _useUser(initialValue: UserState = { loading: true, data: null }) { const _store = createStore(initialValue); const setUser = _store[1]; setUser(v => ({ ...v, loading: true })); // subscribe to user changes const unsubscribe = onIdTokenChanged(auth, (_user: User | null) => { if (!_user) { setUser({ data: null, loading: false }); return; } // map data to user data type const { photoURL, uid, displayName, email } = _user; const data = { photoURL, uid, displayName, email }; // print data in dev mode if (process.env.NODE_ENV === 'development') { console.log(data); } // set store setUser({ loading: false, data }); }); onCleanup(unsubscribe); return _store; } export const useUser = (initialValue?: UserState) => useShared('user', _useUser, initialValue); export const loginWithGoogle = () => signInWithPopup(auth, new GoogleAuthProvider()); export const logout = () => signOut(auth); ``` ### 📌 User Notice - I’m converting the `onIdTokenChanged` event handler to a signal. - Always unsubscribe. In SolidJS, we use `onCleanup`. - Export the hook with `useShared`, we only want to subscribe once when we share our user state. ## Todos Hook Fetching `todos` is similar but relies on the `user` signal. ```tsx import { type DocumentData, onSnapshot, type QuerySnapshot, Timestamp } from 'firebase/firestore'; import { addDoc, collection, deleteDoc, doc, orderBy, query, serverTimestamp, updateDoc, where } from 'firebase/firestore'; import { db } from './firebase'; import { useUser } from './use-user'; import { createStore } from 'solid-js/store'; import { createComputed, onCleanup } from 'solid-js'; export interface TodoItem { id: string; text: string; complete: boolean; created: Date; uid: string; }; export const snapToData = ( q: QuerySnapshot ) => { // creates todo data from snapshot if (q.empty) { return []; } return q.docs.map((doc) => { const data = doc.data({ serverTimestamps: 'estimate' }); const created = data.created as Timestamp; return { ...data, created: created.toDate(), id: doc.id } }) as TodoItem[]; } export function useTodos() { const _user = useUser(); const _store = createStore<{ todos: TodoItem[], loading: boolean }>({ todos: [], loading: true }); const user = _user[0]; const setTodos = _store[1]; setTodos(v => ({ ...v, loading: true })); createComputed(() => { if (!user.data) { setTodos({ loading: false, todos: [] }); return _store[0]; } const unsubscribe = onSnapshot( // query realtime todo list query( collection(db, 'todos'), where('uid', '==', user.data.uid), orderBy('created') ), (q) => { // get data, map to todo type const data = snapToData(q); /** * Note: Will get triggered 2x on add * 1 - for optimistic update * 2 - update real date from server date */ // print data in dev mode if (process.env.NODE_ENV === 'development') { console.log(data); } // add to store setTodos({ loading: false, todos: data }); }); onCleanup(unsubscribe); }); return _store[0]; }; export const addTodo = ( e: SubmitEvent, uid: string ) => { e.preventDefault(); // get and reset form const target = e.target as HTMLFormElement; const form = new FormData(target); const { task } = Object.fromEntries(form); if (typeof task !== 'string') { return; } // reset form target.reset(); addDoc(collection(db, 'todos'), { uid, text: task, complete: false, created: serverTimestamp() }); } export const updateTodo = (id: string, complete: boolean) => { updateDoc(doc(db, 'todos', id), { complete }); } export const deleteTodo = (id: string) => { deleteDoc(doc(db, 'todos', id)); } ``` ### 📌 Todos Notice - I’m using `createComputed` to derive the `onSnapshot` event handler to a signal from the `user` signal. - `createComputed` is unique to SolidJS and solves the reactivity problem with `effect()`. - Again, always unsubscribe. In SolidJS, we use `onCleanup`. - We don’t need `useShared` since this is only called once in one component. - The `snapToData` converts the collection array of metadata, to actual data. See [Data Patterns](https://code.build/p/firestore-query-and-mutation-patterns-w5vhl7#snapshot). ## Profile Component The first big change you will notice with Solid is the `Show` component. It makes handling JSX much easier. However, when dealing with a possible `null` or `undefined` check, you have to wrap the internal child component inside this awkward `{() => ( ... )}`. I understand this is necessary for proper reactive handling, but it is really a hack for JSX’s shortcomings. Either way, it is better than React. ```tsx import { Logout } from "~/lib/helpers"; import { useUser } from "~/lib/use-user"; import Todos from "./todos"; import { Show } from "solid-js"; export default function Profile() { const [user] = useUser(); return ( {(user) => (

Hi {user().displayName}!

{(data) => ( user avatar

)}

Your userID is {user().uid}

)} ); } ``` ## Todos Component The `todos` require a similar pattern. I must check for the `user` again since I use a shared hook. If you deal with prop-drilling, you won’t have this problem, but you will have to deal with prop-drilling. ```tsx import { addTodo, useTodos } from "~/lib/use-todos"; import { useUser, userData } from "~/lib/use-user"; import { Todo } from "./todo-item"; import { For, Show } from "solid-js"; export default function Todos() { const _user = useUser(); const todoStore = useTodos(); const user = _user[0]; return ( {(user) => ( <>

Add your first todo item!

}> {(todo, _index) => ( )}

)} ); } export const TodoForm = (user: userData) => { return ( ); }; ``` - The `fallback` is a simple way to handle the loading state of an empty array. - The items are tracked automatically, so you don’t need a `key`. There are no `Fragment` types in Solid for this. - You still need to pass the odd `{(item, index) => ()}` inside a `For` loop. - React uses `className`, but Solid is smarter and uses our friend `class`. ## Todo Item The individual `todos` are cleaner with `Show` than with ternaries. ```tsx import { Show } from "solid-js"; import { TodoItem, deleteTodo, updateTodo } from "~/lib/use-todos"; // each todo item export const Todo = ({ todo }: { todo: TodoItem }) => { return ( <> {todo.text} {todo.id} ); }; ``` 🖇️ I didn’t need the JSX `{() => ()}` because I wasn’t dealing with `null` or `undefined` inside the `Show` component. ## Home Finally, we can go home. This is the first component that gets rendered, but I saved it for last. ```tsx import { Loading, Login } from "~/lib/helpers"; import { useUser } from "~/lib/use-user"; import Profile from "./profile"; import { Match, Switch } from "solid-js"; export default function Home() { const [user] = useUser({ data: null, loading: true }); return (

Solid Start Firebase Todo App

); } ``` We set the `user` for the first time before `onAuthIdTokenChanged`. I also used `Switch` and `Match` to show you other possibilities as well. ## About Page First, create an about library at `lib/about.ts` that uses Firestore Lite if you want to host on [the Edge](https://code.build/p/firestore-query-and-mutation-patterns-w5vhl7#edge-functions). ```tsx import { doc, getDoc, getFirestore } from "firebase/firestore/lite"; import { app } from "./firebase"; const db = getFirestore(app); type AboutDoc = { name: string; description: string; }; export const getAbout = async () => { const aboutSnap = await getDoc( doc(db, '/about/ZlNJrKd6LcATycPRmBPA') ); if (!aboutSnap.exists()) { throw 'Document does not exist!'; } return aboutSnap.data() as AboutDoc; }; ``` ### About Route Loading the data from the server required a lot of extra boilerplate compared to [NextJS](https://code.build/p/nextjs-todo-app-with-firebase-sWvbf7), [Qwik](https://code.build/p/qwik-todo-app-with-firebase-P2rX5i), or [Remix](https://code.build/p/remix-todo-app-with-firebase-p4HFXN). There were no good, complete examples, so I had to hit up Discord to figure this out. ```tsx import { Title } from "@solidjs/meta"; import { RouteDefinition, cache, createAsync } from "@solidjs/router"; import { Show } from "solid-js"; import { getAbout } from "~/lib/about"; // load data once and cache it const getAboutPage = cache(async () => { 'use server'; return await getAbout(); }, 'about'); // preload the data export const route = { load: () => getAboutPage(), } satisfies RouteDefinition; export default function About() { // get your preloaded data const about = createAsync(() => getAboutPage(), { deferStream: true }); return ( {(data) => ( <> About

{data().name}

{data().description}

)} ); }; ``` Solid Start uses `Suspense` by default to stream your data to the client as it becomes available. This is awesome, but it gives a bad user experience for this particular example. I don’t want the page to ever be blank. Waiting those few extra milliseconds is worth the wait. Adding `deferStream` accomplished this. ## Final Thoughts I hate JSX, but SolidJS makes it a bit more bearable if you learn its patterns. While the documentation needs more clear examples, building with it was fun. **Demo:** [Vercel Edge](https://solid-start-firebase.vercel.app/) **Repo:** [GitHub](https://github.com/jdgamble555/solid-start-firebase)

Total Tags: 32

SolidJS Todo App with Firebase