Free video courses by Rapid and Rapid Developer Experts offer short to help you become a pro API Developer.

Rapid API Courses

Ania Kubów

The guide is tailored for beginners aiming to make money with their coding skills. We will build an API on Climate Changes using Express, Axios, and Cheerio packages. I will also show you how to list your API on the largest API hub-Rapid API, and monetize it.

## Prerequisites

For this guide, only a basic understanding of JavaScript is required. However, even if you don't have your command over JavaScript, follow along anyway because there won't be a lot of code involved. Before we start, ensure you have Node.js installed on your machine.

## What is an API?

API stands for Application Programming Interface. APIs allow the technologies to talk with each other and are essential to many services we rely on. They grab and shape information and pass it from one technology to another.

As a developer, you can use TikTok's APIs to get a live TikTok feed onto your website or even use them in a two-way stream to get, post or delete data from a movie system. To summarize, APIs are everywhere today.

## RapidAPI Hub

After building our API, we will list it on the [RapidAPI](https://rapidapi.com/hub) Hub. As a developer, when you launch your API on the Rapid API platform, you can essentially sell its access to those who want to utilize what you have made. This access comes in different plans you can choose from, allowing you to control how you monetize what you have built. 

As it is the largest hub for APIs out there at this moment in time, the footfall will be in our favor, meaning that you could take your API idea from a simple form of passive income to a full-blown startup, depending on how much time you want to dedicate to it.

What are we waiting for? Let's do it. 

## Step 1: Sign up on RapidAPI

Since we will be using the Rapid API platform, so let us go ahead and sign up. As I want to create my own API, I will click on “My APIs” and then leave it at this point.

![RapidAPI Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/hub-1.png) 

## Step 2: Decide the topic for our API

For this guide, I have decided to build an API that would tell us climate change news from various publications worldwide. If you want to go for any other topic, like crypto, that is entirely up to you.

## Step 3: Create a new project on your code editor

I'm going to start off by creating a blank project using WebStorm. Feel free to use whatever code editor you wish and create an empty directory. So just like this, we can start entirely from scratch.

![Creating a new project in WebStorm](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/create-project.png)

## Step 4: Create Package.json file

As a general rule, any project that uses node js will need to have a `package.json` file. To create the file, we need to run the command `npm init` in our terminal, ensuring that we are in the directory we just created.

The command will spin up the file for us, and we will be prompted to answer a few questions like the name, version, and description of our package. It will also ask to choose the entry point, which we will keep the `index.js` file, and leave the rest of the questions blank.

![package.json file](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/package-json.png)

As you can see in the `climate-change-api` directory, a `package.json` file has been created with all the keys we were asked to fill out. Within this file, we will see all our installed packages.

## Step 5: Install the packages

We will install the [Cheerio](https://www.npmjs.com/package/cheerio), [Express](https://www.npmjs.com/package/express), and [Axios](https://www.npmjs.com/package/axios) packages for this guide. Run the following commands to install them:

`npm i cheerio`
`npm i express`
`npm i axios`

## Step 6: Create the index.js file

Within our Climate Change API directory, we will create a new JavaScript file and call it `index.js`. This will be our server, and we will write our code in it.

## Step 7: Define the PORT

We will start the coding by defining the port on which we will open our server. I am going to call it PORT 8000. This can be whatever you wish. 

![Defining the port](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/port.png)

## Step 8: Initiate our packages

To use our packages in the backend, we will type the standard syntax for each of our three packages.

```js
const express = require('express')
const axios = require('axios')
const cheerio = require('cheerio')
```

To initiate express, we will call the express function and save it in the 'app' variable. Then we will make this 'app' to listen to our port to run the server. 

```js
const app = express();
app.Listen(PORT, () => console.log('server running on PORT ${PORT }'));
```

I'll also need to write a `start` command in the `script` in package.json file and use `nodemon` to listen to any changes made in the `index.js` file. 

![Using nodemon](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/nodemon.png)

To run our backend, I'll type the command `npm run start` in our terminal.
We will make express, i.e., `app` listen to the homepage path and create a response.

```js
app.get('/', (req, res) => {
	res.json('Welcome to my Climate Change News API');
});
```
Here you can see it is working perfectly.

![API working on local host](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/local.png)

## Step 9: Getting a news source

Now let us start scraping data from a news source, let's say, The Guardian. Axios and cheerios will be utilized for this purpose. First, I'll use Axios to grab all the HTML from the [Guardian webpage](https://www.theguardian.com/environment/climate-crisis). Then using Cheerio, we will look for the elements. We will look for all the `< a` tags containing the word climate. We will grab the text of those tags and save it as the title. Also, we will grab the `href` for each tag and save that as a URL.

```js
app.get('/news', (req, res) => {
	axios.get('https://www.theguardian.com/environment/climate-crisis').then(response => {
		const html = response.data;
		const $ = cheerio.load(html);
		$('a:contains("climate")', html).each(function () {
			const title = $(this).text();
			const url = $(this).attr('href');
			articles.push({
				title,
				url,
			});
		});
	});
	res.json(articles);
}).catch(err => console.log(err));
```
Great! We have scraped the Guardian webpage.
You can install a JSON Viewer extension on your browser to make it readable. So with the extension, it is looking great.

![Scraped data with JSON viewer extension](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/scraped-data.png)

So every time we found an `< a` tag containing the word climate, we created a title and URL from its text and href to have an array full of titles and URLs from the Guardian. How cool is that!

## Step 10: Getting multiple news sources

Now that we have successfully scraped one website, let's scrape climate information from multiple sources to make our API more effective.
I'll start doing this by creating an array of the newspapers I want to scrape. I will keep three, but you can add as many as you want.

```js
const newspapers = [
	{
		name: 'cityam',
		address: 'https://www.cityam.com/london-must-become-a-world-leader-on-climate-change-action/',
	},
	{
		name: 'thetimes',
		address: 'https://www.thetimes.co.uk/environment/climate-change',
	},
	{
		name: 'guardian',
		address: 'https://www.theguardian.com/environment/climate-crisis',
	},
];
```

Then I'll basically loop the same code with all those newspapers as follows:

```js
const articles = [];
newspapers.forEach(newspaper => {
	axios.get(newspaper.address).then(response => {
		const html = response.data;
		const $ = cheerio.load(html);
		$('a:contains("climate")', html).each(function () {
			const title = $(this).text();
			const url = $(this).attr('href');
			articles.push({ title, url, source: newspaper.name });
		});
	});
});
app.get('/', (req, res) => {
	res.json('Welcome to my Climate Change News API');
});
app.get('/news', (req, res) => {
	res.json(articles);
});
```

![Scraped data from multiple sources](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/scraped-data-multiple.png)

Perfect! You can see we are now getting data from all three sources. However, our URLs from the Telegraph still need to be completed. They lack a base, as seen in their page's source code.
 
![Inspecting the elements of Telegraph webpage](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/inspect-element.png)

This issue can be solved simply by adding a `base` function and passing the Telegraph through it.

```js
const newspapers = [
	{
		name: 'thetimes',
		address: 'https://www.thetimes.co.uk/environment/climate-change',
		base: '',
	},
	{
		name: 'guardian',
		address: 'https://www.theguardian.com/environment/climate-crisis',
		base: '',
	},
	{
		name: 'telegraph',
		address: 'https://www.telegraph.co.uk/climate-change',
		base: 'https://www.telegraph.co.uk',
	},
];

const articles = [];
newspapers.forEach(newspaper => {
	axios.get(newspaper.address).then(response => {
		const html = response.data;
		const $ = cheerio.load(html);
		$('a:contains("climate")', html).each(function () {
			const title = $(this).text();
			const url = $(this).attr('href');
			articles.push({
				title,

				url: newspaper.base + url,
				source: newspaper.name,
			});
		});
	});
});
```

## Step 11: Getting an individual news source by parameter

Now I want my API to be able to get data from individual news sources separately. This can be done by adding a new `app.get` function. 

```js
const PORT = 8000;
const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');
const app = express();

const newspapers = [
	{
		name: 'thetimes',
		address: 'https://www.thetimes.co.uk/environment/climate-change',
		base: '',
	},
	{
		name: 'guardian',
		address: 'https://www.theguardian.com/environment/climate-crisis',
		base: '',
	},
	{
		name: 'telegraph',
		address: 'https://www.telegraph.co.uk/climate-change',
		base: 'https://www.telegraph.co.uk',
	},
];

const articles = [];

newspapers.forEach(newspaper => {
	axios.get(newspaper.address).then(response => {
		const html = response.data;
		const $ = cheerio.load(html);

		$('a:contains("climate")', html).each(function () {
			const title = $(this).text();
			const url = $(this).attr('href');

			articles.push({
				title,
				url: newspaper.base + url,
				source: newspaper.name,
			});
		});
	});
});

app.get('/', (req, res) => {
	res.json('Welcome to my Climate Change News API');
});

app.get('/news', (req, res) => {
	res.json(articles);
});

app.get('/news/:newspaperId', (req, res) => {
	const newspaperId = req.params.newspaperId;

	const newspaperAddress = newspapers.filter(newspaper => newspaper.name == newspaperId)[0].address;
	const newspaperBase = newspapers.filter(newspaper => newspaper.name == newspaperId)[0].base;

	axios
		.get(newspaperAddress)
		.then(response => {
			const html = response.data;
			const $ = cheerio.load(html);
			const specificArticles = [];

			$('a:contains("climate")', html).each(function () {
				const title = $(this).text();
				const url = $(this).attr('href');
				specificArticles.push({
					title,
					url: newspaperBase + url,
					source: newspaperId,
				});
			});
			res.json(specificArticles);
		})
		.catch(err => console.log(err));
});

app.listen(PORT, () => console.log(`server running on PORT ${PORT}`));
```

## Step 12: Deploy the API to Heroku

To prepare our API for deploying on Heroku, we will need to run the command of `npm i nodemon`. Also, we will have to change the port options to use the deployed link if it is deployed, and use the local host port when running locally.

```js
const PORT = process.env.PORT || 8000
```

After that, we will sign up on [Heroku](https://www.heroku.com/) and create a new app.

![Heroku interface](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/heroku.png)

Once you create it, you will see instructions on the Heroku page. Follow all those instructions and run these commands successively. 

![Heroku instructions](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/heroku-instructions.png)

Once done, it will deploy our app on Heroku. Copy the URL of your Heroku deployment.

## Step 13: Create API on RapidAPI

We'll go back to our RapidAPI dashboard, give our API a brief description and add the base URL we just created. 

![Creating API on RapidAPI](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/create-api.png)

Next, I will add a couple of endpoints by clicking on the REST Endpoint.
 
![Adding Endpoints](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/endpoints.png)

After that, I'll choose the pricing for my API. Here I have multiple plans to choose from, starting from basic to mega.

![Plans and Pricing](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/pricing.png)

Lastly, we'll make our API public, and that's it! Our Climate Change API is live on RapidAPI.

![Our Climate Change API on RapidAPI Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/climate-change-api.png)

## Wrap Up

Following the same steps stated in this guide, you can build your own APIs and make money by selling them on the RapidAPI platform. Happy building!



Omar I.

Ahmad Bilal

Ahmad Awais

Introduction

Overview of the final product

Creating a RapidAPI account

Creating our Node.js project

Routing in Express

Getting a news source

Getting multiple news sources

Getting an individual news source by parameter

Refactoring and Prep for Deployment

Creating our API on RapidAPI

Deploying to Heroku

Adding our Endpoints to RapidAPI

Adding Pricing Plans

Publishing our API

Build and sell your own API

Oflutter

Intro

Creating the home page

Creating recipe cards

Integrating the API

Final look of the app

Create a Recipe List App using Flutter and API

JavaScript Mastery

React Native Crash Course

Setup

Home Screen

useFetch Hook (Integrating Rapid API)

Job Details Screen

Search Functionality

Deployment

Build and Deploy a React Native App | 2023 React Native Course Tutorial for Beginners

ChatGPT Tutorials

In this guide, we will build an API capable of producing QR codes. We will do this using [ChatGPT](https://chat.openai.com/chat), a powerful AI tool developed by OpenAI. It can generate human-like responses to various inputs and even write code for us, making it ideal for this project. After making the API, we will sell it on [Rapid API Hub](https://rapidapi.com/hub).

![Rapid API Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/hub-1.png)

Rapid is a platform that offers developers to deploy and sell their APIs on a subscription basis, with the potential to generate a substantial monthly recurring revenue stream. Without further ado, let's get started.

<Callout
    title="Build, sell and use APIs"
    linkText="Sign up"
    linkHref="https://rapidapi.com/auth/sign-up"
>
Explore thousands of APIs on Rapid API Hub, the biggest hub of APIs. You can also find ideas for your next API that you can build using ChatGPT. Happy building!
</Callout>

## Step 1: Coding with ChatGPT

Open [ChatGPT](https://chat.openai.com/chat) and put in the command to code a Python Flask API server. We must be clear and concise regarding the functionality of the API so that ChatGPT can generate the code precisely to our specifications. In this instance, we must specify that the API should accept a `GET` request with a URL in string format and convert it into a QR image code.

![Writing the prompt in ChatGPT](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/chatgpt.png)

Once ChatGPT has generated the code, copy and paste it into a code editor such as VSCode, saving it as a new file named `qr.py`.

![Pasting the code in VSCode](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/code.png)

## Step 2: Testing the Code on Local Server

Next, open your terminal and run the command `python qr.py`.
 
![Running the command in terminal](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/terminal-1.png)

This will initiate the server. To test the server, open the URL provided by ChatGPT.
 
![URL provided by ChatGPT](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/url.png)

When you open the URL, it will generate a QR code image like this:

![API returning the QR code image](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/qrcode.png)

Modifying the URL value will produce a new QR code, demonstrating that the API functions flawlessly.

## Step 3: Modifying the code to allow for downloadable QR codes

We can further enhance the functionality of our API by modifying the code to make the QR code images downloadable. So, prompt ChatGPT to rewrite the code to make the response image downloadable.

![ChatGPT rewriting the code](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/chatgpt-modify.png)

Replace the previous code with the new code in your VSCode and relaunch the API on the local server. With this update, the QR code will be automatically downloaded each time a new URL is entered.

![API returning auto-downloadable QR Code images](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/download-qrcode.png)

## Step 4: Deploying the API

Now that our API is ready, it is time to deploy it to the cloud. For this demonstration, I will be using [PythonAnywhere](https://www.pythonanywhere.com/), but you may use any other platform, such as Heroku, Google Cloud, or Amazon. After signing up, you will be directed to the dashboard. 

![pythonanywhere Dashboard](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/pyanywhere.png)

Click on "Open Web App" and create a new web application. Select Flask and choose the desired Python version.
 
![Creating new web app on pyhtonanywhere](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/new-web-app.png)

Scroll down and click "Go to directory" to access the `flask_app.py` file.
 
![Opening flask_app.py file](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/open-file.png)

Copy and paste the Python code from the VSCode into this file, then save it. Next, click "Web," reload the server, and open the API in a new tab. You may encounter an error at this point, but ignore it as it is simply because our application lacks the root URL.

![API opened in a new tab](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/api-tab.png)

Finally, copy the demo request query parameters from ChatGPT, which are `/qrcode?url=https://www.example.com/` and paste them into the address bar. This will download a QR code image, confirming our API is live and fully operational.

![API is auto-downloading QR code images](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/auto-download.png)

## Step 5: Selling on Rapid

The final step is to publish our API on Rapid. Open [Rapid API Studio](https://rapidapi.com/studio) and do a quick sign-up if you haven’t already.

![Creating a new API project on Rapid API Studio](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/studio.png)

Fill out the necessary details about your API and click on the "Hub Listing" section and provide additional information, including the base URL generated by PythonAnywhere.

![Filling in the API details](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/add-api-details.png)

![Putting in the base URL](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/base-url.png)

Next, add the endpoints and query parameters and save them.

![Adding endpoints and query parameters](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/endpoints-1.png)

Click on "View in Hub" to see your API’s page on the API Hub. Here, we can test the endpoint to ensure our API is functional. As you can see, it generates a QR code in response, indicating that our API works splendidly.

![Testing the API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/hub-api.png)

Now, return to your Studio project and open the **Monetize** section. Here you can create pricing plans for your customers and adjust different usage quotas for each plan.

![Adding pricing plans for the API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/pricing-plans.png)

Fantastic! Our API is now live and operational; every time someone subscribes, we'll receive payment. Let's make some money with our awesome API!

## Wrap up

With ChatGPT, you can create highly efficient and potentially profitable APIs in no time. Don’t just stop at QR Codes. Think of any good API idea, roll up your sleeves, and start building using the same process.

<Callout
    title="Build, sell and use APIs"
    linkText="Sign up"
    linkHref="https://rapidapi.com/auth/sign-up"
>
Explore thousands of APIs on Rapid API Hub, the biggest hub of APIs. You can also find ideas for your next API that you can build using ChatGPT. Happy building!
</Callout>


Rapid API and API monetization

Building APIs with ChatGPT

Running the code

Modifying the API code

Restart the server

API is working

Options for deploying API to cloud

Deploying the API

Testing our API

Publishing on Rapid API Hub

Testing API on Rapid API Hub

Monetizing our API

Searching our API on Rapid API Hub

Earn Money by Building and Selling APIs with ChatGPT

Simon Grimm

About the meme creator

Setting up the Flutter app

Implementing a drawer widget

Showing slides with API data and Flutter card swiper

Creating a meme selector widget

Building the meme creator

Download files with Flutter

Recap

How To Build a MEME CREATOR Mobile App with FLUTTER

Setting up the React Native app

Implementing Routing and Drawer navigation

Showing slides with API data

Creating a meme selector component

Adding file download

Outro

Build a React Native Meme Creator with API Calls and Nativebase UI for iOS & Android

James Q Quick

Let's take a look at how to deploy Node.js with TypeScript API to [Render](https://render.com/) instead of [Heroku](https://www.heroku.com), a platform that is functionally similar to Heroku and has a free tier.

This guide is the third edition of a series on constructing a TypeScript API with Rapid API and Xata. You can follow the first two here:

1. [Integrate Express, RapidAPI, and Xata into your TypeScript API Development (Part 1)](https://rapidapi.com/guides/integrate-express-rapidapi-and-xata-into-your-typescript-api-development-part-1)

2. [Integrate Express, RapidAPI, and Xata into your TypeScript API Development (Part 2)](https://rapidapi.com/guides/integrate-express-rapidapi-and-xata-into-your-typescript-api-development-part-2)

In this guide, we'll deploy this API not only to Render but also to the [RapidAPI Studio](https://rapid.com/studio) so that we can make money selling it.

RapidAPI also has a Visual Studio Code extension called the [RapidAPI Client](https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client&ssr=false). Using it; you can test the various endpoints, such as GET, POST, PUT, and DELETE, for the job's API that I created in previous guides.

![Rapid VSCode Client](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/vscode-client.png)

The intriguing part of this extension is that you can use it across various devices because they are linked to RapidAPI projects. This project can be linked to the one you use to market and sell your APIs on RapidAPI, and others can also connect to it.

We will now go through each of those steps. You can check out the link here to return to [part one](https://rapidapi.com/guides/integrate-express-rapidapi-and-xata-into-your-typescript-api-development-part-1), and most importantly, you can have a link to the GitHub repository via this [link](https://github.com/jamesqquick/nodejs-api-with-rapidapi-typescript-xata).

Let's rewind a bit. I have a basic table for jobs within Xata. Our API is a jobs API, so we have access to the *company*, *title*, *job link*, *geography*, etc.

![Our database table on Xata](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/database.png)

## Step 1

I can run our project through the VSCode terminal with the following command:

```sh
npm run start:dev 
```

![Running the API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/api-run.png)

Another quick recap. Inside the `index.ts` file, we have `/api/jobs` along with `get`, `post`, `put`, and `delete` routes, which are your basic CRUD operations. 

```ts
import {getXataClient, Job} from './xata';
import dotenv from 'dotenv';
import express, {Express, Request, Response} from 'express';

dotenv.conf();

const app: Express = express();
const port = process.env.PORT || 3000;

const xata = getXataClient();

type MyResponse<T> =
	| {
			err: string;
	  }
	| {
			data: T;
	  };

app.get('/api/jobs', async (req: Request, res: Response<MyResponse<Job[]>>) => {
	try {
		const jobs = await xata.db.job.getAll();
		return res.status(200).json({data: jobs});
	} catch (err) {
		console.error(err);
		return res.status(500).json({err: 'Something went wrong'});
	}
});

app.post(
	'/api/jobs',
	async (req: Request<{}, {}, Job>, res: Response<MyResponse<Job>>) => {
		try {
			const job = req.body;
			const createdJob = await xata.db.job.create(job);
			return res.status(201).json({data: createdJob});
		} catch (err) {
			console.error(err);
			return res.status(500).json({err: 'Something went wrong'});
		}
	}
);

app.put(
	'/api/jobs/:id',
	async (
		req: Request<{id: string}, {}, Job>,
		res: Response<MyResponse<Job>>
	) => {
		try {
			const id = req.params.id;
			const job = req.body;
			const updatedJob = await xata.db.joob.update(id, job);

			if (!updatedJob) {
				return res.status(404).json({err: 'Job not found.'});
			}

			return res.status(200).json({data: updatedJob});
		} catch (err) {
			console.error(err);
			return res.status(500).json({err: 'Something went wrong'});
		}
	}
);

app.delete(
	'/api/jobs/:id',
	async (
		req: Request<{id: string}, {}, {}>,
		res: Response<MyResponse<Job>>
	) => {
		try {
			const id = req.params.id;
			const deletedRecord = await xata.db.job.delete(id);

			if (!deletedRecord) {
				return res.status(404).json({err: 'Job not found.'});
			}

			return res.status(200).json({data: deletedRecord});
		} catch (err) {
			console.error(err);
			return res.status(500).json({err: 'Something went wrong'});
		}
	}
);

app.listen(port, () => {
	console.log(`Server running at port ${port}`);
});

```

We can visit [`http://localhost:3000/API/jobs`](http://localhost:3000/API/jobs) to view the returned data. 

![Data returned by our API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/local-data.png)

## Step 2

We want to start the deployment instantly. You can clone this project or make your own. Ensure your GitHub repository is set up so you can access it from within Render. I've already deployed this application in testing.

![API deployed to Render](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/render-deploy.png)

I will navigate to the Render [homepage](https://render.com/). Already logged in, I intend to create a new web service. Web services are servers that host Node.js APIs.

![Creating a web service](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/create-web-service.png)

## Step 3

I'll now look inside for the project *nodejs-api-with-rapidapi-typescript-xata*. We can name it **jqq-jobs-api-2**. The step includes selecting a region; my closest region is the **US East**. For the root directory, we are operating a `node`. In previous guides, I specified that the `engines` property in the package.json file must contain `node:18`. This is because the Xata SDK is looking for a built-in fetch, which is not available unless you employ a feature flag or a string such as `node:18`.

It will then inquire about the build commands. We will compose the command `npm run build`, which may be slightly modified. Therefore, the build command will execute `npm install`, followed by `rimraf` of the build directory, and finally, `tsc`, which performs the actual compilation.

The `install` command will ensure that all packages, including `rimrraf`, are accessible during the `build` command. In addition, `rimraf` will delete any existing build information to ensure that we receive a set of clean files. Then `tsc` will perform the `build` operation, compiling TypeScript to JavaScript. After which, the start command will be `npm run start`.  Therefore, this command will execute the file `index.js` from the build directory. 

```json
{
    "name": "nodejs-api-with-rapidapi-typescript-xata",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "engines": {
	"node": "≥18",
    "scripts": {
        "build": "npm install && rimraf ./build && tsc",
        "start:dev": "npx nodemon",
        "start": "npm run build && node build/index.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@types/node": "^18.11.9",
        "nodemon": "^2.0.20",
        "rimraf": "^3.0.2",
        "ts-node": "^10.9.1",
        "typescript": "^4.8.4"
    }
}
```

These were the only requirements. Now we can proceed to create this web service, and it will require a few seconds to spin up.

![Specifying commands](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/commands.png)

## Step 4

In the meantime, I'd like to navigate to RapidAPI Studio. We've already developed an API project in the past called **Jobs Node.js*. Inside the requests section, we can see that all our CRUD requests are already stored in this location.

![Our Jobs API on Rapid API Studio](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/jobs.png)

The [RapidAPI Client](https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapid-client&ssr=false) extension for VS Code enables you to define multiple requests and switch between projects. Signing in will allow you to connect to an existing project, which will populate these requests.

So while this is running, I could test these to ensure that I receive all of my data and can execute my **GET**,**POST**, **PUT**, and **DELETE** requests. All of those things were available for testing, which is extremely convenient. 

Now comes the last part. We need to make the API publicly accessible in RapidAPI so we can sell it. So head over to the **Hub Listing** section.

![Hub Listing page of Rapid API Studio](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/hub-listing.png)

## Step 5

For the base URL, copy the URL from the link directly beneath the web service on Render. Paste it in the Base URL field on the Hub Lsiting page. Here, you can also upload a logo, choose a category, and provide a brief description, such as "This is an API for developer jobs".

We could add additional information to the readme file and add documentation. The documentation will be derived from the endpoints we add, so it will be relatively straightforward.

![Adding base URL and other details on the Hub Listing page](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/details.png) 

## Step 6

Inside the endpoints section, we will create our single endpoint. `Get Jobs` is the name we'll give to the get endpoint that retrieves the actual jobs. In the description, we can state, "Get all developer jobs," while the endpoint link can read `/api/jobs`. What's interesting is that it will generate code snippets for those who wish to use our API.

![Adding Get Jobs endpoint](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/job-endpoint.png)

## Step 7

The next step is to monetize our API. You can specify the various plans for your API and set usage limits for each one.

![Monetizing the API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/monetize.png)

## Step 8

Below is how it will appear on the [Rapid API Hub](https://rapidapi.com/hub), where you will receive code snippets for the endpoint and can test it.

![API published on Rapid API Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/hub.png)

However, we must first test this to see if it functions properly. In addition, we should add our API key to the database URL. Therefore, I will simply copy this API key into my `.env.local` file, and then we will add it to the application's environment on Render.

We can add an environment variable using the environment option. I'm going to paste the API key and associated value into the value field. Then, we must save and *deploy latest commit*, ensure that the deployment was successful, and proceed with testing.

![Adding API key on Render](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/render-key.png)

Now, we can test the endpoint directly. Copy the URL and paste it into the browser,  and append */api/jobs* to the URL like this: `jqq-jobs-api-2.onrender.com/api/jobs`. You will notice our API is operational, and it returns the following data:

![Data returned by our deployed API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/deployed-data.png)

## Step 9

Now we can also test the endpoint from its page on Rapid API Hub and see if it is returning proper data. Note that we did not add the remaining endpoints for all the CRUD routes. We're only doing the reads that make sense from a public perspective, but the rest of them are not available in RapidAPI Hub. We have protected them so that only the appropriate individuals can update and delete data, etc., but if you want to, you can add them using the same steps.

## Wrap Up

In summary, we discovered how to run a Node.js project that employs TypeScript, Xata as the database, RapidAPI for developing and testing APIs, and Render's free tier for deployment. This guide is the answer to the question, "What should we do next after Heroku removed its free tier?"


3 ways to build a Flight Widget! (JavaScript + Node.js + REST API + Database)