Loly
3.2k
Get Started
Documentation

Getting Started

Get up and running with Loly Framework in minutes.

Installation

Create a new Loly application using the Loly CLI:

npx @lolyjs/cli@latest my-app

This will create a new project with all the necessary files and dependencies. Navigate into your project directory:

cd my-app

Create Your First Page

Create a new page by adding a file to the app directory:

app/page.tsx
export default function Home() {
  return <h1>Hello, Loly!</h1>;
}

This creates a page at the root route /.

Server-Side Data

Fetch data on the server by creating a page.server.hook.ts file:

app/page.server.hook.ts
import type { ServerLoader } from "@lolyjs/core";

export const getServerSideProps: ServerLoader = async (ctx) => {
  const data = await fetchData();

  return {
    props: { data },
    metadata: {
      title: "Home Page",
      description: "Welcome to Loly",
    },
  };
};

Access the data in your component through props:

app/page.tsx
export default function Home({ props }: { props: { data: string } }) {
  return <h1>{props.data}</h1>;
}

Note: For layouts, use layout.server.hook.ts in the same directory as layout.tsx to provide stable props shared across all pages.

Example with Layout Server Hook:

app/layout.server.hook.ts
import type { ServerLoader } from "@lolyjs/core";

export const getServerSideProps: ServerLoader = async (ctx) => {
  // Data shared across all pages
  return {
    props: {
      appName: "My App",
      navigation: [
        { href: "/", label: "Home" },
        { href: "/about", label: "About" },
      ],
    },
  };
};

Development Server

Start the development server:

npm run dev

The server will run on http://localhost:3000 by default.

Next Steps

Now that you have Loly set up, explore the documentation to learn more: