Bleeding-edge React framework powered by Vite
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-appcreate-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 rakkasjsThen create a
src/routes/index.page.jsxfile 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-serializerby Romuald Brillout (not affiliated), used under MIT License.react-error-boundaryby Brian Vaughn (not affiliated), used under MIT License@microsoft/fetch-event-sourceby Microsoft Corporation (not affiliated), used under MIT License
Version history
0.7.0 (install with rakkasjs@next)
- Replace
react-helmet-asyncwith 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
- ESM SSR build (
- Brand new data fetching system
react-query-inspireduseQueryanduseMutation- Remix-inspired action handlers
- API-less data fetching with
useServerSideQuery - Waterfall-free
preloadfunctions - 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-controlheader 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