How to create and deploy a dummy API with ExpressJS and Heroku
Tags: node, express, tutorial, heroku
Published: 2022-01-08 08:45:06

---
title: How to create and deploy a dummy API with ExpressJS and Heroku
published: true
description: How to create and deploy a dummy API with ExpressJS and Heroku
tags: nodejs, expressjs, tutorial, heroku
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14urr3c1v7jqvnmp1ich.png
---

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](https://twitter.com/Dom_TheDev)

I also made a step by step [video](#video)

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

> [Subscribe to my YouTube Channel](https://www.youtube.com/channel/UCAa2t4QIxlaUuPO2FKq5TDw?sub_confirmation=1)


#### List of contents
- [NodeJS](#nodejs)
- [Setup Application](#setup)
- [Create Server](#create-server)
- [Generate Dummy Data](#generate-dummy)
- [JSON Response](#response)
- [GitHub Repository](#github)
- [Create Heroku App](#heroku-app)
- [Add Procfile](#procfile)
- [Deploy Server](#deployment)


### NodeJS <a name="nodejs"></a>

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: 

```cli
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 <a name="setup"></a>

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

```cli
mkdir dummy-api && cd dummy-pi
```

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

```cli
npm init -y
```

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

```cli
npm install express --save
```

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

### Create Server <a name="create-server"></a>

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

```json
"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.

```js
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<a name="generate-dummy"></a>

## 
To generate the dummy data, which we later want to serve on our API, we can use the json-generator which you find [here](https://json-generator.com/).

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 <a name="response"></a>

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 <a name="github"></a>

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](https://github.com/). 

```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 <a name="heroku-app"></a>

Create an account in [Heroku](https://heroku.com) 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 <a name="procfile"></a>

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 <a name="deployment"></a>

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 <a name="video"></a>

{% youtube HIBVMhGO7wo %}