Repository files navigation

Rakkas is a bleeding-edge full-stackReact framework powered byVite. You can consider it an up-and-coming alternative toNext.js,Remix, orGatsby.

• 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

• Although many features have been implemented, Rakkas is still under heavy development. It usesexperimental and/or beta features of React and Vite. Minor releases will introduce breaking changes until we hit 1.0. As such, it'snot 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 tryvite-ssr-plugin.

🚀 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# orpnpm create rakkas-app my-rakkas-app# oryarn 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-domnpm install --save-dev vite rakkasjs

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

exportdefaultfunctionHomePage(){return<h1>Hello world!</h1>;}

Now you can:

• Start a development server withnpx rakkas
• Build withnpx rakkas build
• Launch withnode dist/server/index.js

• Fatih Aygün andcontributors, underMIT License.
• Logomark: “Flamenco” bygzz from Noun Project (not affiliated) underCreative Commons Attribution Generic license (CCBY)
• Parts of the CLI are based onVite CLI by Yuxi (Evan) You (not affiliated) and Vite contributors (not affiliated), used underMIT License.
• Published npm package bundles the following software:
  • @brillout/json-serializer by Romuald Brillout (not affiliated), used underMIT License.
  • react-error-boundary by Brian Vaughn (not affiliated), used underMIT License
  • @microsoft/fetch-event-source by Microsoft Corporation (not affiliated), used underMIT License

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

• 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-inspireduseQuery anduseMutation
  • Remix-inspired action handlers
  • API-less data fetching withuseServerSideQuery
  • Waterfall-freepreload 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

• 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

• 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