Learn SvelteKit and Firebase: The Ultimate Guide
Learn how to use SvelteKit and Firebase to build high-performance, scalable web applications.
Loading Lesson...
Project Structure and Vite Configuration
Create a blank directory called intro-to-solid and initialize a package.json file with either pnpm or npm.
mkdir intro-to-solid
cd intro-to-solid
pnpm init
# npm i
Install the following project dependencies:
solid-js- A reactive JavaScript UI library, updating directly on the DOM for high performance.@solidjs/meta- Tools for managing metadata within Solid applications, enhancing SEO.@solidjs/router- A router library for Solid, enabling single-page application creation.vite- A modern front-end build tool providing fast development experience via features like hot module replacement.vite-plugin-solid- A Vite plugin that adds Solid support, allowing Vite to compile Solid's syntax and reactivity system.
pnpm add -D solid-js @solidjs/meta @solidjs/router vite vite-plugin-solid
# npm i -D solid-js @solidjs/meta @solidjs/router vite vite-plugin-solid
Add vite scripts to package.json for dev, build, and preview.
devis set to vitewhich starts the Vite development server. It provides features like hot module replacement and fast refresh, allowing you to instantly see changes as you develop your application.buildis set to vite buildwhich instructs Vite to build your project for production. It optimizes and minifies your code, resulting in smaller bundle sizes that load faster for your users. It typically outputs the build assets into a distfolder in your project directory.serveis set to vite previewwhich allows you to preview your built application in a local server environment. It serves the files generated by vite buildfrom a local server, enabling you to preview the production build of your application before deploying it.
Also make sure that type is set to module in package.json.
{
"name": "into-to-solid",
"description": "An example SolidJS application using Solid Router and Vite",
"type": "module",
"keywords": ["SolidJS"],
"author": "Anthony Campolo",
"license": "MIT",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"devDependencies": {
"@solidjs/meta": "^0.28.0",
"@solidjs/router": "^0.4.3",
"solid-js": "^1.5.5",
"vite": "^3.1.3",
"vite-plugin-solid": "^2.3.6"
}
}
Create a vite.config.js file.
echo > vite.config.js
Vite works with multiple frameworks that use different syntaxes and file types like React, Vue, and Svelte. Vite will know what to expect and how to handle different frameworks through plugins in its configuration file.
// vite.config.js
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
export default defineConfig({
plugins: [solidPlugin()]
});
Here we have defined our Vite configuration with the Solid Plugin. It is imported as solidPlugin from vite-plugin-solid and added to the plugins array inside Vite's defineConfig helper.
HTML Entry Point
Create an index.html file for our HTML entry point. This will be the page shell that our root DOM will render into.
echo > index.html
The root Solid component will be imported as an ESM module from /src/root.jsx and set to the src attribute on script.
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>A First Look at Solid</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/src/root.jsx" type="module"></script>
</body>
</html>
Render Function
In a SolidJS application, the root render function is responsible for mounting your application to a DOM element. Create a file called root.jsx in a directory called src.
mkdir src
echo > src/root.jsx
render is the root render function imported from solid-js/web and is analogous to ReactDOM.render() in a React application or Vue.mount() in a Vue application.
The root render function takes two arguments:
- The component that you want to render
- The DOM element you want to render it into
// src/root.jsx
/* @refresh reload */
import { render } from 'solid-js/web';
function App() {
return (
<div>
<header>
<h1>A First Look at Solid</h1>
<a href="<https://github.com/solidjs/solid>">Learn Solid</a>
</header>
</div>
);
}
render(() => <App />, document.getElementById('root'));
Here, the App component is the top-level component for the application where your main application logic resides. document.getElementById('root') is the DOM node that the application will be mounted to.
This is typically a div with an id of root in your HTML. Once this code runs, SolidJS will create an instance of App, mount it to the specified DOM node, and keep it up-to-date with the state of your application.
Start Development Server
Run pnpm dev or npm run dev to start the development server on localhost.
pnpm dev
# npm run dev
Open localhost:5173 to view the running application in your browser. The page will reload if you make edits.
