DEV Community: Knut Martin Tornes

How to use ChatGPT to make an instantly deployable Node.js REST API backend

Knut Martin Tornes — Sat, 14 Jan 2023 20:11:34 +0000

ChatGPT, a variant of the popular GPT-3 language model, is revolutionizing the way we produce text and programming code.

In this blog post, we will demonstrate how ChatGPT can be used to produce high-quality, easy-to-understand, and instantly deployable Node.js backend code using examples from codehooks.io.

By the end of this post, you will have a powerful tool to quickly prototype and build various types of backends with minimal effort. Let's dive in and see how ChatGPT can enhance your development process!

A variant of this blogpost was originally published on the codehooks.io blog

Making a database-powered CRUD REST API with ChatGPT

We thought that ChatGPT could be a good match for creating code for codehooks.io due to codehooks' serverless and "instant deploy without setup" capability along with its built-in database, jobs and worker queue features.

One problem we figured out we might have was due to the fact that codehooks.io was released in late 2022 and ChatGPT has only been trained on data up to 2021. However, after experimenting a bit, we figured out a way to ask ChatGPT by providing an example instantly.

How to ask ChatGPT for help with coding

If you haven't signed up for ChatGPT yet, you must do so before you can talk to it. To create our question for creating a CRUD REST API for deployment with codehooks.io using the codehooks-crudlify-yup NPM package, we copied the following code from one of our blog posts:

/*
* Minimal CRUD API code example using Yup schema
*/
import app from 'codehooks-js'
import crudlify from 'codehooks-crudlify-yup'
import * as yup from 'yup';

// "product" schema allowing any json object
const product = yup.object().shape({
    json: yup.mixed()
})

// Add CRUD routes with yup schema for two collections
crudlify(app, {product})

// bind to serverless runtime
export default app.init()

💡 Create database-backed REST APIs fast with crudlify ⚡️
When you need a "standard" REST API with NoSQL database support, using the library 'codehooks-crudlify-yup' must be one of the simplest ways to do it with code. The library generates the common REST API routes: GET, POST, PUT, PATCH and DELETE and persists the data in the codehooks.io NoSQL database. You can also query the data quite easily.

Then we added the following text before this code: "This is an example of codehooks.io backend code:", and we added this after the code: " Can you create a codehooks.io backend like this with a more complete example for an online shop."

And voilá! This is the code we got back from ChatGPT:

import app from 'codehooks-js'
import crudlify from 'codehooks-crudlify-yup'
import * as yup from 'yup';

// Define the schema for the "Product" collection
const productSchema = yup.object().shape({
    name: yup.string().required(),
    description: yup.string(),
    price: yup.number().required(),
    image: yup.string().url(),
    category: yup.string().required(),
    ratings: yup.array().of(yup.number())
});

// Define the schema for the "Order" collection
const orderSchema = yup.object().shape({
    customerName: yup.string().required(),
    customerEmail: yup.string().email().required(),
    products: yup.array().of(yup.object().shape({
        productId: yup.string().required(),
        quantity: yup.number().required()
    })),
    total: yup.number().required(),
    status: yup.string().oneOf(['pending', 'shipped', 'delivered'])
});

// Add CRUD routes for the "Product" and "Order" collections with the corresponding schemas
crudlify(app, { products: productSchema, orders: orderSchema });

// Bind the app to the serverless runtime
export default app.init();

This was the explanation ChatGPT helpfully provided:

This code creates two collections for Product and Order, defined by the productSchema and orderSchema respectively. The schema of product includes name, description, price, image, category and ratings. The schema of order includes customerName, customerEmail, products, total, status.It also demonstrates the use of different validation techniques like required, email, url and oneOf() for various fields in the collection.
It can be more fine-tuned based on the specific needs of the backend.
Please note that this is just an example to give you an idea of how you can define your collections and schemas, and you may need to adjust it to fit the specific requirements of your application.

Deploying the AI-generated Node.js JavaScript code directly without touching it 💥🤖

This code certainly looks correct at first glance. I have, however, several times caught ChatGPT "inventing" totally new libraries and methods and got an excuse afterwards when I pinpointed it 😂

Let's deploy the code! If you want to do this yourself, follow the instructions in our Quick Start to get ready. It only takes a few seconds.

First, create a new project:

codehooks create shopbackend

This CLI command creates a codehooks project, adds a folder named "shopbackend" and initializes a "hello world" index.js JavaScript file.

Replace the contents of the "index.js" file with ChatGPTs generated code above and save it.

You also need to install the necessary npm packages:

npm i codehooks-js codehooks-crudlify-yup yup

In the same folder as index.js, run the deploy command:

codehooks deploy

Result:

Project: shopbackend-h3r5  Space: dev
Deployed Codehook successfully! 🙌

Yes! 🙌

It worked...or rather it compiled and was deployed correctly by codehooks.io.

Let's test the backend by adding some products using cURL (we also recommend Postman).

Postman Import button
Using the "Import" button in Postman, you can directly import cURL commands and then use it to test your API endpoints.

This 'info' command is very useful when we need more information about our space AND need some cURL examples:

codehooks info --examples

This is what we get:

Project name: shopbackend-h3r5
Team: Martin Tornes (personal account)

API endpoint:  https://shopbackend-h3r5.api.codehooks.io/dev

Examples in cURL:

curl https://shopbackend-h3r5.api.codehooks.io/dev/myroute -H 'x-apikey: 27b3822e-ecf3-4263-bcee-24acd6aed2d0' -H 'Content-Type: application/json'

curl --request POST https://shopbackend-h3r5.api.codehooks.io/dev/myroute -H 'x-apikey: 27b3822e-ecf3-4263-bcee-24acd6aed2d0' -H 'Content-Type: application/json' --data-raw '{"name": "Mr. Code Hooks", "active": true }'

Spaces:
┌──────────────┬────────────────────────────────────────────┬───────────────┬──────┬──────┐
│ Name         │  Tokens                                    │ Allowed Hosts │ Jwks │  Env │
├──────────────┼────────────────────────────────────────────┼───────────────┼──────┼──────┤
│ dev (active) │ 27b3822e-ecf3-4263-bcee-24acd6aed2d0 (RW)  │               │      │      │
└──────────────┴────────────────────────────────────────────┴───────────────┴──────┴──────┘

Project members:
┌────────────────────┬──────────────────────────────────┬───────┐
│ name               │ email                            │ role  │
├────────────────────┼──────────────────────────────────┼───────┤
│ Martin Tornes      │ martintornesdev@gmail.com        │ ADMIN │
└────────────────────┴──────────────────────────────────┴───────┘

Let's modify the POST cUrl to add some product data. We'll add a JSON structure with at least the fields ChatGPT marked as required:

curl --request POST https://shopbackend-h3r5.api.codehooks.io/dev/products \
-H 'x-apikey: 27b3822e-ecf3-4263-bcee-24acd6aed2d0' \
-H 'Content-Type: application/json' \
--data-raw '{"name": "Codehook", "price": 0, "category": "TOOLS" }'

Result:

{"name":"Codehook","price":0,"category":"TOOLS","_id":"185a3157a34-u96ow26u9zcxd0"}

It worked! You can now use your preferred programming language and library to interact with this REST API and database.

Conclusion

codehooks.io is a good fit for getting a lot of help from ChatGPT, you just need to show it an example before you ask a question. The way we demonstrated it here works fine, but there are probably multiple ways to get the most out of it.

We also asked it to create a scheduled "CRON" job using codehooks.io job "hooks", which should Tweet each afternoon at 5pm. It produced working code using Twitter's library and the correct codehooks.io JavaScript code. Ready to deploy!

We could have asked it to do more to elaborate on the code it created. This type of dialog is in fact the recommended way to work with it to produce the best results. We'll leave that to a later blogpost or a whole dedicated section where we add ChatGPT examples.

ChatGPT is a glimpse into an exciting future of AI-assisted programming. It's not exactly NoCode, but it surely is automated and saves a ton of time.

Disclaimer... Some parts of this blog post was written with help from ChatGPT 😉

Simple serverless GraphQL using codehooks.io

Knut Martin Tornes — Thu, 05 Jan 2023 11:53:24 +0000

Codehooks.io is an easy to use serverless backend tool for Node.js. In this very short blog post, we'll show you how to create a really simple GraphQL-powered persistent backend using a little JavaScript and codehooks.io's built-in NoSQL database.

You can use Postman to test the API. Postman automatically fetches the GraphQL schema and gives you auto-completion 🤠
Data is persisted in the NoSQL document database.

Visit the official GraphQL site to learn more about GraphQL.

The following steps assume you have a codehooks.io account and the CLI installed. You can install it with: npm install codehooks -g. Codehooks.io is free to use up to a limit of 5000 API calls and 5000 data objects.

Here we go:

Create a project with the coho create CLI command.
Change to the project directory and install using npm i codehooks-js graphql graphql-tools.
Open the index.js file in your favorite code editor and enter the following code.

Main file (index.js)

The index.js file defines the schema, the resolvers and the single GraphQL route we need.

import { app, Datastore } from 'codehooks-js';
import { graphql } from 'graphql';
import { makeExecutableSchema } from 'graphql-tools';

// Construct a schema, using GraphQL schema language
const typeDefs = `
  type Member {
    id: ID
    name: String!
    age: Int
    active: Boolean
  }
  type Query {
    ping: String
    member(id: ID!): Member!
    allMembers: [Member]
  }
  type Mutation {
    addMember(name: String! age:Int active:Boolean): Member!
    updateMember(id: ID! name: String age:Int active:Boolean): Member!
    deleteMember(id: ID!): ID
  }
`;

// implement resolvers for queries and mutations
const resolvers = {
  Query: {
    ping: () => {
      return 'Pong!';
    },
    member: async (obj, { id }, { db } ) => {
      const { _id, ...rest } = await db.getOne('members', id);
      return { id: _id, ...rest };
    },
    allMembers: async (obj, args, { db }) => {
      const members = await db.getArray('members');
      return members.map(({_id, ...member }) => ({id: _id, ...member })); // map _id to id
    }
  },
  Mutation: {
    addMember: async (obj, input, { db }) => {
      const {_id, ...rest } = await db.insertOne('members', input);
      return { id: _id, ...rest };
    },
    updateMember: async(obj, {id, ...data }, { db }) => {
      return db.updateOne('members', id, data);
    },
    deleteMember: async(obj, {id}, { db }) => {
      const result = await db.removeOne('members', id);
      return result._id;
    },
  }
}

const schema = makeExecutableSchema({ typeDefs, resolvers })

// Create the default graphql POST route
app.post('/graphql', async (req, res) => {
  const conn = await Datastore.open();
  const response = await graphql({
    schema,
    source: req.body.query,
    contextValue: { db: conn }
  });
  res.json(response);
});

export default app.init(); // Bind functions to the serverless cloud

Deployment

Codehooks.io JavaScript code is easy to deploy. Just change directory to your development folder and deploy the code with this CLI command:

coho deploy

Test the deployed GraphQL endpoint

We recommend that you test your deployed code with Postman using GraphQL support (recommended). Postman reads the schema from the codehooks.io /graphql endpoint and gives you code completion.

Use the CLI command coho info to see the HTTP endpoint and the API tokens for the project space.

You can also use cURL to use the GraphQL API to add and read data

Add one member mutation

curl --location --request POST 'https://graphqltest-4pmq.api.codehooks.io/dev/graphql' \
--header 'x-apikey: 66e33428-45d3-4811-be21-58fa6d5d5e91' \
--header 'Content-Type: application/json' \
--data-raw '{"query":"mutation { addMember(name: \"Mr Codehook\", age: 33) { id name }}"}'

Get all members query

curl --location --request POST 'https://graphqltest-4pmq.api.codehooks.io/dev/graphql' \
--header 'x-apikey: 66e33428-45d3-4811-be21-58fa6d5d5e91' \
--header 'Content-Type: application/json' \
--data-raw '{"query":"{allMembers {id name }}"}'

Use a local server instead of deploying

If you don't want to create an account yet, you can also test your codehooks.io GraphQL backend locally using this command:

coho localserver

Conclusion

We've demonstrated how you can set up a simple serverless GraphQL server using very little JavaScript code. We hope this has inspired you to check out what is possible to do with codehooks.io's compact backend and database.

To learn more about creating backends with Node.js and codehooks.io, check out the documentation or the blog

JAMstack - an introduction

Knut Martin Tornes — Fri, 16 Dec 2022 21:39:28 +0000

The JAMstack architecture is gaining popularity among frontend developers for its ability to provide a modern, fast, and secure web development experience.

In order to achieve better performance, developers have had to look at different ways and tools that together could increase speed and at the same time maintain a high level of security. Traditional and dynamic CMS-based websites have the disadvantage that data must be retrieved from a database or similar in order to deliver content on the websites. Using so-called reverse proxies and caches (i.e., "fast storage") such as Varnish and nginx, was one of the few options to increase performance. That is, until the JAMstack architecture (and frameworks) arrived.

(You'll also find this article on the codehooks.io blog.)

What is JAMstack?

At its core, the JAMstack is a web development approach that focuses on using client-side JavaScript, reusable APIs, and prebuilt Markup to create web applications. This architecture allows for faster and more secure web development by using prebuilt and pre-rendered pages, which are then delivered to the user via a content delivery network (CDN).

The JAMstack.org website defines the term as:

"Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability. JAMstack removes the need for business logic to dictate the web experience. It enables a composable architecture for the web where custom logic and 3rd party services are consumed through APIs."

JAMstack, as an architectural concept, was created by Mathias Biilmann Christensen, co-founder of Netlify - a rapidly growing Cloud Computing company offering hosting and serverless backend services for static websites. It can be used to build static websites that are significantly faster and more stable than dynamic ones, but are still dynamic in the sense that the web pages are updated when new content is published or the source code changes. JAMstack is thus not a specific tool, but an architecture and ecosystem that makes it efficient to create lightning-fast websites.

What does JAMstack mean?

JAM stands for "Javascript", "APIs" and "Markup":

Javascript handles all parts of the website that should be dynamic once the web pages are first loaded. Modern front-end frameworks such as VueJS, React or Angular are well suited to use for this.
APIs are required because a JAMstack app/website does not have a server. This means that no self-developed "backend" code is necessarily needed in this architecture. Developers can focus on implementing front-end logic. If you need to store user input, process images, authenticate users, perform content search, transform images, handle payment and the like, this can be handled with external services via standardized or custom APIs.
Markup is the HTML code that is generated in the build step. This code is pure static HTML, but it can be dynamic in the sense that the HTML is built from data retrieved from APIs combined with HTML templates. In many frameworks, Javascript (React, Vue) can also be used to create this static part. So-called headless CMS APIs are often used for the dynamic content. In such a setup, the construction of markup will be initiated when the source code is checked into version control (such as Github) or by web hooks triggered when the CMS API receives new or updated content.

In the illustration of the JAMstack architecture below, we see that the combination of templates and content is compiled into static HTML pages/content which is then distributed to a Content Network (CDN). The CDN helps ensure that the pages are loaded fast and as close to the user as possible.

Why should you start using JAMstack?

JAMstack is a modern and efficient way to develop websites. Compared to centralized, database-dependent websites, JAMstack-based websites have the following advantages:

Speed - Pages load lightning fast
Lower cost - static websites are much cheaper compared to dedicated servers/databases
Scalability - content is static and not loaded from a central server
Maintenance - there is no need to monitor any servers
Security - there are no secrets on a static website - only access to APIs needs to be secured

SEO - Google favors JAM

From an SEO perspective, there are few reasons to use anything other than JAMstack for content-rich sites. Google favors websites that load quickly and users don't click the "back button" to the same extent. From the developer's point of view, JAMstack will provide a better experience as they can focus on developing the best user experience, use the latest technology and worry less about performance and scalability.

Developers love it

One of the key benefits of the JAMstack for frontend developers is the ability to focus on building user interfaces without the need for server-side rendering or complex backend logic. This allows for a more agile and efficient development process, as well as the ability to leverage a wide range of third-party APIs and services to build dynamic and engaging user experiences. They can use their favorite UI frameworks (Like React, Vue, Svelte). If there is a need for a custom backend API (other than a headless CMS), there are plenty of tools which makes this relatively simple like for example Heroku, Firebase, Xata, restdb.io and codehooks.io 😄

Popular frameworks

You'll find the most popular generators for JAMstack Sites on the JAMstack website. These are the top contenders:

Next.js - very popular in the React community - supports static site generation and server-side-rendered (SSR) dynamic applications.
Hugo - Insanely fast builds and many features - optimized for speed, ease of use and configurability. Built on the Go programming language.
Gatsby - React based with a huge ecosystem of content/data plugins - uses GraphQL to provide content/data.
Nuxt - the Vue alternative to NextJS - supports both static site generation and SSR.
Docusaurus - Use React and Markdown to create powerful static sites for documentation or whatever (this blog uses Docusaurus).

Summary and conclusion

In short, the JAMstack is a powerful and efficient web development architecture that is ideal for frontend developers looking to build modern, fast, and secure web applications. With its focus on client-side JavaScript, reusable APIs, and prebuilt Markup, the JAMstack offers a range of benefits that make it an attractive option for frontend developers looking to create engaging and dynamic user experiences.