rakkasjs

Bleeding-edge React framework powered by Vite

npm type definitions

Read the guide | Try on CodeSandbox | Try on StackBlitz

</div>

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:

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/index.js

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:
- @brillout/json-serializer by Romuald Brillout (not affiliated), used under MIT License.
- react-error-boundary by Brian Vaughn (not affiliated), used under MIT License
- @microsoft/fetch-event-source by Microsoft Corporation (not affiliated), used under MIT License

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