Pixel•10mo ago

How to get custom folder structure with Fresh?

Hello, I want to integrate Fresh into my existing project. I want to use the 4 directories: components, routes, islands and static but I want them inside a directory in the project like ./src/fresh/

2 Replies

Pixel•10mo ago

I could generate my own manifest and ignore the Fresh one but it seems like there's a better way

Deno AI Helper•10mo ago

Sure, you can definitely change the source directory in your Fresh project. Here's how you can do it according to the documentation: 1. Move all your files, except deno.json and README.md, to the src directory (or any other directory of your choosing). In your case, you would move them to ./src/fresh/. 2. Modify the start task in deno.json to point to the new directory. Here's what the diff of deno.json might look like:

{
  "lock": false,
  "tasks": {
-    "start": "deno run -A --watch=static/,routes/ dev.ts"
+    "start": "deno run -A --watch=src/fresh/static/,src/fresh/routes/ src/fresh/dev.ts"
  },
  "imports": {
    "$fresh/": "file:///Users/reed/code/fresh/",
  }
}

{
  "lock": false,
  "tasks": {
-    "start": "deno run -A --watch=static/,routes/ dev.ts"
+    "start": "deno run -A --watch=src/fresh/static/,src/fresh/routes/ src/fresh/dev.ts"
  },
  "imports": {
    "$fresh/": "file:///Users/reed/code/fresh/",
  }
}

After these changes, your project structure would look like this:

.
├── README.md
├── deno.json
└── src
    └── fresh
        ├── components
        │   └── Button.tsx
        ├── dev.ts
        ├── fresh.gen.ts
        ├── islands
        │   └── Counter.tsx
        ├── main.ts
        ├── routes
        │   ├── greet
        │   │   ├── [name].tsx
        │   ├── api
        │   │   └── joke.ts
        │   ├── _404.tsx
        │   └── index.tsx
        └── static
            ├── favicon.ico
            └── logo.svg

.
├── README.md
├── deno.json
└── src
    └── fresh
        ├── components
        │   └── Button.tsx
        ├── dev.ts
        ├── fresh.gen.ts
        ├── islands
        │   └── Counter.tsx
        ├── main.ts
        ├── routes
        │   ├── greet
        │   │   ├── [name].tsx
        │   ├── api
        │   │   └── joke.ts
        │   ├── _404.tsx
        │   └── index.tsx
        └── static
            ├── favicon.ico
            └── logo.svg

And that's it! Your Fresh code now lives in the ./src/fresh/ directory. 🦕

Helpful Links: Changing the source directory | Fresh docs Fresh 1.4 – Faster Page Loads, Layouts and More Fresh 1.2 – welcoming a full-time maintainer, sharing state between islands, limited npm support, and more Examples | Fresh docs