{"id":65825,"date":"2022-07-18T09:01:14","date_gmt":"2022-07-18T09:01:14","guid":{"rendered":"https:\/\/www.cryptocabaret.com\/?p=65825"},"modified":"2022-07-18T09:01:14","modified_gmt":"2022-07-18T09:01:14","slug":"create-a-javascript-api-in-6-minutes","status":"publish","type":"post","link":"https:\/\/www.cryptocabaret.com\/?p=65825","title":{"rendered":"Create a JavaScript API in 6 minutes"},"content":{"rendered":"

Create a JavaScript API in 6 minutes<\/span>
\nJessica Cherry<\/a><\/span>
\nMon, 07\/18\/2022 – 03:00<\/span><\/p>\n

\n
Register<\/a> or Login<\/a> to like<\/div>\n
Register<\/a> or Login<\/a> to like<\/div>\n<\/div>\n
\n

This article demonstrates creating a base API with Express and JavaScript. Express is a NodeJS minimalist web framework. This combination allows for minimal effort to get an API up and running at the speed of light. If you have six minutes of free time, you can get this API working to do something useful.<\/p>\n<\/p>\n

\n
Programming and development<\/div>\n
\n
Red Hat Developers Blog<\/a><\/div>\n
Programming cheat sheets<\/a><\/div>\n
Try for free: Red Hat Learning Subscription<\/a><\/div>\n
eBook: An introduction to programming with Bash<\/a><\/div>\n
Bash shell scripting cheat sheet<\/a><\/div>\n
eBook: Modernizing Enterprise Java<\/a><\/div>\n<\/p><\/div>\n<\/p><\/div>\n

Get started with NodeJS<\/h2>\n

What you need for this project is the NodeJS version of your choice. In this example, I use NodeJS<\/a> and HTTPie<\/a> for testing, a web browser, and a terminal. Once you have those available, you’re ready to start. Let’s get this show on the road!<\/p>\n

Set up a project directory and install the tools to get started:<\/p>\n

\n$ <\/span>mkdir<\/span> test-api<\/code><\/span><\/pre>\n
The npm init<\/code> command creates the package JSON for our project below. Type npm init<\/code> and press enter several times. The output is shown below:<\/p>\n
\n
$ npm init

\nPress ^C at any time<\/span> to quit.
\npackage name: (<\/span>test-api)<\/span>
\nversion: (<\/span>1.0.0)<\/span>
\ndescription:
\nentry point: (<\/span>index.js)<\/span>
test<\/span> command:
git<\/span> repository:
\nkeywords:
\nauthor:
\nlicense: (<\/span>ISC)<\/span>
\nAbout to write<\/span> to \/<\/span>Users\/<\/span>cherrybomb\/<\/span>test-api\/<\/span>package.json:

{<\/span>
\n\u00a0 \"name\"<\/span>: \"test-api\"<\/span>,
\n\u00a0 \"version\"<\/span>: \"1.0.0\"<\/span>,
\n\u00a0 \"description\"<\/span>: \"\"<\/span>,
\n\u00a0 \"main\"<\/span>: \"index.js\"<\/span>,
\n\u00a0 \"scripts\"<\/span>: {<\/span>
\n\u00a0 \u00a0 \"test\"<\/span>: \"echo \"<\/span>Error: no test specified\"<\/span> && exit 1\"<\/span>
\n\u00a0 }<\/span>,
\n\u00a0 \"author\"<\/span>: \"\"<\/span>,
\n\u00a0 \"license\"<\/span>: \"ISC\"<\/span>
}<\/span>


\nIs this OK? (<\/span>yes<\/span>)<\/span><\/div><\/div><\/pre>\n
This utility walks you through creating a package.json<\/code> file. It only covers the most common items, and tries to guess sensible defaults. See npm help init<\/code> for definitive documentation on these fields and exactly what they do.<\/p>\n
Use npm install {pkg}<\/code> afterward to install a package and save it as a dependency in the package.json<\/code> file.<\/p>\n
Next, install Express using the npm<\/code> CLI<\/a>:<\/p>\n
\n
$ npm install<\/span> express Output shown below

\nnpm WARN cherrybomb No description
\nnpm WARN cherrybomb No repository field.
\nnpm WARN cherrybomb No license field.

\n+ express@<\/span>4.18.1
\nadded 60<\/span> packages from 39<\/span> contributors and audited 136<\/span> packages in<\/span> 4.863s

16<\/span> packages are looking for<\/span> funding
\n\u00a0 run `<\/span>npm fund`<\/span> for<\/span> details

\nfound 0<\/span> vulnerabilities<\/div><\/div><\/pre>\n
Finally, create your source directory and your index.js<\/code> file, which is where the application code lives:<\/p>\n
\n
$ mkdir<\/span> src
\n$ touch<\/span> src\/<\/span>index.js<\/div><\/div><\/pre>\n
Time to code!<\/p>\n
Code an API<\/h2>\n
For your first act of coding, make a simple “hello world” API call. In your index.js<\/code> file, add the code snippet below:<\/p>\n
\n
const express = require(<\/span>'express'<\/span>)<\/span>
\nconst app = express(<\/span>)<\/span>
\nconst port = 5000<\/span>

\napp.get(<\/span>'\/'<\/span>, (<\/span>req, res)<\/span> =><\/span> {<\/span>
\n\u00a0 res.send(<\/span>'Hello World!'<\/span>)<\/span>
}<\/span>)<\/span>

\napp.listen(<\/span>port, (<\/span>)<\/span> =><\/span> {<\/span>
\n\u00a0 console.log(<\/span>`<\/span>Example app listening on port ${port}<\/span>`<\/span>)<\/span>
}<\/span>)<\/span><\/div><\/div><\/pre>\n
Each of these constant variables is available in the scopes below. Because you’re not using the following scopes within the code, these constants are used without too much extra thought.<\/p>\n
When you call app.get<\/code>, you define the GET{rest article needed}<\/code> endpoint to a forward slash. This also sets the “hello world” response.<\/p>\n
Finally, in the last section, you will start your app on port 5000. The output on your terminal shows your defined message in a file called console.log<\/code>.<\/p>\n
To start your application, run the following command, and see the output as shown:<\/p>\n
\n
$ test-api \u2192 node .\/<\/span>src\/<\/span>index.js
\nExample app listening on port 5000<\/span><\/div><\/div><\/pre>\n
Test the API<\/h2>\n
Now that everything is up and running, make a simple call to ensure your API works. For the first test, just open a browser window and navigate to localhost:5000<\/code>.<\/p>\n
\n
  \"Express<\/div>\n
Image by: <\/span><\/p>\n
(Jessica Cherry, CC BY-SA 4.0)<\/p>\n<\/div>\n<\/article>\n
Next, check out what HTTPie says about the API call:<\/p>\n
\n
HTTP\/<\/span>1.1<\/span> 200<\/span> OK
\nConnection: keep-alive
\nContent-Length: 12<\/span>
\nContent-Type: text\/<\/span>html; charset<\/span>=utf-8<\/span>
\nDate: Tue, 21<\/span> Jun 2022<\/span> 14<\/span>:31<\/span>:06 GMT
\nETag: W\/<\/span>\"c-Lve95gjOVATpfV8EL5X4nxwjKHE\"<\/span>
\nKeep-Alive: timeout<\/span>=5<\/span>
\nX-Powered-By: Express

\nHello World!<\/span><\/div><\/div><\/pre>\n
And there you have it! One whole working API call. So what’s next? Well, you could try some changes to make it more interesting.<\/p>\n
Make your API fun<\/h2>\n
The “hello world” piece is now done, so it’s time to do some cool math. You’ll do some counts instead of just “hello world.”<\/p>\n
Change your code to look like this:<\/p>\n
\n
const express = require(<\/span>'express'<\/span>)<\/span>
\nconst app = express(<\/span>)<\/span>
\nconst port = 5000<\/span>

let<\/span> count = 0<\/span>;

\napp.get(<\/span>'\/api'<\/span>, (<\/span>req, res)<\/span> =><\/span> {<\/span>
\nres.json(<\/span>{<\/span>count}<\/span>)<\/span>
}<\/span>)<\/span>

\napp.post(<\/span>'\/api'<\/span>, (<\/span>req, res)<\/span> =><\/span> {<\/span>
\n++count;
\nres.json(<\/span>{<\/span>count}<\/span>)<\/span>;
}<\/span>)<\/span>;

\napp.listen(<\/span>port, (<\/span>)<\/span> =><\/span> {<\/span>
\nconsole.log(<\/span>`<\/span>Example app listening on port ${port}<\/span>`<\/span>)<\/span>
}<\/span>)<\/span><\/div><\/div><\/pre>\n
Aside from a GET<\/code> command in your code, you now have a POST<\/code> to make some changes to your count. With count defined as 0<\/strong>, the LET<\/code> command allows changes to the COUNT<\/code> variable.<\/p>\n
In app.get<\/code>, you get the count, and in app.post<\/code>, you ++count<\/strong>, which counts upwards in increments of 1. When you rerun the GET<\/code>, you receive the new number.<\/p>\n
Try out the changes:<\/p>\n
\n
test-api \u2192 node .\/<\/span>src\/<\/span>index.js
\nExample app listening on port 5000<\/span><\/div><\/div><\/pre>\n
Next, use HTTPie to run the GET<\/code> and POST<\/code> operations for a test to confirm it works. Starting with GET<\/code>, you can grab the count:<\/p>\n
\n
test-api \u2192 http GET 127.0.0.1:5000<\/span>\/<\/span>api
\nHTTP\/<\/span>1.1<\/span> 200<\/span> OK
\nConnection: keep-alive
\nContent-Length: 11<\/span>
\nContent-Type: application\/<\/span>json; charset<\/span>=utf-8<\/span>
\nDate: Tue, 21<\/span> Jun 2022<\/span> 15<\/span>:23<\/span>:06 GMT
\nETag: W\/<\/span>\"b-ch7MNww9+xUYoTgutbGr6VU0GaU\"<\/span>
\nKeep-Alive: timeout<\/span>=5<\/span>
\nX-Powered-By: Express

{<\/span>
\n\u00a0 \u00a0 \"count\"<\/span>: 0<\/span>
}<\/span><\/div><\/div><\/pre>\n
Then do a POST<\/code> a couple of times, and watch the changes:<\/p>\n
\n
test-api \u2192 http POST 127.0.0.1:5000<\/span>\/<\/span>api
\nHTTP\/<\/span>1.1<\/span> 200<\/span> OK
\nConnection: keep-alive
\nContent-Length: 11<\/span>
\nContent-Type: application\/<\/span>json; charset<\/span>=utf-8<\/span>
\nDate: Tue, 21<\/span> Jun 2022<\/span> 15<\/span>:28<\/span>:28<\/span> GMT
\nETag: W\/<\/span>\"b-qA97yBec1rrOyf2eVsYdWwFPOso\"<\/span>
\nKeep-Alive: timeout<\/span>=5<\/span>
\nX-Powered-By: Express

{<\/span>
\n\u00a0 \u00a0 \"count\"<\/span>: 1<\/span>
}<\/span>


\ntest-api \u2192 http POST 127.0.0.1:5000<\/span>\/<\/span>api
\nHTTP\/<\/span>1.1<\/span> 200<\/span> OK
\nConnection: keep-alive
\nContent-Length: 11<\/span>
\nContent-Type: application\/<\/span>json; charset<\/span>=utf-8<\/span>
\nDate: Tue, 21<\/span> Jun 2022<\/span> 15<\/span>:28<\/span>:34<\/span> GMT
\nETag: W\/<\/span>\"b-hRuIfkAGnfwKvpTzajm4bAWdKxE\"<\/span>
\nKeep-Alive: timeout<\/span>=5<\/span>
\nX-Powered-By: Express

{<\/span>
\n\u00a0 \u00a0 \"count\"<\/span>: 2<\/span>
}<\/span><\/div><\/div><\/pre>\n
As you can see, the count goes up! Run one more GET<\/code> operation and see what the output is:<\/p>\n
\n
test-api \u2192 http GET 127.0.0.1:5000<\/span>\/<\/span>api
\nHTTP\/<\/span>1.1<\/span> 200<\/span> OK
\nConnection: keep-alive
\nContent-Length: 11<\/span>
\nContent-Type: application\/<\/span>json; charset<\/span>=utf-8<\/span>
\nDate: Tue, 21<\/span> Jun 2022<\/span> 15<\/span>:29<\/span>:41<\/span> GMT
\nETag: W\/<\/span>\"b-hRuIfkAGnfwKvpTzajm4bAWdKxE\"<\/span>
\nKeep-Alive: timeout<\/span>=5<\/span>
\nX-Powered-By: Express

{<\/span>
\n\u00a0 \u00a0 \"count\"<\/span>: 2<\/span>
}<\/span><\/div><\/div><\/pre>\n
The end and the beginning<\/h2>\n
I specialize in infrastructure and Terraform<\/a>, so this was a really fun way to learn and build something quickly in a language I’d never used before. JavaScript moves fast, and it can be annoying to see errors that seem obscure or obtuse. I can see where some personal opinions have judged it harshly as a language, but it’s a strong and useful tool. I hope you enjoyed this walkthrough and learned something new and cool along the way.<\/p>\n<\/div>\n
\n
Express yourself by coding a fun API using Express, a NodeJS minimalist web framework.<\/p>\n<\/div>\n
\n
\n
  \"Woman<\/div>\n
Image by: <\/span><\/p>\n
Ray Smith<\/p>\n<\/div>\n<\/article>\n<\/div>\n
\n
JavaScript<\/a><\/div>\n
Programming<\/a><\/div>\n<\/p><\/div>\n
What to read next<\/div>\n

\n        \"Creative<\/a>This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.<\/div>\n
\n
\n
Register<\/a> or Login<\/a> to post a comment.<\/div>\n<\/p><\/div>\n<\/section>\n
Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"
Create a JavaScript API in 6 minutes Jessica Cherry Mon, 07\/18\/2022 – 03:00 Register or Login to like Register or Login to like This article demonstrates creating a base API with Express and JavaScript. Express is a NodeJS minimalist web framework. This combination allows for minimal effort to get an API up and running at […]<\/p>\n","protected":false},"author":1,"featured_media":65826,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[307],"tags":[],"class_list":["post-65825","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-open-source"],"_links":{"self":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/posts\/65825","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=65825"}],"version-history":[{"count":0,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/posts\/65825\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/media\/65826"}],"wp:attachment":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=65825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=65825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=65825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}