DEV Community

Ege Sabanci
Ege Sabanci

Posted on

Conserve Cloud & Itty Router: Let's take this To-Do App to a new level

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 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
Enter fullscreen mode Exit fullscreen mode

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) and verify our email with the email we receive.

Conserve Cloud sign-up screen

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

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
Enter fullscreen mode Exit fullscreen mode

Now let's write our HTTP server.

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);
Enter fullscreen mode Exit fullscreen mode

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.

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);
Enter fullscreen mode Exit fullscreen mode

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

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

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

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);
Enter fullscreen mode Exit fullscreen mode

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.

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);
Enter fullscreen mode Exit fullscreen mode

Conclusion

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

Top comments (0)