Pixel
Pixel•3y 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
PixelOP•3y ago
I could generate my own manifest and ignore the Fresh one but it seems like there's a better way
Deno AI Helper
Deno AI Helper•3y 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

Did you find this page helpful?