Skip to content

rakkasjs/rakkasjs

Repository files navigation

Rakkas

Bleeding-edge React framework powered by Vite

Build Status npm type definitions MIT license React Vite Tweet about Rakkas

Read the guide | Try on CodeSandbox | Try on StackBlitz


Rakkas is a bleeding-edge full-stack React framework powered by Vite. You can consider it an up-and-coming alternative to Next.js, Remix, or Gatsby.

Important features are:

  • ⚡  Lightning fast development server
  • 🖥️  Streaming SSR with Suspense
  • 🔀  Dynamic rendering (full static pages for bots, streaming for browsers)
  • ⬇️  API-less data fetching system
  • 🚀  Support for serverless and worker environments
  • 📄  Static site generation
  • 📁  Flexible file system router
  • ⚙️  API routes with middleware support

Is Rakkas right for you?

  • Although many features have been implemented, Rakkas is still under heavy development. It uses experimental and/or beta features of React and Vite. Minor releases will introduce breaking changes until we hit 1.0. As such, it's not yet ready for production use. If you need a stable React framework try Next.js, Remix, or Gatsby.
  • Rakkas is fairly opinionated. If you need more flexibility try vite-ssr-plugin.

Getting started

🚀 See Rakkas in action in your browser:

To generate a Rakkas application boilerplate use one of the following commands:

npx create-rakkas-app@latest my-rakkas-app
# or
pnpm create rakkas-app my-rakkas-app
# or
yarn create rakkas-app my-rakkas-app

create-rakkas-app project initializer comes with many features, all of which are optional but we strongly recommend enabling TypeScript and the generation of a demo project on your first try because self-documenting type definitions allow for a smoother learning curve and the demo project source code comes with plenty of comments.

👷 If you prefer a manual setup, you can install the following packages:

npm install --save react react-dom
npm install --save-dev vite rakkasjs

Then create a src/routes/index.page.jsx file like this:

export default function HomePage() {
  return <h1>Hello world!</h1>;
}

Now you can:

  • Start a development server with npx rakkas
  • Build with npx rakkas build
  • Launch with node dist/server/index.js

Credits

Version history

0.7.0 (install with rakkasjs@next)

  • Replace react-helmet-async with a custom component (reduces bundle size by 17KB)

0.6.0

  • React 18
    • Concurrent mode
    • Streaming SSR
    • Suspense for data fetching
  • Vite 3
    • ESM SSR build ("type": "module")
    • Improved cold start
  • Brand new data fetching system
    • react-query-inspired useQuery and useMutation
    • Remix-inspired action handlers
    • API-less data fetching with useServerSideQuery
    • Waterfall-free preload functions
    • Remix-inspired form action handlers
  • HatTip
    • HTTP handling based on web standards
    • Adapters for Vercel Edge, Netlify Edge, and Deno/Deno Deploy
    • Express integration
  • Routing improvements
    • Route guards
    • Catch-all routes
    • Simpler 404 handling
  • Miscellaneous
    • Response headers customization
    • Shared ESLint configuration

0.5.0

  • Serverless support (Vercel, Netlify, Cloudflare Workers)
  • Improved client-side navigation
  • Improved SSRRomuald Brillout
  • Partial pre-rendering
  • Client-only pages
  • Localizable URLs
  • Cache-control header setting

0.4.0

  • Static site generation
  • Switch to React automatic JSX runtime
  • Integration examples (Apollo GraphQL, Styled Components, MDX, Tailwind CSS)
  • More options in the project generator
  • Lots of minor features and fixes
  • Much-expanded documentation