Ahead-of-time Builds
Fresh enables you to pre-optimize frontend assets before the code is deployed. During that process the code for Islands will be compressed and optimized, so that Fresh can send as little code as possible to the browser. Depending on the amount of code an island needs, this process can take several seconds if done on the fly serverside.
Doing those optimizations ahead-of-time and deploying the already optimized assets alongside with your code, allows Fresh to treat them as like any other static file and can serve it immediately without any further processing. On pages with islands, having to do no processing greatly speeds up page load times.
Creating an optimized build
To have Fresh optimize all the assets, run one of the following commands:
# As a task in newer Fresh projects deno task build # or invoke it manually deno run -A dev.ts build
This will create a _fresh
folder in the project directory. That folder
contains the optimized assets and a snapshot.json
file which includes some
metadata for Fresh.
âšī¸ The
_fresh
folder should not be committed to the repository. Add an entry in the.gitignore
file to ensure that it is not committed. Create that file at the root of your git repository if not present..gitignore# Ignore fresh build directory _fresh/
Running Fresh with optimized assets
When Fresh is started in non-development mode (usually via main.ts
), Fresh
will automatically pick up optimized assets when a _fresh
folder exists. If
found, Fresh will print the following message to the terminal:
Using snapshot found at /path/to/project/_fresh
Deploying an optimized Fresh project
To generate optimized assets whenever you push changes to the main
branch of
your project, copy the following GitHub action and add it under
.github/workflows/deploy.yml
in your project.
name: Deploy on: push: branches: [main] pull_request: branches: main jobs: deploy: name: Deploy runs-on: ubuntu-latest permissions: id-token: write # Needed for auth with Deno Deploy contents: read # Needed to clone the repository steps: - name: Clone repository uses: actions/checkout@v3 - name: Install Deno uses: denoland/setup-deno@v1 with: deno-version: v1.x - name: Build step run: "deno task build" # đ Update the build command(s) if necessary - name: Upload to Deno Deploy uses: denoland/deployctl@v1 with: project: "example-project" # đ Update the deploy project name if necessary entrypoint: "./main.ts" # đ Update the entrypoint if necessary
âšī¸ Important: The project name here must match the project name you’ve picked in Deno Deploy.
On the Deno Deploy side change the GitHub integration mode to GitHub Actions. You need to unlink first, if you have an existing project that’s linked with the “Automatic” mode.
Once this is set up you’re ready for your next deployment. Whenever a new PR is
merged into the main
branch on GitHub the deploy action will be executed and
deploy the optimized assets to Deno Deploy.
Migrating existing projects with Plugins
If you’re using Fresh plugins, extract them into a fresh.config.ts
file, so
that both the dev.ts
and main.ts
script have access to them.
import { defineConfig } from "$fresh/server.ts"; import twindPlugin from "$fresh/plugins/twind.ts"; import twindConfig from "./twind.config.ts"; export default defineConfig({ plugins: [twindPlugin(twindConfig)], });
import { start } from "$fresh/server.ts"; import manifest from "./fresh.gen.ts"; import config from "./fresh.config.ts"; await start(manifest, config);
import dev from "$fresh/dev.ts"; import config from "./fresh.config.ts"; await dev(import.meta.url, "./main.ts", config);