🌟 We are Open Source! Check out our repository on GitHub

Solid.js Project Structure

A scalable and maintainable folder structure for Solid.js applications

File Structure

  • src
    • index.tsx
    • App.tsx
    • components
      • Counter.tsx
      • Header.tsx
    • assets
      • logo.svg
      • index.css
  • index.html
  • vite.config.ts
  • package.json
  • README.md

Directory Structure Explanation

src/

The main source directory containing all Solid.js application code and assets.

src/index.tsx

The entry point of the Solid.js application where the app is rendered to the DOM using Solid's render function.

src/App.tsx

The root component of the application that serves as the main container for all other components.

src/components/

Contains reusable Solid.js components that can be imported and used throughout the application.

components/Counter.tsx

A sample component demonstrating Solid.js reactivity with signals and effects.

components/Header.tsx

A header component typically used for navigation and branding across the application.

src/assets/

Contains static assets like stylesheets, images, and other resources used throughout the application.

assets/logo.svg

The application logo in SVG format for scalability.

assets/index.css

Global CSS styles that apply to the entire application.

index.html

The main HTML file that serves as the entry point for the application in the browser.

vite.config.ts

Configuration file for Vite, the build tool used with Solid.js for development and production builds.

package.json

Defines project metadata, dependencies, and scripts for running and building the application.