Skip to content

migration-guide.md

Latest commit

 

History

History
174 lines (128 loc) · 3.68 KB

migration-guide.md

File metadata and controls

174 lines (128 loc) · 3.68 KB

Migration Guide

Migrate to laroux from other frameworks.

Framework Comparison

Feature Next.js Remix Fresh laroux
Runtime Node.js/Edge Node.js Deno Deno
Components RSC Islands Islands RSC
Routing File-based File-based File-based File-based
Data Loading Server Comp. loader() Handlers Server Comp.
Mutations Server Actions action() Handlers Server Actions
Config next.config.js remix.config fresh.gen laroux.config

Quick Migration Steps

1. Install Deno

curl -fsSL https://deno.land/install.sh | sh

2. Install eser CLI

deno run -Ar jsr:@eser/cli install

3. Create Project

# Clone the repository
git clone https://github.com/eser/laroux.git
cd laroux

Coming Soon: Cloning templates via eser cli.

4. Migrate Components

Static components → Server Components (no changes needed):

// Works the same in laroux
export function Header() {
  return <h1>My App</h1>;
}

Interactive components → Add "use client":

"use client";
import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

5. Migrate Data Fetching

Before (useEffect):

const [data, setData] = useState([]);
useEffect(() => {
  fetch("/api/data").then((r) => r.json()).then(setData);
}, []);

After (Server Component):

export default async function Page() {
  const data = await fetch("https://api.example.com/data").then((r) =>
    r.json()
  );
  return <div>{data.title}</div>;
}

6. Migrate Mutations

Before (API routes / loaders):

// Next.js: app/api/posts/route.ts
export async function POST(request) {
  const data = await request.json();
  await db.posts.create(data);
  return Response.json({ success: true });
}

After (Server Actions):

// actions.ts
"use server";

export async function createPost(formData: FormData) {
  await db.posts.create({ title: formData.get("title") });
  return { success: true };
}

// form.tsx
"use client";
import { createPost } from "./actions.ts";

export function Form() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button>Submit</button>
    </form>
  );
}

7. Update Imports

From To
next/image <img> or laroux/image
next/link <a> or Link component
process.env.VAR Deno.env.get("VAR")
useLoaderData() async Server Component
useRouteError() React Error Boundary

8. Migrate Styling

Both use Tailwind CSS (laroux uses v4.0):

/* src/styles/global.css */
@import "tailwindcss";

What's Not Supported Yet

  • File-based routing (use component composition)
  • next/image optimization (use standard <img>)
  • next/link prefetching (use standard <a>)
  • Middleware
  • International routing

Migration Checklist

  • Install Deno v2.6+
  • Create project
  • Identify Server vs Client Components
  • Add "use client" to interactive components
  • Migrate data fetching to async Server Components
  • Convert API routes to Server Actions
  • Update process.env to Deno.env.get()
  • Test thoroughly

Getting Help