nhost / nhost-netlify-starter-nextjs-reactquery

Nhost Netlify Starter Template

This is an example frontend for the multi-conference example app created with Nhost. It uses Next.js, React Query, Tailwind, Nhost as the backend (authentication, Postgres Database, GraphQL API) and Netlify to host the frontend.

You can check out the video walkthrough of the project here.

Table of Contents

• Features
• Previews
• Project Structure Walkthrough
• Getting Started
  • Setting up local frontend
  • Setting up local backend with the Nhost CLI
• GraphQL API Schema and Example Queries
• Deploy to Nhost
• Deploy to Netlify

Features

• Next.js
• Tailwind v3 for styling.
• React Query v4.
• TypeScript static type-safety.
• ESLint linting & Prettier code formatting.
• GraphQL and GraphQL Code Generator.

Previews

• Backend: https://cuzwcdqwgmhbxqetfbci.nhost.run/console
• Front-end: https://fanciful-concha-7412d8.netlify.app/

Project Structure Walkthrough

Inside this project, you are going to see both the specification for the backend (Nhost) and the frontend (Next.js):

/
├── nhost/
├── .nhost/
├── src/
│   ├── components/
│   │   ├── common/
│   |   ├── conferences/
│   |   ├── speakers/
│   |   └── talks/
│   ├── graphql/
│   │   └── *.gql
│   ├── pages/
│   |   └── *.tsx
│   ├── types/
│   │   └── *.ts
│   └── utils/
│       ├── __generated__/
│       │   └── graphql.ts (contains auto-generated GraphQL hooks)
│       └── *.ts
└── package.json

• nhost is the main specification of your backend: tables, permissions & roles.
• .nhost is a folder created by the CLI that contains the state of your backend.
• src is the main folder for your frontend.
• src/components contains all the components used in the application.
• src/graphql contains all the hooks for GraphQL queries and mutations used in the application.
• src/pages contains all the pages used in the application.
• src/types contains all the types used in the application.
• src/utils contains all the utility functions used in the application.

Getting Started

Setting up local frontend

1. Clone the repository:

git clone https://github.com/nhost/nhost-netlify-starter-nextjs-reactquery.git

2. Install the dependencies:

yarn install

3. Start the Next.js application:

yarn dev

Setting up local backend with the Nhost CLI

When you start developing your front-end you will see that there's data already preloaded. This is coming from an environment Nhost has prepared to run the conference project. In order to make changes to the backend (tables, columns, permissions, etc...) you need to start a local Nhost environment yourself.

1. You must install Docker before you can use the Nhost CLI. Make sure to have Docker running before proceeding.

2. Install the Nhost CLI:

sudo curl -L https://raw.githubusercontent.com/nhost/cli/main/get.sh | bash

3. Start the Nhost project:

nhost up

The CLI uses seed data (nhost/seed) to populate the database with a user and a conference. Learn more in the Nhost CLI documentation.

4. Create a .env.local file in the root with the following content:

NEXT_PUBLIC_NHOST_SUBDOMAIN=localhost:1337

5. Start (or restart) the Next.js application:

yarn dev

You'll see that the data is now coming from your local Nhost environment. Add conferences either through the Hasura Console or through the conference management page on the front-end by signing in.

You can use the following credentials to manage conferences:

email: [e-mail]
password: Manager1234!

GraphQL API Schema and Example Queries

query Conferences {
  conferences(order_by: { name: asc }) {
    id
    name
    slug
    location
    featured
    start_date
    end_date
    talks(order_by: { start_date: asc }) {
      id
      name
      start_date
      end_date
    }
    speakers(order_by: { name: asc }) {
      id
      avatar_url
    }
  }
}

query Speakers {
  speakers {
    id
    name
    bio
    social
    job_description
    avatar_url
  }
}

query Talks {
  talks {
    id
    name
    start_date
    end_date
    speaker {
      name
    }
  }
}

Queries and mutations defined in the src/graphql folder can be used in the front-end by generating the GraphQL hooks with the following command:

yarn codegen

This will generate the hooks in src/utils/__generated__/graphql.ts.

Deploy to Nhost

Nhost is an open source Firebase alternative with GraphQL. More importantly, by creating a project with Nhost you automatically get the following:

- Database: PostgreSQL.
- Instant GraphQL API: Hasura.
- Authentication: Hasura Auth.
- Storage: Hasura Storage.
- Serverless Functions: AWS Lambdas.

Steps for creating an Nhost project

Log in to your Nhost Dashboard and click the Create Your First Project button.

Next, give your new Nhost app a name, select a geographic region for your Nhost services and click Create App.

After a few seconds, you should get a PostgreSQL database, a GraphQL API with Hasura, file storage, and authentication set up.

(Optional): Any user you add to the project through the "Users" section of the Nhost Dashboard can access the manager dashboard of the conference project. You'll need to verify the email address of the user before they can sign in.

Learn more about email verification in the Nhost documentation.

Connecting this repository to Nhost

Nhost supports a Git workflow which means that you can safely work locally with the CLI and when you are confident with your changes, you can push to your repository and your project will be automatically deployed (any following updates you push to your code will also be automatically be deployed.) To allow this, you need to connect this repository to your Nhost projects through the Nhost Dashboard:

1. Fork/clone this repository to your GitHub account.

2. Provide the required permissions to select this repository for the official Nhost GitHub application.

3. Find your repository on the Nhost Dashboard & connect it:

4. Once connected, the project will automatically deploy.

5. Add changes to your project. Any changes you push to your repository will also be automatically be deployed (you can see your deployments on the "Deployments" section of the console).

And now once you're ready to deploy your frontend make sure to go back to the app overview and grab your Nhost Subdomain and Nhost Region:

Deploy to Netlify

Want to deploy this frontend immediately? Feel free to click on our Deploy to Netlify button to get you setup!

Clicking this button will start the setup for a new project and deployment

Deploying through the command line

Clone this repo with the git clone command. Then install the Netlify CLI tool and run netlify init.

git clone https://github.com/nhost/nhost-netlify-starter-nextjs-reactquery.git

npm install netlify-cli -g # to install the Netlify CLI tool globally

netlify init # initialize a new Netlify project & deploy

Once your Netlify site is deployed, add the environment variables from your Nhost project into the Netlify environment variables. You can find this from within the UI: Site Settings > Build & deploy > Environment > Environment Variables

NEXT_PUBLIC_NHOST_SUBDOMAIN=YOUR_NHOST_APP_SUBDOMAIN
NEXT_PUBLIC_NHOST_REGION=YOUR_NHOST_APP_REGION