SolidJS-Shop

create project by JavaScript template

npx degit solidjs/templates/js my-app
cd my-app
npm i # or yarn or pnpm
npm run dev # or yarn or pnpm

create project by TypeScript template

npx degit solidjs/templates/ts my-app
cd my-app
npm i # or yarn or pnpm
npm run dev # or yarn or pnpm

install plugin

• solid-app-router: https://github.com/solidjs/solid-app-router

  npm i solid-app-router
  

• tailwindcss: https://dev.to/wobsoriano/install-tailwind-css-in-solid-and-vite-jfl

  npm i -D tailwindcss@latest postcss@latest autoprefixer@latest
  

  Next, generate tailwind.config.js and postcss.config.js files by this command:

  npx tailwindcss init -p
  

  Open the tailwind.config.js file and update the purge property to include the path to our src folder and index.html file.

  module.exports = {
      purge: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
      darkMode: false, // or 'media' or 'class'
      theme: {
          extend: {},
      },
      variants: {
          extend: {},
      },
      plugins: [],
  }
  

  Next, we’ll import Tailwind’s styles using the @tailwind directive within our entry CSS file:

  /* ./src/index.css */
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

  Finally, ensure your CSS file is being imported in your ./src/index.js or ./src/index.ts file:

  import { render } from "solid-js/web";
  
  import "./index.css";
  import App from "./App";
  
  render(() => <App />, document.getElementById("root"));
  

• Or we can use Vite + Solid + Tailwind CSS starter: https://github.com/wobsoriano/vite-solid-tailwind-starter

changes

• FunctionComponent => Component
• useMemo => createMemo > no need dependencies for createMemo
• onChange => onKeyUp
• e.target.value => e.currentTarget.value
• instead of map, we use <For></For> on solid-js. Also no need key for that.
• useState => createSignal
• useEffect => createResource

Deployment

npm run deploy

We can deploy the dist folder to any static host provider (netlify, surge, now, etc.)