⚠️ Do not use `fresh` for production usecases yet, unless you are very actively tracking the `fresh` repository for updates. The framework is still undergoing very frequent core functionality changes. You can expect a mostly stable release around the end of May 2022.
Create a project
New fresh
projects can be created with the fresh
CLI tool. It will scaffold
out a new project with some example files to get you started.
To create a new project in the directory "my-project"
, run:
$ fresh init my-project
Manifest generated and written to ./my-project/fresh.gen.ts
This will create a directory containing a bunch of files. Out of all of the files, only two are strictly necessary for a fresh project:
main.ts
: This is the entrypoint for your project. It is the file that will you run to start your fresh application. This file doesn't actually need to be calledmain.ts
, but it's best practice to call the entrypointmain.ts
.fresh.gen.ts
: This is the manifest file that contains information about your routes and islands. This file is automatically generated based on yourroutes/
andislands/
folder by thefresh
CLI when running thefresh manifest
command.
In addition to these two files, two other files are created that manage dependencies:
client_deps.ts
: This file contains dependencies that you need on the client, and possibly also on the server. It should be assumed that all of the dependencies referenced by this file will be shipped to the client. By default, it just re-exports thefresh
runtime.server_deps.ts
: This file contains dependencies that are only used on the server. These are often things like database drivers, API clients, or other code that should only be executed on the server. This file should never be referenced by modules that might be shipped to the client. By default this just re-exports thefresh
server libraries.
Two important folders are also created that contain your routes and islands respectively:
routes/
: This folder contains all of the routes in your project. The names of each file in this folder corresponds 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.
Finally a static/
folder is created that contains static files that are
automatically served "as is". Learn more about static files.