Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
marvinhagemeister committed Jul 3, 2024
1 parent 9db78d7 commit d158709
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 38 deletions.
68 changes: 33 additions & 35 deletions docs/canary/getting-started/create-a-project.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,50 +7,48 @@ description: |
New Fresh projects can be created by using the Fresh project creation tool. It
will scaffold out a new project with some example files to get you started.

> [info]: Make sure to have the [latest Deno](https://deno.com/) version
> installed before continuing.
To create a new project, run:

```sh Terminal
deno run -A -r jsr:@fresh/init
cd fresh-project
deno task dev
```

This will scaffold out the new project, then switch into the newly created
directory, and then start the development server.

This will create a directory containing some files and directories. There are 4
files that are strictly necessary to run a Fresh project:

- **`dev.ts`**: This is the development entry point for your project. This is
the file that you run to start your project.
- **`main.ts`**: This is the production entry point for your project. It is the
file that you link to Deno Deploy.

A **`deno.json`** file is also created in the project directory. This file does
two things:

- It defines the "imports" field. This is an
[import map](https://docs.deno.com/runtime/manual/basics/import_maps) that is
used to manage dependencies for the project. This allows for easy importing
and updating of dependencies.
- It registers a "dev" [task](https://deno.land/manual/tools/task_runner) to run
the project without having to type a long `deno run` command.

Two important folders are also created that contain your routes and islands
respectively:
This will scaffold out the new project, then switch ito the newly created
directory. The folder structure of the newly created Fresh project will look
roughly like this:

```sh
fresh-project/
├── components/ # Place components that should be re-used here
| └── Button.tsx # A re-usable button component
├── islands/ # Client-side components to run in the browser
| └── Counter.tsx # An example Counter island component
├── routes/ # Place all your routes here
| ├── _app.tsx # App wrapper template, the outer HTML structure
| | # that will always be included on every page.
| ├── api/
| | └── [name].tsx # /api/:name route example that responds with
| | # plain text and the name you pass in the url
| └── index.tsx # / Route
├── static/ # Place static files (images, videos, etc) here
| └── ...
├── deno.json # Contains project dependencies, tasks, etc
├── dev.ts # Development entry point
└── main.tsx # Production entry point (use this for Deno Deploy)
```

- **`routes/`**: This folder contains all of the routes in your project. The
names of each file in this folder correspond to the path where that page will
be accessed. Code inside of this folder is never directly shipped to the
client. You'll learn more about how routes work in the next section.
- **`islands/`**: This folder contains all of the interactive islands in your
project. The name of each file corresponds to the name of the island defined
in that file. Code inside of this folder can be run from both client and
server. You'll learn more about islands later in this chapter.
The most important fields in the `deno.json` file are the `"imports"` and
`"tasks"` field.

Finally a **`static/`** folder is created that contains static files that are
automatically served "as is". We'll
[learn more about static files](../concepts/static-files) in a later chapter.
- `"imports"`: An
[import map](https://docs.deno.com/runtime/manual/basics/import_maps) for
managing dependencies.
- `"tasks"`: Registers [tasks](https://deno.land/manual/tools/task_runner) for
your project. Run `deno task` to view all available tasks.

> [info]: Fresh requires the following permissions to function:
>
Expand Down
4 changes: 2 additions & 2 deletions docs/canary/getting-started/tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ module is important: it is used to determine the path that the route will
handle.

```sh
routes
├── blog
routes/
├── blog/
| ├── [id].tsx # /blog/example-post, /blog/post2, etc
| └── search.tsx # /blog/search
| └── index.tsx # /blog
Expand Down
1 change: 0 additions & 1 deletion docs/toc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ const toc: RawTableOfContents = {
pages: [
["create-a-project", "Create a project", "link:canary"],
["tutorial", "Tutorial", "link:canary"],
["dynamic-routes", "Dynamic routes", "link:latest"],
["form-submissions", "Form submissions", "link:latest"],
["deploy-to-production", "Deploy to production", "link:latest"],
],
Expand Down

0 comments on commit d158709

Please sign in to comment.