title	slug
README	readme

UBDC Web Starter Kit

Basic Overview

This is a starter kit for bootstrapping a full stack application.

🤔 Why use me? Designed to quickstart new frontend projects in need of common backend services like Authentication, DB & Admin, Instant GraphQL API & Mail Services.

Templated Services

• Next.js (Typescript) - Frontend client
• Apollo Client - GraphQL client (caching)
• Material UI - UI components
• Yarn - Package manager
• Docker - Containerisation
• Nhost - Dockerised backend as a service
  • PostgreSQL - Database
  • Hasura - GraphQL API (Generated Schema)
  • Auth - Authentication
  • Mailhog - Email testing

Getting Started

Clone this repo and install the dependencies:

git clone https://github.com/urbanbigdatacentre/ubdc-web-starter-kit.git

cd ubdc-web-starter-kit

Running the application locally

📚 Prerequisites

• Docker
• Docker Compose
• Yarn
• Node.js
• Hasura CLI

🕋 Backend Setup

To setup the backend, we'll be locally hosting a set of docker containers that contain the Nhost services described above.

These are already connected and configured to work together, so we just need to start them up. This works by pulling the images from external docker registries and running them locally.

To do this we need to run the docker compose file in the nhost directory of this project.

cd nhost
docker-compose up -d

If you have docker desktop installed, you should see the containers running in the docker dashboard.

Otherwise, check this using the cmd docker ps in the terminal.

The following endpoints are now exposed:

• http://localhost:1337/v1/graphql: Hasura GraphQL endpoint
• http://localhost:1337/v1/auth: Hasura Auth
• http://localhost:1337/v1/storage: Hasura Storage
• http://localhost:1337/v1/functions: Functions
• http://localhost:3030: Nhost Dashboard
• http://localhost:1337: Hasura Console
• http://localhost:8025: Mailhog SMTP testing dashboard
• http://localhost:9090: Traefik dashboard

🚨 ... Don't Forget

In order to use the Nhost dashboard, (from the /nhost directory) you need to run the Hasura console locally from the Hasura CLI:

hasura console

🖥 Next.js Setup

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.