⚡ ️Tigris example app on Next.js - Todo list

A simple todo app built on Next.js and Tigris using TypeScript client, deployed on Netlify.

Project demo

You can see the demo live at https://tigris-todo-starter.netlify.app/

⚙️ Deploying the app

You have two options to run this Next.js app:

📖 Netlify & Tigris Cloud (Recommended)

Prerequisites

1. A GitHub account. Sign up here for a free account if you don't have one.
2. A Netlify account for deploying app. Sign up here for a free account if you don't have one.
3. A Tigris account. Sign up here for a free account if you don't have one.

Instructions

1. Login to Tigris console and follow the video instruction to register a new application under My Settings > Application Keys. In the next step, we will use the generated Client ID and Client Secret as Environment Variables when deploying our Next.js app on Netlify.
2. Hit "Deploy" and follow instructions to fork this repo and deploy app to your Netlify account

🎉 All done. You should be able to use app on the URL provided by Netlify. Feel free to play around or do a code walkthrough next 🎉

Running Next.js server & Tigris dev environment on your local computer

📖 Running Next.js server & Tigris locally

Prerequisites

1. Tigris installed on your dev computer
   1. For macOS: brew install tigrisdata/tigris/tigris-cli
   2. Other operating systems: See installation instructions here
2. Node.js version 16+

Instructions

1. Clone this repo on your computer

git clone https://github.com/tigrisdata/tigris-netlify-starter

2. Install dependencies

cd tigris-netlify-starter
npm install

3. Add the environment variables into a file .env.development.local

TIGRIS_URI="api.preview.tigrisdata.cloud"
TIGRIS_CLIENT_ID="your client id"
TIGRIS_CLIENT_SECRET="your client secret"

4. Run the Next.js server

npm run dev

Note: This step will also initialize Tigris database and collection for app.

🎉 All done. You should be able to use app on localhost:3000 in browser. Feel free to play around or do a code walkthrough next 🎉

👀 Code walkthrough

📂 File structure

├── package.json
├── models
│   └── tigris
│       └── tigris_netlify_starter
│           └── todoItems.ts
├── lib
│   ├── tigris.ts
└── pages
    ├── index.tsx
    └── api
        ├── item
        │   ├── [id].ts
        └── items
            ├── index.ts
            └── search.ts

🗄️ Tigris schema definition

The to-do list app has a single collection todoItems defined in models/tigris/tigris_netlify_starter/todoItems.ts that stores the to-do items in todoStarterApp database. The Database and Collection get automatically provisioned by the setup script.

This is an inspiration from Next.js based file system router. Create a folder or drop a schema file inside database folder under models/tigris/, and you're able to instantly create Databases and Collections in Tigris for your application.

🌐 Connecting to Tigris

The lib/tigris.ts file loads the environment variables you specified previously in creating a Netlify project section and uses them to configure the Tigris client. Locally, you will want to make sure to create a .env.development.local file to store your environment variables. With Netlify, make sure to add them either on the site or through the CLI.

❇️ API routes to access data in Tigris collection

All the Next.js API routes are defined under pages/api/. We have three files exposing endpoints:

pages/api/items/index.ts

• GET /api/items to get an array of to-do items as Array
• POST /api/items to add an item to the list

/pages/api/items/search.ts

• GET /api/items/search?q=query to find and return items matching the given query

pages/api/item/[id].ts

• GET /api/item/{id} to fetch an item
• PUT /api/item/{id} to update the given item
• DELETE /api/item/[id] to delete an item

🚀 Next steps

In a few steps, we learnt how to bootstrap a Next.js app using Tigris and deploy it on Netlify. Feel free to add more functionalities or customize App for your use-case and learn more about Tigris data platform.

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue. Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)