SolidStart
Written by Mojtaba Seyedi
Last update: 4/17/2024
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.
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.
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.
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
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.
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.
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 })
})
]
});
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.