SolidStart Review and Features

Keep in mind that SolidStart is still in beta. So, if you're planning to use it for a production application, be careful and test it thoroughly first. Also, the information in this article may change as the framework evolves, so check for updates before using it in your project.

What is SolidStart?

SolidStart is a meta framework built on top of SolidJS, a powerful UI library. Think of a meta framework as a bundle of libraries and concepts designed to optimize front-end apps while also enabling server-side work, REST API creation, and database interaction. In other words, SolidStart goes beyond just building client-side web applications and offers a full-stack solution for web development. By using SolidStart, developers can take advantage of SolidJS's capabilities and enjoy features like server-side rendering and data fetching, making it easier to build robust and SEO-friendly web applications that load quickly.

SolidStart Features

Since SolidStart is built on top of SolidJS, it inherits all of the benefits of SolidJS, such as fine-grained reactivity, declarative syntax, TypeScript-first approach, and support for modern web standards such as Fetch and Streams. Other key features of SolidStart include:

• File-based routing: SolidStart uses file-based routing, making organizing your application's pages and routes easy.
• Multiple rendering modes: SolidStart can create client-side, server-side, streaming server-side, or static site generation (SSG) applications.
• Deployment adapters: SolidStart provides adapters to support deployment to popular platforms such as Netlify, Vercel, AWS, and Cloudflare.
• Fine-grained reactivity: SolidStart benefits from the fine-grained reactivity offered by SolidJS, allowing for efficient updates.
• API routes: SolidStart makes it easy to create API endpoints that can be used to fetch data or perform server-side actions.
• Isomorphic code: SolidStart allows you to write code once and run it correctly on the client or the server.
• Server functions: SolidStart makes it easy to define RPC functions using its $server function, allowing for running any function only on the server.
• Built-in optimizations: SolidStart includes build optimizations such as code splitting, tree shaking, and dead code elimination, allowing faster load times and improved performance.
• Forms and server actions: Similar to RemixJS, SolidStart allows you to use forms to trigger server actions, making it easy to create complex user interactions.

With its powerful tools and features, SolidStart offers developers an environment to create robust, performant web applications.

File Structure

The bare project structure in SolidStart looks like the following:

my-solid-start-app
├── public
│   └── favicon.svg
├── src
│   ├── routes
│   │   ├── [...404].jsx
│   │   └── index.jsx
│   ├── entry-client.jsx
│   ├── entry-server.jsx
│   ├── root.jsx 
│   └── root.css
├── vite.config.js
└── package.json

• public: This folder contains public static assets like images, fonts, etc.
• src: This is where most of your SolidStart app code lives. Note that It's aliased to ~/ for importing in your code.
• src/routes: This is where you define all your pages/routes.
• src/routes/index.jsx: This is basically the homepage of your application.
• src/routes/[...404].jsx: This handles the non-existing page errors under the routes directory.
• src/root.jsx: This is the HTML root of your application, both for client and server rendering. This is the shell inside which your application will be rendered.
• src/entry-client.tsx: This is what loads and hydrates the JavaScript for your application on the client side.
• src/entry-server.tsx: This handles requests on the server.
• vite.config.js: This is where you configure your application.

Ecosystem

SolidStart is a relatively new web framework, so its ecosystem is still growing. However, the framework is built on top of SolidJS, which has a vibrant community of developers. SolidStart developers can take advantage of the SolidJS ecosystem of plugins and add-ons.

Also another helpful resource for SolidStart developers is the SolidJS Discord channel. This channel is a great place to ask questions, get help with code, and connect with other developers working with SolidJS and SolidStart. The Discord community is friendly and active and can be a valuable resource for developers at all skill levels.

In addition to the Discord channel, SolidStart developers can participate in discussions on the SolidJS GitHub repository.

Showcase

How to get started With SolidStart?

Here is how you can start a SolidStart project. First, you need to create a directory for your application and move to it with the following commands:

mkdir my-app

cd my-app

Then you can lunch SolidStart CLI using the init command:

npm init solid@latest

If you are using pnpm, you can instead use create command:

pnpm create solid

This will prompt you to answer a few questions and configure the project:

? Which template do you want to use? › - Use arrow-keys. Return to submit.

❯ bare

hackernews

with-auth

with-mdx

with-tailwindcss

with-vitest

Use the bare option if you want to have a basic project initialized.

Then you need to choose if you want to have server-side rendering and typescript:

√ Which template do you want to use? » bare

√ Server Side Rendering? ... yes

√ Use TypeScript? ... no

Finally, you can install the required npm packages:

npm install

And run your project using the dev command:

npm run dev

Your project is available on localhost:3000.

Deploying SolidStart

To build your project, you can use the following command to bundle your server and client using Vite:

npm run build

This command will run solid-start build underneath.

Also, you can run your project in production mode with the start command:

npm start

This will run solid-start start underneath and provide a URL for you to see your built project in your browser.

You can deploy your SolidStart project on all the popular platforms using their specific adapter:

• Node
• Static hosting
• Netlify Functions & Edge
• Vercel Functions & Edge
• AWS Lambda & Lambda@Edge
• Cloudflare Workers & Pages
• Deno Deploy

All you need to do is install your target environment's adapter.

For example, here I install Vercel’s adapter using npm:

npm install --save-dev solid-start-vercel

Now you need to import the adapter in your vite.config.ts file and configure your application like this:

import vercel from "solid-start-vercel";
import solid from "solid-start/vite";
import { defineConfig } from "vite";
export default defineConfig({
  plugins: [
    solid({
      adapter: vercel()
    })
  ]
});

You can do the same thing for Netlify Edge:

npm install --save-dev solid-start-netlify

And in the vite.config.ts file:

import netlify from "solid-start-netlify";
import solid from "solid-start/vite";
import { defineConfig } from "vite";
export default defineConfig({
  plugins: [
    solid({
      adapter: netlify({ edge: true })
    })
  ]
});

Final Thoughts

SolidStart is a new meta framework with great community support from SolidJS. It's an excellent alternative for those who want to try something different from React. Keep an eye on SolidStart's development and updates, as it's expected to evolve and offer even more exciting features.