• Stars
    star
    4,465
  • Rank 9,128 (Top 0.2 %)
  • Language
    HTML
  • License
    MIT License
  • Created about 3 years ago
  • Updated 20 days 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
30,592
star
2

solid-router

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

templates

Vite + solid templates
TypeScript
408
star
4

vite-plugin-solid

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

solid-styled-components

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

solid-realworld

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

solid-testing-library

Simple and complete Solid testing utilities that encourage good testing practices.
TypeScript
187
star
8

react-solid-state

Auto tracking state management for modern React
TypeScript
185
star
9

solid-docs-next

SolidJS Core Docs.
MDX
182
star
10

solid-docs

Cumulative documentation for SolidJS and related packages.
TypeScript
182
star
11

solid-playground

Quickly discover what the solid compiler will generate from your JSX template
TypeScript
173
star
12

solid-site

Code that powers the SolidJS.com platform.
TypeScript
156
star
13

solid-hackernews

Solid implementation of Hacker News
JavaScript
152
star
14

signals

TypeScript
128
star
15

solid-meta

Write meta tags to the document head
TypeScript
101
star
16

solid-refresh

TypeScript
77
star
17

solid-workgroup

Workgroup for future Solid Releases
53
star
18

solid-styled-jsx

A Styled JSX wrapper for Solid
JavaScript
40
star
19

solid-jest

Jest preset for SolidJS
JavaScript
33
star
20

create-solid

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

solid-todomvc

Solid implementation of TodoMVC
TypeScript
29
star
22

solidhack-submissions

A repository for collecting SolidHack submissions.
JavaScript
20
star
23

solid-repl

A REPL for SolidJS
TypeScript
14
star
24

solid-service-api

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

solidex

Solidex is a list of SolidJS ecosystem resources and packages.
TypeScript
10
star
26

solid-scripts

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

solid-assets

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

solid-hot-loader

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

.github

Community health files for the @solidjs organization
3
star
30

solidhack

Website and contest portal for SolidHack.
TypeScript
2
star