Skip to main content

Citric

the fresh logo: a sliced citric dripping with juice

Citricā„¢, the ā€œblazing fastā€ šŸŒ and ā€œbleeding edgeā€ šŸ¤” Fresh fork that you donā€™t need, unless you want:

  • Islands on any directory, only suffix the component with .island.{tsx|ts|jsx|js}.
  • File-system routing Ć  la Next.js SvelteKit, including nested layouts (WIP).
  • More premade plugins, like SPA client navigation.
  • And more unnecesary and forced stuff on this refreshing frankenstein.

ā“ Why?

The real question is: why not?

šŸ“– Documentation

The documentation is the same as Fresh docs, but with some differences:

  • Routes now are folder based, and page components need to be placed on +page.{tsx|ts|jsx|js} files, same for special page components like _{app|404|500}.{tsx|ts|jsx|js} -> +{app|404|500}.{tsx|ts|jsx|js} or /foo/_middleware.ts -> /foo/+middleware.ts, for example. Now is possible to have layouts and nested layouts like SvelteKit with files like /+layout.{tsx|ts|jsx|js}.

šŸš€ Getting started

Install Deno CLI version 1.25.0 or higher.

You can scaffold a new project by running the Fresh init script. To scaffold a project in the deno-citric-demo folder, run the following:

deno run -A -r https://citric.deno.dev deno-citric-demo

Then navigate to the newly created project folder:

cd deno-citric-demo

From within your project folder, start the development server using the deno task command:

deno task start

Now open http://localhost:8000 in your browser to view the page. You make changes to the project source code and see them reflected in your browser.

To deploy the project to the live internet, you can use Deno Deploy:

  1. Push your project to GitHub.
  2. Create a Deno Deploy project.
  3. Link the Deno Deploy project to the main.ts file in the root of the created repository.
  4. The project will be deployed to a public $project.deno.dev subdomain.

For a more in-depth getting started guide, visit the Getting Started page in the Fresh docs.