app.tsx

`app.tsx` defines the document that your application renders.

tsx
import { MetaProvider(alias) const MetaProvider: ParentComponent
import MetaProvider, Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title } from "@solidjs/meta";
import { Router(alias) function Router(props: RouterProps): JSX.Element
import Router } from "@solidjs/router";
import { FileRoutes(alias) const FileRoutes: () => any[]
import FileRoutes } from "@solidjs/start/router";
import { SuspenseTracks all resources inside a component and renders a fallback until they are all resolved
```typescript
const AsyncComponent = lazy(() => import('./component'));

<Suspense fallback={<LoadingIndicator />}>
  <AsyncComponent />
</Suspense>
```

(alias) function Suspense(props: {
    fallback?: JSX.Element;
    children: JSX.Element;
}): JSX.Element
import Suspense } from "solid-js";
 
export default function Appfunction App(): JSX.Element() {
  return (
    <Router(alias) function Router(props: RouterProps): JSX.Element
import Router
      rootA component that wraps the content of every route.

(property) root?: Component<RouteSectionProps<unknown>> | undefined={props(parameter) props: RouteSectionProps<unknown> => (
        <MetaProvider(alias) const MetaProvider: ParentComponent
import MetaProvider>
          <Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title>SolidStart - Basic</Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title>
          <a(property) JSX.HTMLElementTags.a: JSX.AnchorHTMLAttributes<HTMLAnchorElement> href(property) JSX.AnchorHTMLAttributes<HTMLAnchorElement>.href?: string | undefined="/">Index</a(property) JSX.HTMLElementTags.a: JSX.AnchorHTMLAttributes<HTMLAnchorElement>>
          <a(property) JSX.HTMLElementTags.a: JSX.AnchorHTMLAttributes<HTMLAnchorElement> href(property) JSX.AnchorHTMLAttributes<HTMLAnchorElement>.href?: string | undefined="/about">About</a(property) JSX.HTMLElementTags.a: JSX.AnchorHTMLAttributes<HTMLAnchorElement>>
          <SuspenseTracks all resources inside a component and renders a fallback until they are all resolved
```typescript
const AsyncComponent = lazy(() => import('./component'));

<Suspense fallback={<LoadingIndicator />}>
  <AsyncComponent />
</Suspense>
```

(alias) function Suspense(props: {
    fallback?: JSX.Element;
    children: JSX.Element;
}): JSX.Element
import Suspense>{props(parameter) props: RouteSectionProps<unknown>.children(property) RouteSectionProps<unknown>.children?: JSX.Element}</SuspenseTracks all resources inside a component and renders a fallback until they are all resolved
```typescript
const AsyncComponent = lazy(() => import('./component'));

<Suspense fallback={<LoadingIndicator />}>
  <AsyncComponent />
</Suspense>
```

(alias) function Suspense(props: {
    fallback?: JSX.Element;
    children: JSX.Element;
}): JSX.Element
import Suspense>
        </MetaProvider(alias) const MetaProvider: ParentComponent
import MetaProvider>
      )}
    >
      <FileRoutes(alias) const FileRoutes: () => any[]
import FileRoutes />
    </Router(alias) function Router(props: RouterProps): JSX.Element
import Router>
  );
}

tsx
import { MetaProvider(alias) const MetaProvider: ParentComponent
import MetaProvider, Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title } from "@solidjs/meta";
import { Router(alias) function Router(props: RouterProps): JSX.Element
import Router } from "@solidjs/router";
import { FileRoutes(alias) const FileRoutes: () => any[]
import FileRoutes } from "@solidjs/start/router";
import { SuspenseTracks all resources inside a component and renders a fallback until they are all resolved
```typescript
const AsyncComponent = lazy(() => import('./component'));

<Suspense fallback={<LoadingIndicator />}>
  <AsyncComponent />
</Suspense>
```

(alias) function Suspense(props: {
    fallback?: JSX.Element;
    children: JSX.Element;
}): JSX.Element
import Suspense } from "solid-js";
 
export default function Appfunction App(): JSX.Element() {
  return (
    <Router(alias) function Router(props: RouterProps): JSX.Element
import Router
      rootA component that wraps the content of every route.

(property) root?: Component<RouteSectionProps<unknown>> | undefined={props(parameter) props: RouteSectionProps<unknown> => (
        <MetaProvider(alias) const MetaProvider: ParentComponent
import MetaProvider>
          <Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title>SolidStart - Basic</Title(alias) const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>>
import Title>
          <a(property) JSX.HTMLElementTags.a: JSX.AnchorHTMLAttributes<HTMLAnchorElement> href(property) JSX.AnchorHTMLAttributes<HTMLAnchorElement>.href?: string | undefined="/">Index</a(property) JSX.HTMLElementTags.a: JSX.AnchorHTMLAttributes<HTMLAnchorElement>>
          <a(property) JSX.HTMLElementTags.a: JSX.AnchorHTMLAttributes<HTMLAnchorElement> href(property) JSX.AnchorHTMLAttributes<HTMLAnchorElement>.href?: string | undefined="/about">About</a(property) JSX.HTMLElementTags.a: JSX.AnchorHTMLAttributes<HTMLAnchorElement>>
          <SuspenseTracks all resources inside a component and renders a fallback until they are all resolved
```typescript
const AsyncComponent = lazy(() => import('./component'));

<Suspense fallback={<LoadingIndicator />}>
  <AsyncComponent />
</Suspense>
```

(alias) function Suspense(props: {
    fallback?: JSX.Element;
    children: JSX.Element;
}): JSX.Element
import Suspense>{props(parameter) props: RouteSectionProps<unknown>.children(property) RouteSectionProps<unknown>.children?: JSX.Element}</SuspenseTracks all resources inside a component and renders a fallback until they are all resolved
```typescript
const AsyncComponent = lazy(() => import('./component'));

<Suspense fallback={<LoadingIndicator />}>
  <AsyncComponent />
</Suspense>
```

(alias) function Suspense(props: {
    fallback?: JSX.Element;
    children: JSX.Element;
}): JSX.Element
import Suspense>
        </MetaProvider(alias) const MetaProvider: ParentComponent
import MetaProvider>
      )}
    >
      <FileRoutes(alias) const FileRoutes: () => any[]
import FileRoutes />
    </Router(alias) function Router(props: RouterProps): JSX.Element
import Router>
  );
}

Usage

Setting up your application

The App component exported from app.tsx is the isomorphic (shared on server and browser) entry into your application. This is the point where the code runs on both sides. This is like the classic entry point you would find in Create React App or similar, where you can define your router, and other top level components.

Our basic example (as shown above) includes @solidjs/router and @solidjs/meta. But this can really be whatever you want.

app.tsx

app.tsx defines the document that your application renders.

Usage

Setting up your application

`app.tsx` defines the document that your application renders.