A simple express JS client in 5 mins!

It’s important to know the basics of creating a node client when you are interested in learning front end technologies. This article helps you create a simple Node JS app using express.

Let’s Begin!!!

Prerequisite:

1. Knowledge about Node, installing packages, NVM and using any IDEs.
2. Basics of JavaScript (ES5 or ES6+)

Initial steps before we get into creating a client and apis:

Open your Terminal/Command Prompt and create a project folder

mkdir express_demo
cd express_demo

Initialize npm, this will ask you few details about your project that will be updated in package.json file. (Just press enter if you want to skip)

npm init

this creates a package.json file and by default the main file would be index.js (I like to have it as server.js)

Your package.json file will look like

package.json

Open the project in your IDE and let’s do some Coding !!

Step 1: Install express

npm i express

Step 2: Create index.js file in your project (if you remember your main file is index.js, read and understand your package.json file for more insight)

Your folder structure will look something like this

IDE

Step 3: Open index.js and add following lines of code

a. Import express and any other libraries if you need. (For this example, I will be using “es6-promise” and “isomorphic-fetch” since I would also be showing how to make a fetch call to existing dataset/api)

Open your terminal and install these two libraries

npm i es6-promise
npm i isomorphic-fetch

index.js

b. As shown above “app” has the scope of express so create a listener which listens to a specific port, In this example it’s port number 3000

index.js

c. Your client is ready, open your terminal navigate to your project folder and type

node index.js

(Check add-ons section’s point 1 at the end to learn about nodemon)

Terminal

Open your browser and hit http://localhost:3000/ to see the following screen

Browser

Step 4: Now we are ready to write our CRUD api’s

NOTE: For this example I will be using api that city of chicago has (https://data.cityofchicago.org). Thank you city of chicago for such an amazing work.

a. Let’s write a simple get block in index.js

index.js

Now, restart your node client and refresh your browser to see the following screen

browser

b. Let us enhance the get block with fetch, ES6 async and await to get some data

index.js

again, restart your node client and refresh your browser to see the the data from cityOfChicago api (learn nodemon for automatic reload)

checkout the complete code in github

Few add-ons

1. Use nodemon if you don’t want to restart your server each time you change in index.js

npm i nodemon

And instead of “node index.js” do “nodemon index.js”

2. async and await documentation

3. Express CRUD examples (app.METHOD(PATH, HANDLER))

app.get(‘/’, function (req, res) {
 res.send(‘Hello World!’)
})
app.post(‘/’, function (req, res) {
 res.send(‘Got a POST request’)
})
app.put(‘/user’, function (req, res) {
 res.send(‘Got a PUT request at /user’)
})
app.delete(‘/user’, function (req, res) {
 res.send(‘Got a DELETE request at /user’)
})

Reference and Mentions

1. City Of Chicago portal: https://data.cityofchicago.org/
2. ExpressJS docs : https://expressjs.com/

Learn more about me here,

www.prashanthpnaika.com

https://www.linkedin.com/in/prashanthnaika

https://github.com/pnaika