Conserve Cloud & Itty Router: Let's take this To-Do App to a new level
Tags: cloud, webdev, typescript, devops
Published: 2023-11-10 04:45:28


## Overview
To-Do applications are everywhere, but it's **time to take them to the next level**. In this blog post, we will do just that. There are 2 new technologies we will use. The first one is itty-router which is a lightweight router and the other one is Conserve Cloud ([conserve.cloud](conserve.cloud)). Conserve Cloud is a new cloud storage infrastructure, so you may not have heard of it. In a nutshell, Conserve Cloud exists to solve the 2 biggest problems of modern cloud storage service providers today. The first one is unpredictable cloud bills and the other one is the deep configurations that these services require. **Conserve Cloud offers NoSQL database, Key-Value store and Logger services. You can use these services with zero configuration for a single fixed price per month**. These features are a godsend for the growing number of indie developers today.

## Installation
Let's start by installing the `itty-router` and `conserve-cloud-sdk` packages.
```
$ npm install itty-router conserve-cloud-sdk
```

## Conserve Cloud Setup
As I mentioned before, **Conserve Cloud is very easy to use**. First of all, we need to create our account at ([conserve.cloud](conserve.cloud)) and verify our email with the email we receive.

![Conserve Cloud sign-up screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6k66vjigne8a7na5suw0.png)

After creating our account and verifying our email address with the incoming mail, we will go to the `Datakeys` tab on the navigation bar that we will see on the left side of the `Dashboard`. We should see the following screen.

![Conserve Cloud Dashboard -> Datakeys screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q55mvegogcqmmh7h28w8.png)

Finally, we need to copy this `Datakey` somewhere (the `.env` file in our project is a good option here). That's all we need to do for the Conserve Cloud setup!

## Coding Time!
Now, let's create an `itty-router` HTTP server on the NodeJS runtime. Since `itty-router` is specially designed on Bun runtime for serverless infrastructures like Cloudflare Workers, we need a little configuration like below and a few extra packages to use `itty-router` in NodeJS runtime.

```
$ npm install @whatwg-node/server http isomorphic-fetch
```
Now let's write our HTTP server.

```ts
import 'isomorphic-fetch';
import { createServer } from 'http';
import { error, json, Router } from 'itty-router';
import { createServerAdapter } from '@whatwg-node/server';

const router = Router();

const ittyServer = createServerAdapter((request, ctx) =>
	router.handle(request, ctx).then(json).catch(error)
);

const httpServer = createServer(ittyServer);
httpServer.listen(3001);
```

## Adding Endpoints and Conserve Cloud
OK great, now we have our HTTP server. Next, we are going to create some endpoints to save and fetch to-dos. We need to save these to-do's somewhere, and this is where we will use Conserve Cloud. Let's take our Conserve Cloud `Datakey` and create a `ConserveCloud` instance with `conserve-cloud-sdk`. Since Conserve Cloud is completely API-based and serverless, this instance does not create any consistent connection. It will only run whenever we run it.

```ts
import 'isomorphic-fetch';
import { createServer } from 'http';
import { error, json, Router } from 'itty-router';
import { createServerAdapter } from '@whatwg-node/server';

import { ConserveCloud } from 'conserve-cloud-sdk';

const router = Router();
const ccloud = new ConserveCloud('b0abc5f4-39bf-468f-a9ec-c9053dacb064');

const ittyServer = createServerAdapter((request, ctx) =>
	router.handle(request, ctx).then(json).catch(error)
);

const httpServer = createServer(ittyServer);
httpServer.listen(3001);
```

Now let's create a NoSQL database from this `ConserveCloud` instance. To do this, first we need to create a new NoSQL database resource by going to the `NoSQL` tab on the `Dashboard`. We can create this resource on the following screen. No configuration is required, just a name!

![Creating NoSQL database resource on Conserve Cloud](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kx5r6uf40ql3k99h5a4.png)

Our NoSQL database resource was created on the fly. We can see this created resource as below. To use this resource, we will need the unique id just below the name we gave it (as seen in the photo below: `db4e92_my_todo_app`).

![Created NoSQL resource and it's unique id](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ja606bdrqahtibbxjemr.png)

Now let's start using this resource by constructing it in our code.

```ts
import 'isomorphic-fetch';
import { createServer } from 'http';
import { error, json, Router } from 'itty-router';
import { createServerAdapter } from '@whatwg-node/server';

import { ConserveCloud } from 'conserve-cloud-sdk';

const router = Router();
const ccloud = new ConserveCloud('b0abc5f4-39bf-468f-a9ec-c9053dacb064');

// Here is our NoSQL database resource
const nosqlDB = ccloud.NoSQL('db4e92_my_todo_app');

const ittyServer = createServerAdapter((request, ctx) =>
	router.handle(request, ctx).then(json).catch(error)
);

const httpServer = createServer(ittyServer);
httpServer.listen(3001);
```

Now we just need to create the endpoints required to "create new to-dos" and "fetch created to-dos". At this stage, we will use the `put` method from the `nosqlDB` object we constructed in our code to save the to-dos to our NoSQL database and the `fetch` method from this object to fetch the saved to-dos. 

```ts
import 'isomorphic-fetch';
import { createServer } from 'http';
import { error, json, Router, withContent } from 'itty-router';
import { createServerAdapter } from '@whatwg-node/server';

import { ConserveCloud } from 'conserve-cloud-sdk';

const router = Router();
const ccloud = new ConserveCloud('b0abc5f4-39bf-468f-a9ec-c9053dacb064');

// Here is our NoSQL database resource
const nosqlDB = ccloud.NoSQL('db4e92_my_todo_app');

router
	.post('/todo', withContent, async (request) => {
		const body = request.content;

		// save new to-do to our NoSQL database
		await nosqlDB.put(body);

		return json({ status: 201, message: 'To-do created!' });
	})
	.get('/todo', async () => {
		// fetch all to-dos from our NoSQL database
		const { data } = await nosqlDB.fetch({});

		return json({ status: 200, todos: data });
	});

const ittyServer = createServerAdapter((request, ctx) =>
	router.handle(request, ctx).then(json).catch(error)
);

const httpServer = createServer(ittyServer);
httpServer.listen(3001);
```

## Conclusion
Yes, a new approach to To-Do applications with Conserve Cloud. By using Conserve Cloud ([conserve.cloud](conserve.cloud)), you can develop incredible things with the power offered by unlimited cloud storage infrastructure.