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:

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

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:

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.