• Stars
    star
    5,117
  • Rank 8,118 (Top 0.2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 3 years ago
  • Updated about 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

SolidStart, the Solid app framework

Solid Docs

SolidStart

This is the home of the Solid app framework. This is still a work in progress. Many features are missing or incomplete. Experimental status does not even mean beta status. Patch releases will break everything.

  • File-system based routing
  • Supports all rendering modes:
    • Server-side rendering (SSR)
    • Streaming SSR
    • Client-side rendering (CSR)
    • Static Site Generation (SSG)
  • Streaming
  • Build optimizations with Code splitting, tree shaking and dead code elimination
  • API Routes
  • Built on Web standards like Fetch, Streams, and WebCrypto
  • Adapters for deployment to all popular platforms
  • CSS Modules, SASS/SCSS Support
  • TypeScript-first

Getting started

mkdir my-app
cd my-app

# with npm
npm init solid@latest
npm install
npm run dev

# or with pnpm
pnpm create solid@latest
pnpm install
pnpm dev

Development

The monorepo uses pnpm as the package manager. To install pnpm, run the following command in your terminal.

npm install -g pnpm

Run pnpm install to install all the dependencies for the packages and examples in your monorepo.

Monorepo & project.json "workspace" support

If you are using Solid Start within a monorepo that takes advantage of the package.json "workspaces" property (e.g. yarn workspaces) with hoisted dependencies (the default for yarn), you must include solid-start within the optional "nohoist" (for yarn v2 or higher, see further down for instructions) workspaces property.

  • In the following, "workspace root" refers to the root of your repository while "project root" refers to the root of a child package within your repository

For example, if specifying "nohoist" options from the workspace root (i.e. for all packages):

// in workspace root
{
  "workspaces": {
    "packages": [
      /* ... */
    ],
    "nohoist": ["**/solid-start"]
  }
}

If specifying "nohoist" options for a specific package using solid-start:

// in project root of a workspace child
{
  "workspaces": {
    "nohoist": ["solid-start"]
  }
}

Regardless of where you specify the nohoist option, you also need to include solid-start as a devDependency in the child package.json.

The reason why this is necessary is because solid-start creates an index.html file within your project which expects to load a script located in /node_modules/solid-start/runtime/entry.jsx (where / is the path of your project root). By default, if you hoist the solid-start dependency into the workspace root then that script will not be available within the package's node_modules folder.

Yarn v2 or higher

The nohoist option is no longer available in Yarn v2+. In this case, we can use the installConfig property in the package.json (either workspace package or a specific project package) to make sure our deps are not hoisted.

// in project root of a workspace child
{
  "installConfig": {
    "hoistingLimits": "dependencies"
  }
}

Credits

All credit for the work on Forms and Sessions goes to the @remix-run team, MIT License, Copyright 2021 Remix Software Inc.

More Repositories

1

solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.
TypeScript
31,893
star
2

solid-router

A universal router for Solid inspired by Ember and React Router
TypeScript
1,146
star
3

templates

Vite + solid templates
TypeScript
434
star
4

vite-plugin-solid

A simple integration to run solid-js with vite
TypeScript
433
star
5

solid-styled-components

A 1kb Styled Components library for Solid
TypeScript
283
star
6

solid-realworld

A Solid Implementation of the Realworld Example App
JavaScript
228
star
7

solid-docs

SolidJS Docs.
MDX
214
star
8

solid-testing-library

Simple and complete Solid testing utilities that encourage good testing practices.
TypeScript
195
star
9

solid-playground

Quickly discover what the solid compiler will generate from your JSX template
TypeScript
195
star
10

react-solid-state

Auto tracking state management for modern React
TypeScript
188
star
11

solid-site

Code that powers the SolidJS.com platform.
TypeScript
159
star
12

solid-hackernews

Solid implementation of Hacker News
JavaScript
158
star
13

signals

TypeScript
134
star
14

solid-meta

Write meta tags to the document head
TypeScript
127
star
15

solid-refresh

TypeScript
84
star
16

solid-workgroup

Workgroup for future Solid Releases
54
star
17

solid-styled-jsx

A Styled JSX wrapper for Solid
JavaScript
47
star
18

solid-jest

Jest preset for SolidJS
JavaScript
34
star
19

create-solid

Set up a modern web app by running one command
JavaScript
32
star
20

solid-todomvc

Solid implementation of TodoMVC
TypeScript
29
star
21

solidhack-submissions

A repository for collecting SolidHack submissions.
JavaScript
20
star
22

solid-repl

A REPL for SolidJS
TypeScript
14
star
23

solid-service-api

Code that powers Solid Service API on Cloudflare Workers.
JavaScript
13
star
24

solidex

Solidex is a list of SolidJS ecosystem resources and packages.
TypeScript
11
star
25

solid-scripts

No configuration CLI tools to bootstrap Solid applications
JavaScript
10
star
26

solid-assets

Access official dynamic and static assets from SolidJS. Made for the community! 🌟
TypeScript
7
star
27

solid-hot-loader

Webpack Loader with Hot Module Reloading for SolidJS
JavaScript
5
star
28

.github

Community health files for the @solidjs organization
3
star
29

solidhack

Website and contest portal for SolidHack.
TypeScript
2
star