Fresh logo
docs

The next-gen web framework.

⚠️ 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 called main.ts, but it's best practice to call the entrypoint main.ts.
  • fresh.gen.ts: This is the manifest file that contains information about your routes and islands. This file is automatically generated based on your routes/ and islands/ folder by the fresh CLI when running the fresh 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 the fresh 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 the fresh 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.