What is Rakkas?

Rakkas is a web framework powered by React and Vite that aims to have a developer experience similar to Next.js. Many of its features are also inspired by Svelte Kit. Important features are:

• ⚡  Lightning fast development
• 🖥️  Hassle free server-side rendering
• 🚀  Support for deploying on serverless environments
• 📄  Static site generation
• 🇺🇳  Localizable URLs
• 🔀  Rendering modes (pre-rendering, server-side, client-side)
• ☸️  SPA-style client-side navigation
• 📁  Intuitive file system-based routing
• ⬇️  Simple but effective data fetching system
• ⚙️  API routes to build and organize your backend

See the feature comparison with Next.js for other supported and planned features.

Is Rakkas right for you?

• Although many features have been implemented, Rakkas is still in development. There will be 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 or Gatsby.
• Rakkas doesn't aim compatibility with Next.js. Check out Vitext if you want to port a Next.js application to Vite.
• Rakkas is somewhat opinionated. If you need more flexibility try vite-ssr-plugin.

Getting started

🚀 You can now try Rakkas online, right in your browser!

• Rakkas TypeScript demo app on StackBlitz
• Rakkas JavaScript demo app on StackBlitz

The easiest way to try Rakkas out on your computer is to use the project initializer:

# Create the project directory
mkdir my-app && cd my-app
# Scaffold the demo app: Follow the prompts for the rest
npx create-rakkas-app@latest

create-rakkas-app project initializer comes with many features, all off 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. You may not need this guide!

👷 If you prefer a manual setup, you can install rakkasjs, react, react-dom, and react-helmet-async as production dependencies, and @rakkasjs/cli as a dev dependency:

npm install --save rakkasjs react react-dom react-helmet-async
npm install --save-dev @rakkasjs/cli

Then you can start a development server on localhost:3000 with npx rakkas dev, build with npx rakkas build, and launch with node dist/server.

Credits

• Fatih Aygün, under MIT License.
• Logomark: “Flamenco” by gzz from Noun Project (not affiliated) under Creative Commons Attribution Generic license (CCBY)

Version history

0.5.0

• Serverless support (Vercel, Netlify, Cloudflare Workers)
• Improved client-side navigation
• Improved SSR
• 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