AimWhy/rakkasjs

Bleeding-edge React framework powered by Vite

Bleeding-edge React framework powered by Vite

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.

• Chat on Discord
• Follow on Twitter

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:

• CodeSandbox
• StackBlitz

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

Credits

• Fatih Aygün, under MIT License.
• Logomark: “Flamenco” by gzz from Noun Project (not affiliated) under Creative Commons Attribution Generic license (CCBY)
• Parts of the CLI are based on Vite CLI by Yuxi (Evan) You (not affiliated) and Vite contributors (not affiliated), used under MIT License.
• Published npm package bundles the following software:
  • react-helmet-async by Scott Taylor (not affiliated), used under Apache 2.0 license.
  • @brillout/json-serializer by Romuald Brillout (not affiliated), used under MIT License.
  • react-error-boundary by Brian Vaughn (not affiliated), used under MIT License

Version history

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