Learn SvelteKit and Firebase: The Ultimate Guide
Learn how to use SvelteKit and Firebase to build high-performance, scalable web applications.
Loading Lesson...
Project Setup
Change your dev, build, and start scripts to use the solid-start command.
{
"scripts": {
"dev": "solid-start dev",
"build": "solid-start build",
"start": "solid-start start"
}
}
Vite Configuration
In vite.config.js, remove the solidPlugin from vite-plugin-solid and replace it with solid from solid-start/vite.
// vite.config.js
import { defineConfig } from 'vite';
import solid from 'solid-start/vite';
// import solidPlugin from "vite-plugin-solid"
export default defineConfig({
plugins: [solid()]
// plugins: [solidPlugin()]
});
Client and Server Entry
SolidStart projects are organized in a similar way to Remix or projects using React Server Components. One file is used as an entry point for the application to start in the client and another file is used as an entry point for the application to start on the server. Create files called entry-client.jsx and entry-server.jsx for each.
echo > src/entry-client.jsx
echo > src/entry-server.jsx
entry-client.jsx is where your app starts in the browser. <StartClient /> wraps our application root and includes Context providers for routing and meta data. mount either calls render or hydrate depending on the configuration.
// src/entry-client.jsx
import { mount, StartClient } from 'solid-start/entry-client';
mount(() => <StartClient />, document);
entry-server.jsx is where your app starts on the server. <StartServer event={event} /> wraps our application root and also includes Context providers for routing and meta data. It accepts an event and passes it to the renderAsync(codeFn, options) middleware which then calls Solid's renderToStringAsync under the hood to asynchronously render the application. This responds when the page has been fully loaded and rendered.
// src/entry-server.jsx
import { StartServer, createHandler, renderAsync } from 'solid-start/entry-server';
export default createHandler(renderAsync((event) => <StartServer event={event} />));
All Suspense and data loading on initial load happens on the server. Event objects that originate from our underlying runtime are passed with a PageEvent object containing the following information:
request- The current requestresponseHeaders- The headers being built for the responseclientAddress- The IP address of the remote clientlocals- An object for storing local data that lives the life of the request, like user or authentication datasetStatusCode(code)- Sets the status codegetStatusCode()- Returns the current status codefetch(url, init)- Fetch API that can call API helpers directly on the server
Root
root.jsx defines the document rendered by your application. The Root component from root.jsx is an isomorphic entry into your application, structured like an HTML document but with capitalized components, including core elements like Suspense and ErrorBoundary for managing loading and error states.
Notably, it provides a space for defining <Routes>, positioning <ErrorBoundary> high up for effective error catching, and inserting global Context Providers and universal components, such as top-level navigation, into the <Body>.
// src/root.jsx
// @refresh reload
import { Suspense } from 'solid-js';
import { Body, ErrorBoundary, FileRoutes, Head, Html, Meta, Routes, Scripts } from 'solid-start';
import './root.css';
export default function Root() {
return (
<Html lang="en">
<Head>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Body>
<ErrorBoundary>
<Suspense>
<Routes>
<FileRoutes />
</Routes>
</Suspense>
</ErrorBoundary>
<Scripts />
</Body>
</Html>
);
}
Start Development Server
Run your development server with the solid-start dev command.
pnpm dev
# npm run dev
Open localhost:3000.
Deployment Adapters
SolidStart includes various adapters for deploying your project to specific hosting providers like Netlify or Vercel.
Configure Netlify Adapter
We'll use the Netlify adapter, so install solid-start-netlify with pnpm or npm.
pnpm add -D solid-start-netlify
# npm i -D solid-start-netlify
Our build command will be pnpm build and our publish directory will now be called netlify.
# netlify.toml
[build]
command = "pnpm build"
publish = "netlify"
Return to vite.config.js and import netlify from solid-start-netlify. Set it to adapter and specify true for the edge configuration.
// vite.config.js
import { defineConfig } from 'vite';
import solid from 'solid-start/vite';
import netlify from 'solid-start-netlify';
export default defineConfig({
plugins: [
solid({
adapter: netlify({ edge: true })
})
]
});
Push your new changes to GitHub and your Netlify website should rebuild and update automatically.
