SolidStart

SHARE

SolidStart

SHARE

SolidStart

SolidStart is a new meta framework that combines the best features of popular web frameworks like Next.js, Remix, and SvelteKit, focusing on performance and efficiency.

Written by:
  • Mojtaba Seyedi

    Mojtaba Seyedi

Last update: April 11, 2023
  • SolidStart logo
  • Core Maintainer: Ryan Carniato
  • Website: start.solidjs.com
  • Founded: 2022
  • Github Stars:
  • npm downloads:

SolidStart is a new meta framework that has recently made its way into the world of web development. Similar to how SvelteKit is to Svelte and Remix is to React, SolidStart is built on top of SolidJS and provides powerful tools for creating performant web applications.

If you're looking for a simpler alternative to React and want to take advantage of SolidJS's great features, SolidStart is worth checking out.

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:

  • 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:

Then you can lunch SolidStart CLI using the init command:

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

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

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:

Finally, you can install the required npm packages:

And run your project using the dev command:

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:

This command will run solid-start build underneath.

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

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:

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

You can do the same thing for Netlify Edge:

And in the vite.config.ts file:

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.

  • Web standards
  • Multiple rendering modes: CSR, SSR, Streaming SSR, SSG
  • File-system based routing
  • Nested routing
  • Dynamic API routes
  • Streaming support
  • Easy deployment for different platforms with Adapters
  • Zero-config
  • Automatic code splitting
  • Typescript support
  • Tree shaking
  • Dead code elimination
  • CSS Modules, SASS/SCSS Support
  • Supports serverless and edge functions on AWS, Cloudflare, Deno Deploy, Netlify, Vercel
Use Cases
  • Simple static sites to large, complex applications
  • Admin dashboard application
  • eCommerce websites
  • Landing pages and marketing websites. Especially, if you already use Solid and have a design system
  • Blogs / content-based websites

Compare SolidStart with

  • Gatsby logo
  • Eleventy logo
  • Gridsome logo
  • Hugo logo
  • Jekyll logo
  • Scully logo
  • Bridgetown logo