How to create and deploy a dummy API with ExpressJS and Heroku

In this tutorial you will learn how to create and deploy an API with dummy data.

For that we are going to create an ExpressJS Server, and deploy it to Heroku from a GitHub Repository.

If you have any questions hit me up von Twitter

I also made a step by step video

GitHub Files: https://github.com/dom-the-dev/doms-api
Demo: https://doms-api.herokuapp.com/posts

Subscribe to my YouTube Channel

List of contents

• NodeJS
• Setup Application
• Create Server
• Generate Dummy Data
• JSON Response
• GitHub Repository
• Create Heroku App
• Add Procfile
• Deploy Server

NodeJS

Before we yout can start you have to make sure that you have node installed on your machine. To do so open your terminal and run following command:

node --version

If you get promed a version number like this v14.16.0 node is already installed. If not you need to install it. For that visit the https://nodejs.org/en/ where you can download and installer.

Once you have node installed we can start.

Setup Application

In our terminal, let's create a new directory for our application with following command:

mkdir dummy-api && cd dummy-pi

Now we need to initialize npm. The following command will generate a package.json with defaults set.

npm init -y

After that we can add the ExpressJS framework with by running this command:

npm install express --save

Our project is now ready and we can open it in our favorite texteditor.

Create Server

If you open package.json you see that our main entry point is set to index.js.

"main": "index.js",

This means we need to name our server file exactly like that.
This is just a default value and you can rename it if you want to.

So, in our project root create a file index.js which will be our application.

Here we can now create our server. To do so we need to require express.

const express = require('express')

To create our server we need to call express and store it in a variable like that:`

js
const app = express()


To actually make our server run we now need to run the listen method. Here we need to pass a port, on which the server will run. We also can pass a callback method.

js
app.listen(process.env.PORT || 3000, () => console.log("Server is running."))


Your server is ready to run. In your terminal run

cli
node index.js to start your server.
`

The terminal should reponse with our callback function and you should see

cli
Server is running.


Now when you visit http:localhost:3000 you should get an error, since we are not responding to the browser.
Lets add that now.

We need to create a GET Route which will send a response to the browser.

js
app.get('/', (req, res) => {
res.send('Api is running.')
})


We create a new GET route by calling the app.get() function. Here we pass the path of the route as well as a callback function, which sends our response.

To make the changes affect you need to restart the server.
Then go back to your browser and reload the page.
You should now see Api is running. in your browser.

Generate Dummy Data

To generate the dummy data, which we later want to serve on our API, we can use the json-generator which you find here.

On the left side you see the settings for you dummy data. You can play around and edit them like you want. If you want to dive deeper into that i recommend to check out the help section.

For our case it is enough to hit de generate button, and copy the generated JSON Object on the right side.

Now we need to store this JSON object in a file, so we can require it in our server application.

In the root of our project create a file named posts.js. Inside of if we are going to export the dummy data like that:

js
module.exports = "paste your dummy data here"


JSON Response

Move back to index.js where we import our dummy data. At the top add following line:

js
const posts = require("./posts");


Now we need to add another GET route similar to the first one, but instead of sending a simple response, we want to response with our json object.

Create a new GET route which points to /posts and response a json where you pass the dummy data object.

js
app.get('/posts', (req, res) => {
res.json(posts)
})


GitHub Repository

Our server is now ready to go, create a GitHub Repository where we can push the files to, so we can use them in our Heroku application.

Create a new repository on GitHub.

cli
git init
git remote add origin YOUR_GIT_URL
git add *
git commit -m "initial commit"
git push -u origin main


Create Heroku App

Create an account in Heroku and login to you dashboard.

On you app dashaboard create a new application by clicking on the button on the top right corner. Give your application a name, select a region an click on creat.

You will be redirected to the Deploy Tab. Here you can choose from several deployment methods. We are going to choose the GitHub method.

For that you need to connect your GitHub Account to Heroku. One this is done, you can browse your repositories. Here you can choose your Express Server Repository.

Now you can choose if you want to automatically deploy when you push to your main branch and you can deploy your application by clicking on the deploy branch button.

Before we can deploy our application we need to add one more thing.

Add Procfile

To let Heroku now which commands are needed to make our application run, we need to add a Procfile.
This Procfile contains the command which is needed to make our application run on Heroku.

Open your terminal an cd into your project root. Run following command to create this file:

cli
echo "web: node index.js"


Now push this file to your main branch.

Deploy Server

The last step now is to accutally click on the Deploy Branch.
This will run the deployment pipeline. You can follow the progress right here.
Once this is done you get success message that you Application has beend deployed and a visit button will be displayed.

You can now visit your ExpressJS Dummy Data API.

Thank's for reading! I hope you liked this article. Please leave me some feedback! :)

Step by Step Video