Locio
Sign in

Stand up a React site with Australian address search

About 20 minutes. Updated 11 September 2026.

From an empty folder to a deployed page: create a Vite React project, add address search backed by the Locio API with a public key, run it locally, build it and put it on a static host.

Twenty minutes, no backend. The API accepts a public key straight from the browser, so a static site is enough: the key is limited to address search and to the sites you list on it, which is what makes it safe to ship in a page.

01Create the project

shell
npm create vite@latest locio-search -- --template react-ts
cd locio-search
npm install

02Get a public key

Create a key with "In a page" chosen, and list http://localhost:5173 under allowed sites for now. Put it in an env file Vite reads; the VITE_ prefix is what makes it available to browser code.

.env.localshell
# .env.local  (not committed; Vite reads it at build time)
VITE_LOCIO_KEY=lc_live_...
.gitignoreshell
# .gitignore
.env.local

03Add the search

Copy the two files from the React autocomplete guide into src/: useAddressSearch.ts and AddressSearch.tsx. Then replace the generated App.tsx with a page that shows what was picked.

src/App.tsxtsx
// src/App.tsx
import { useState } from "react";
import { AddressSearch } from "./AddressSearch";
import type { Address } from "./useAddressSearch";

export default function App() {
  const [address, setAddress] = useState<Address | null>(null);

  return (
    <main style={{ maxWidth: 560, margin: "4rem auto", fontFamily: "system-ui" }}>
      <h1>Find an address</h1>
      <AddressSearch onPick={setAddress} />

      {address && (
        <dl>
          <dt>G-NAF id</dt>
          <dd><code>{address.gnaf_pid}</code></dd>
          <dt>Coordinates</dt>
          <dd>{address.lat}, {address.lng}</dd>
          <dt>Postcode</dt>
          <dd>{address.components.postcode}</dd>
        </dl>
      )}
    </main>
  );
}

04Run it

shell
npm run dev
# ➜  Local: http://localhost:5173/

Type a street number and a street. The suggestions come from /v1/addresses and each one is already resolved, so the id, coordinates and components appear as soon as one is picked.

05Build and deploy

shell
npm run build
# dist/ is the whole site: HTML, one JS file, one CSS file.

Put dist/ on any static host: Cloudflare Pages, Netlify, Vercel, an S3 bucket. Set VITE_LOCIO_KEY as a build variable there, and add the production origin, for example https://www.example.com, to the key's allowed sites. A public key answers only from the origins it lists, so a copy lifted from your page does nothing anywhere else.

Where to go from here

  • Save gnaf_pid with the order rather than the text, and read the address back with /v1/addresses/{pid} when you need it.
  • Validate addresses you already hold, such as a CSV of customers, on the server with a secret key: the PHP guide shows the shape, and it is the same in any language.

Related