SolidStart Boilerplate With Dev Essentials

This is a clone of a solid-start bare Solid project via npm init solid@latest with TypeScript and SSR.

This boilerplate adds the following:

(Opinionated) Essentials

• use .yarn package manager on berry@^3 with .yarnrc.yml

• add .npmrc and .nvmrc for the minimum supported node version of all modules via ls-engines

• Eslint and Prettier configs and plugins

  ▷ devDependencies

  
  

      "@typescript-eslint/eslint-plugin": "^5.43.0",
      "@typescript-eslint/parser": "^5.43.0",
      "eslint": "^8.28.0",
      "eslint-config-airbnb-base": "^15.0.0",
      "eslint-config-airbnb-typescript": "^17.0.0",
      "eslint-config-prettier": "^8.5.0",
      "eslint-plugin-prettier": "^4.2.1",
      "eslint-plugin-solid": "^0.8.0",
      "prettier": "^2.7.1",

  
  

• VSCode formatOnSave actionsOnSave typescript.tsdk

  ▷ .vscode/settings.json

  
  

  {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.organizeImports": true,
      "source.fixAll.eslint": true
    },
    "eslint.format.enable": true,
    "eslint.lintTask.enable": true,
    "typescript.tsdk": "node_modules/typescript/lib"
  }

  
  

• Vercel Adapter on Vite plugin configs

  ▷ vite.config.ts

  
  

  import vercel from "solid-start-vercel";
  import solid from "solid-start/vite";
  import { defineConfig } from "vite";
  
  export default defineConfig({
    /**
     * Use vercel adapter to deploy to vercel
     * @see {@link https://github.com/vercel/vercel/tree/main/examples/solidstart solidstart}
     *
     * Additional options on how use edge runtime over node
     * @see {@link https://github.com/solidjs/solid-start/tree/main/packages/start-vercel start-vercel}
     */
    plugins: [solid({ adapter: vercel() })],
  });

  
  

Installation

• Clone this Repo

  git clone ssh://git@github.com/israelias/solidstart-boilerplate.git

• Install

  cd solidstart-boilerplate
  yarn install

• Start the development server

  yarn dev

• Or start the server and open the app in a new browser tab

  yarn dev -- --open

Building

Solid apps are built with adapters, which optimise your project for deployment to different environments.

By default, yarn build will generate a Node app that you can run with yarn start.

To use a different adapter (Currently using Vercel Adaptor), add it to the devDependencies in package.json and specify in your vite.config.js.

References

• SolidJS + TypeScript + ESLint + Prettier setup
• Solid ESLint Plugin
• Yarnrc files
• Exlusions for zero-installs
• @vercel/examples/solidstart
• @solid-start/packages/start-vercel
• SolidJS Examples

Todo

• .idea Settings
• .yarnrc.yml
  • yarnPath
  • pnpFallbackMode
• @yarnpkg/sdks