---
title: How to deploy a Django app to Heroku
date: 'March 30, 2021'
description: Learn how to deploy a Django app to Heroku
tags: ['django', 'heroku']
---


Introduction
---
---
- Here we'll deploy a To-Do app I made in Django. Here's [source-code](https://undefinedzack.hashnode.dev/how-to-create-a-to-do-app-in-django-with-bootstrap-and-font-awesome).


Initial Setup
---
---

### Installing Heroku CLI

---

1. On Linux

    ```c
    curl https://cli-assets.heroku.com/install.sh | sh
    ```

2. On Windows

    Just download and install the Heroku CLI from [here](https://devcenter.heroku.com/articles/heroku-cli#download-and-install).

### Verifying installation

---

To verify our CLI installation

```c
heroku --version
```


![Screenshot_from_2021-01-03_01-18-01.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609672183774/Bi-sh1WOB.png)

### Creating a Heroku Account

---

If you don't have a [Heroku](http://heroku.com) account, go ahead and create one.

Diving In!
---
---

### Log In

---

We'll have to log in into our Heroku account through CLI.

```c
heroku login
```

- It'll open up your default browser, where you'll have to enter your login credentials.
- After successful login, we can now create and manage our Heroku apps directly from the terminal.


![Screenshot_from_2021-01-03_01-22-14.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609672201730/lTpWHrPie.png)

### Creating a git repository

---

**Why do we need a git repository?**

- Think of it as an update mechanism, with every commit we'll make it'll act as an update to our deployed app.
- This even helps us in creating restore points, if at any point a new update is crashing our app or has too many annoying bugs, we can hop onto the previous stable commit, and save us the downtime losses.

→ Initialize the git repository, in the directory which contains manage.py

```jsx
git init
```

→ Add everything we have in our app, to the git repository.

```jsx
git add .
```

→ Make a commit

```jsx
git commit -m "initial commit"
```

### Creating a Heroku app

---

```jsx
heroku create
```

It'll create a Heroku app with any random name. In my case it's "salty-peak-80429".


![Screenshot_from_2021-01-03_01-44-52.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609672257461/eZemH_I-O.png)

**Linking our git repository with our Heroku app**

- We'll have to link our heroku app to our git repository because we know we'll be making commits to this repository but heroku doesn't know what to watch.

```jsx
heroku git:remote -a salty-peak-80429
```

### Setting up App server

---

- Now Django comes with it's own development server (**python [mange.py](http://mange.py) runserver)**, we have tested our app on development server ample of times.
- Well when we deploy our app to heroku we can no longer use our development server, we'll need some kind of "app server" which heroku will serve after installing the app on it's server.
- Moreover before we deploy our app we'll have to make sure that our app still functions in the app server.

Let's install an app server.

```jsx
pip install gunicorn
```

Let's test our app server. Locate the [wsgi.py](http://wsgi.py) file in your main app directory, in my case my main directory is 'tutorial'.

```jsx
gunicorn tutorial.wsgi
```

This command doesn't run on windows because gunicorn is incompatible with windows. For more information → [here](https://stackoverflow.com/questions/11087682/does-gunicorn-run-on-windows).

It'll start a server on our [localhost](http://localhost) port 8000.


![Screenshot_from_2021-01-03_12-07-50.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609672311365/G2xWya_lf.png)

- Now we'll have to test our app to make sure whether everything's working fine or not. Go ahead and have a look.
- Now we know our app functions well even on app server.

At this stage we are ready with our app to be deployed, but the thing is 

- Heroku neither knows how to start our app server, nor does it know what will our app require for functioning.
- In order to tell Heroku these thing's we'll have to create 2 more files :
    - Procfile
    - requirements.txt

### Creating Procfile

---

**What's a Procfile?**

- Heroku apps include a Procfile that specifies the commands that are executed by the app on startup. You can use a Procfile to declare a variety of process types, including:
    - Your app’s web server
    - Multiple types of worker processes
    - A singleton process, such as a [clock](https://devcenter.heroku.com/articles/scheduled-jobs-custom-clock-processes)
    - Tasks to run [before a new release is deployed](https://devcenter.heroku.com/articles/release-phase)
- For more information about Procfile refer → [here](https://devcenter.heroku.com/articles/procfile)

In the main directory which contains 'manage.py', we create Procfile

```jsx
touch Procfile
```

Now we'll have to write commands which heroku should execute on app startup, this includes starting up app server.

```jsx
web: gunicorn tutorial.wsgi
```

### Creating Requirements.txt

---

This file will contains all the modules we used in our app for proper functioning and yeah you don't have to manually write down every module you used, there's a command for that

```jsx
pip freeze > requirements.txt
```

It'll automatically calculate what modules you have used with the version.


![Screenshot_from_2021-01-03_12-33-42.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609672347004/hUJ6zVATn.png)

make sure you're running this command inside your virtual environment, to know how to create one → [here](https://undefinedzack.hashnode.dev/how-to-create-a-to-do-app-in-django-with-bootstrap-and-font-awesome).

### Finishing up

---

Let's update our git repository with all the latest changes.

We'll perform

- **git add .** and
- **git commit -m "added gunicorn (app server) with requirements.txt and Procfile"**

Let's push it

```jsx
git push heroku master
```


![Screenshot_from_2021-01-03_15-21-15.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609672377781/_yj3OgMuc.png)

### Possible Errors

---

- If you haven't set static root in your Django settings, you'll get a **DISABLECOLLECTSTATIC** error.
- Django doesn't serve static files in the app server on it's own, that's why we have to define a place where heroku can keep and manage all the static files.
- Just add **STATIC_ROOT** in your [settings.py](http://settings.py) file.

```jsx
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
```

- We also need to add our heroku site to ALLOWED_HOSTS in [settings.py](http://settings.py), if you haven't already
- i.e. in my case I'll have to allow [https://salty-peak-80429.herokuapp.com](https://salty-peak-80429.herokuapp.com/), or we can simply allow all hosts

```jsx
ALLOWED_HOSTS = ['*']
```

- After making changes, make a commit and try pushing with **git push heroku master** again.

### It's Deployed!

---

Yup if no error occurs during push command which usually comes if you're doing it for the first time, but hang on, solution's right around the corner waiting for you, you just need to seek it.

You can check out my deployed to-do app at - 

[To-Do App](https://salty-peak-80429.herokuapp.com/)

### Resources

---

- [Heroku Documentation](https://devcenter.heroku.com/articles/heroku-cli#download-and-install)
- [Source Code](https://github.com/undefinedzack/TUTORIAL-how-to-deploy-a-django-app-to-heroku)

thats all peeps...



How to deploy a Django app to Heroku

How to Create a To-Do app in Django with Bootstrap and Font-Awesome!

---
title: How to integrate MongoDb in your Next.js project
date: 'January 29, 2022'
description: Learn how to integrate MongoDb in your Next.js project.
tags: ['mongoDb', 'next.js', 'typescript']
---

# Creating a Next.js Project

1. Initialise a Next.js project with [npx](https://www.npmjs.com/package/npx).

```jsx
npx create-next-app nextjs-mongodb --typescript
```

![Untitled.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643436255909/nICX8BeJ64.png)

1. Thats it! Just open up your project in your favourite code editor.
2. Run the dev server

```jsx
yarn dev
```

![Untitled 1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643436276466/xk_P6QzZq.png)

- Over to **http://localhost:3000,** we’ll see

![Untitled 2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643437125669/uRPJ1pv4_.png)

# Installing MongoDb

Use npm or yarn to install MongoDb

```jsx
yarn add mongodb
```

# Prerequisites

- If you don’t have a MongoDb Atlas Cluster, you can create one for free! Follow the steps from this [article](https://studio3t.com/knowledge-base/articles/mongodb-atlas-tutorial/#set-up-a-free-mongodb-atlas-cluster).
- Get your **username** and **password,** after going through the cluster setup and configuration of ip and address and connection string, which we’ll use to connect to our MongoDb from our Next.js app.
- If you prefer your database to be local instead of in *the cloud*, you can go through this [article](https://www.prisma.io/dataguide/mongodb/setting-up-a-local-mongodb-database).

# Let’s get started

- Create .env.local for storing our environment variables. Replace your respective credentials with Username, Password and Database-Name.

```tsx
MONGODB_URI=mongodb+srv://Username:Password@cluster0.dnnhc.mongodb.net/Database-Name?retryWrites=true&w=majority
MONGODB_DB=Database-Name
```

- Create a **lib** folder inside your root directory, here we’ll store our MongoDb config file.

![Untitled 3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643436201901/vdkT2OYe_.png)

- Add a file named **mongodb.ts** inside the lib folder

```tsx
import { Db, MongoClient } from "mongodb";

const MONGODB_URI = process.env.MONGODB_URI;
const MONGODB_DB = process.env.MONGODB_DB;

let cachedClient: MongoClient;
let cachedDb: Db;

export async function connectToDatabase() {
  // check the cached.
  if (cachedClient && cachedDb) {
    // load from cache
    return {
      client: cachedClient,
      db: cachedDb,
    };
  }

  // set the connection options
  const opts = {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  };

  // check the MongoDB URI
  if (!MONGODB_URI) {
    throw new Error("Define the MONGODB_URI environmental variable");
  }
  // check the MongoDB DB
  if (!MONGODB_DB) {
    throw new Error("Define the MONGODB_DB environmental variable");
  }

  // Connect to cluster
  let client = new MongoClient(MONGODB_URI);
  await client.connect();
  let db = client.db(MONGODB_DB);

  // set cache
  cachedClient = client;
  cachedDb = db;

  return {
    client: cachedClient,
    db: cachedDb,
  };
}
```

- Here we’re defining a initialiser function which will check whether we are connected to our MongoDb instance, each time we call it, if not it’ll make a connection and will cache the same.

# Creating API

- Load sample data or you can add some random data of your own in your database, to get some results instead of empty array when we’ll GET request them.

![Untitled 4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643436331061/8vMaTVzdH.png)

- For instance I’ve added my blogs to MongoDb and I’ll GET request them, you can do the similar by
    - Go to **Browse Collections**
    - Click on **Create Database**
    - Type what you wanna name your **Database** and **Collection.**
    - Finally insert any document you want to.
    - Remember you’ll have to replace the **Database-Name** in your .env.local file**,** with the name of your database you’ll create here.
- Create a file (indirectly route, thanks to Next.js!) within **pages/api** folder, I’m making it for my blogs so I’ll create **blogs.ts**.

![Untitled 5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643436421587/u6Mr7RcWa.png)

```tsx
import { NextApiRequest, NextApiResponse } from "next";
import { connectToDatabase } from "../../lib/mongodb";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  let { db } = await connectToDatabase();

  const blogs = await db.collection("blogs").find().toArray();

  res.status(200).json({ blogs });
}
```

- replace **blogs**  with your collection name.
- Here we are calling our **connectToDatabase()** function to get our db instance and fetching everything inside our **blogs** collection.

# Result

- Now head over to you browser and open up, to test our api.

```tsx
http://localhost:3000/api/blogs
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643436802910/rv05WXBaL.png)

- and it’s working!
- Now you can customise the api with CRUD or whatnot as per your needs. There’s no end to the extent of customisation.

That’s all peeps...

Front End

Back End

Database

Blogger

A2OJ Ladders

A2OJ Ladders React Native

Car Rental Database Management UI