Skip to main content
1

Create Project

If you haven’t, please create a project through the Nhost Dashboard.
2

Setup Database

Navigate to the SQL Editor of the database and run the following SQL to create a new table movies with some great movies.
SQL Editor
CREATE TABLE movies (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  director VARCHAR(255),
  release_year INTEGER,
  genre VARCHAR(100),
  rating FLOAT
);

INSERT INTO movies (title, director, release_year, genre, rating) VALUES
  ('Inception', 'Christopher Nolan', 2010, 'Sci-Fi', 8.8),
  ('The Godfather', 'Francis Ford Coppola', 1972, 'Crime', 9.2),
  ('Forrest Gump', 'Robert Zemeckis', 1994, 'Drama', 8.8),
  ('The Matrix', 'Lana Wachowski, Lilly Wachowski', 1999, 'Action', 8.7);
Make sure the option Track this is enabled
SQL Editor
3

Permissions

Select the new table movies just created, and click in Edit Permissions to set the following permissions for the public role and select action.Permission Rules
4

Setup the Application

Create the application using standard tooling:
Terminal
npm create vite@latest my-svelte-app -- --template svelte
cd my-svelte-app
5

Install the Nhost package

Navigate to the application and install @nhost/nhost-js.
Terminal
npm install @nhost/nhost-js
6

Configure the Nhost client and fetch the list of movies

import { NhostClient } from "@nhost/nhost-js";

// Replace <subdomain> and <region> with your project's values
export const nhost = new NhostClient({
  subdomain: "<subdomain>",
  region: "<region>",
})
7

The end

Run your project with npm run dev and navigate to http://localhost:5173 in your browser.
⌘I