Astro Recipes

Recipe Template

A front-end for 38k+ recipes for TOH, built with Astro.

Project Structure

This is an Astro project, check the documentation to get a general idea, and keep reading for the specifics.

Recipe Template:

This project implements a new Recipe Template to build TOH Recipe Pages.

The Recipe data data comes from tasteofhome.com/wp-json REST API (see src/lib/recipe.ts).

The Template lives src/templates/Recipe.astro.

To see the new Pages, use /recipe/%slug%/: defined src/pages/recipes, this URL structure is actually divided in two different routes (for performance and cost-saving reasons, see Building and hosting!):

Tests

The following tests are implemented:

Static Checks:

Against Running Application

Run all tests locally and make sure they pass before using CI/CD minutes!

For technical details, see package.json (and Commands below), GitLab/GitHub pipelines, and recommended extensions for VSCode Workspace.

Building and hosting

Astro will build complete pages using the data from the API and the templates in this repository. If you want to see those built pages, you need to host them somewhere.

This project is configured for hybrid rendering. At build time, static routes will be generated as static HTML files, and dynamic routes will need a server.

Statically generated pages can be hosted pretty much anywhere, you can even see them locally in most cases. Server-Side Rendered pages need a server running, also generated by Astro using Adapters. The Adapter depends on the hosting platform (see "Deploy" step in pipeines). Different hosting platforms need different type of server code (and different Adapters for Astro to generate the right thing), and different settings.

Right now this project is set up for Cloudflare Pages.

To keep using Cloudflare Pages as is, add the necessary secrets to the CI/CD pipeline: CLOUDFLARE_ACCOUNT_ID and CLOUDFLARE_API_TOKEN, and the CLOUDFLARE_PROJECT_NAME variable (this one is public), are required by Wranger to deploy.

Note that with Cloudflare Pages (and similar hosting providers), there are different considerations to decide between SSG (static) and SSR (server): SSG will add to build time and there's a limit of 20k files, but bandwidth will be free; SSR build time doesn't change with the number of pages, but each request hitting the server comes at a cost ($). If we could fit all the pages in SSG model, building the site would take longer but serving it would be free. If we had to keep everything SSR, build would be super fast but serving our traffic may become expensive.

Commands

All commands are run from the root of the project, from a terminal:

CommandAction
npm installInstalls dependencies
npm run devStarts local dev server at localhost:4321. 🚀
npm run buildBuild your production site to ./dist/
npm run previewPreview your build locally, before deploying
npm run astro ...Run CLI commands like astro add, astro check
npm run astro -- --helpGet help using the Astro CLI
npm run lintRun ESLint to check code quality
npm run e2e-testRun end-to-end tests using Playwright
npm run unit-testRun unit tests with Vitest
npm run testRun both unit and end-to-end tests
npm run pr-checkCheck code formatting with Prettier
npm run pr-fixFix code formatting issues with Prettier
npm run checkRun linting and code formatting checks
npm run local-perfCollect local performance data with Lighthouse