Install and run — Findit Astro
Findit is a standard Astro project: unzip it, install the packages and start the development server.
What you need
Section titled “What you need”| Node.js | 22.12 or newer (node -v). Download at https://nodejs.org — the LTS build is fine. |
| A package manager | npm comes with Node. pnpm, yarn and bun work too. |
| A code editor | VS Code with the Astro extension is the smoothest; any editor works. |
| A browser | Chrome, Edge, Firefox or Safari. |
No database, no account, no paid service. The site builds to static files you can host anywhere.
Install
Section titled “Install”Unzip the template, open the folder in a terminal and run:
npm installnpm run devOpen http://localhost:4321. Save a file and the page updates by itself.
The commands
Section titled “The commands”| Command | What it does |
|---|---|
npm run dev |
Development server with live reload |
npm run build |
Builds the static site into dist/ |
npm run preview |
Serves dist/ locally, exactly as a host would |
npm run check |
Checks types, content schemas and Astro files |
Run npm run build and npm run preview before publishing. The preview is the real thing: the development
server is more forgiving, and a few behaviours (clean URLs, the active menu item) are only worth trusting in the
build.
What is in the folder
Section titled “What is in the folder”src/ pages/ one file per URL index.astro home about.astro /about property.astro /property (the list); property/[slug].astro is one page per property filter/ the filter pages: type/[type], location/[slug], property-category/[slug] agent.astro, blog.astro the lists; agent/[slug].astro and blog/[slug].astro are one page each contact.astro, add-property.astro, success/, legal/[slug].astro, 404.astro sitemap.xml.ts the sitemap, built from routes and collections robots.txt.ts robots.txt style-guide.astro every component with examples (noindex; delete the file to remove it) components/ sections/ the sections pages are made of (HomeHeroSection, PropertyMainSection, …) site/ header and footer layouts/Layout.astro the <head>, header and footer of every page content/ site.json name, description, domain, navigation, contact details, footer pages/*.json the copy of one page each, including its title and description sections.json copy of the sections several pages share (benefits, process, FAQ, facts, …) collections/*.json properties, agents, locations, categories, testimonials, posts, legal, team routes.ts the URL of every page, used by the components' links schemas.ts the fields each kind of item has, and which are required content.config.ts how the collections are loaded (the file to change for a CMS) design-system/ tokens, components and browser scripts — see its own README lib/ content.ts the only way pages read collections forms/ form delivery (static and server modes) assets/images/ photos and the logo used by the content — Astro resizes and compresses them styles/global.css imports the theme and Tailwindpublic/ files served as they are: icons and the share imageDelete src/pages/style-guide.astro (and src/components/style-guide/) if you don’t want the component gallery on your
site; nothing else depends on it.
Editor tips
Section titled “Editor tips”- Install the Astro and Tailwind CSS IntelliSense extensions.
npm run checkreads your content files against the schemas: a missing field is reported with the file and the line, before you open the browser.- Search across files (
Ctrl/Cmd + Shift + F) for a phrase you see on the demo site to find the file that holds it.
Updating later
Section titled “Updating later”Keep your edits in src/content/, src/assets/images/, public/ and theme.css where possible. When a new version
of the template ships, copy those into the new release instead of re-applying changes by hand. CHANGELOG.md lists
what changed.