Rakkas

Bleeding-edge React framework powered by Vite

README

Rakkas


Bleeding-edge React framework powered by Vite

Build Status npm type definitions MIT license React Vite Tweet about Rakkas


Rakkasis 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 featuresof 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:

  1. ``` shell
  2. npx create-rakkas-app@latest my-rakkas-app
  3. # or
  4. pnpm create rakkas-app my-rakkas-app
  5. # or
  6. yarn create rakkas-app my-rakkas-app
  7. ```

create-rakkas-appproject 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:


  1. ``` shell
  2. npm install --save react react-dom
  3. npm install --save-dev vite rakkasjs
  4. ```

Then create a src/routes/index.page.jsxfile like this:

  1. ``` js
  2. export default function HomePage() {
  3. return <h1>Hello world!</h1>;
  4. }
  5. ```

Now you can:

Start a development server with npx rakkas
Build with npx rakkas build
Launch with node dist/server

Credits


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 useQueryand useMutation
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