Build Single page application with React and Django Part 3 — Use JWT with DRF and tests endpoints on Travis-CI

Introduction

This topic is the third article for Build Single page application with React and Django for building JWT endpoints for authorization and suppose that we have already had a Django application on Github.

Agenda

In this article, we will use Django REST Framework(DRF) and PostgreSQL for the following sections.

• Migrate Database to PostgreSQL
• Create Endpoints for JSON Web Token (JWT) with DRF
• Verify JWT Endpoints on Postman
• Create Unit Tests for Endpoints

About this series

The target of this series is to build a ReactJS single page application(SPA) with Django API server and deploy on Heroku.

• Part 1: Deploy Django application to Heroku and migrate PostgreSQL
• Part 2: Connect React App with Django App
• Part 3: this article
• Part 4: Create Endpoints to Manipulate Resources
• Part 5.1: Exchange Facebook’s access token to JWT from Django/DRF
• Part 5.2: Exchange Github’s access token to JWT from Django/DRF
• Part 6: Create Django Application’s sitemap on Heroku for SEO
• Part 7: How to Refactor Function Components with HOC?
• Part 8: Static Rendering with Next.js and Django on Heroku
• Part 9: Access Redux on the Next.js page-level
• Part 10: Improve SEO with Pyppeteer in Django
• Part 11: Theming with Redux and styled-component

Migrate Database to PostgreSQL

The default database for Django application is SQLite3. PostgreSQL is a better choice if we will deploy the application on Heroku in the future.

Suppose that we have installed the PostgreSQL. We can also refer to the following article to learn the basis of PostgreSQL

That’s migrating to PostgreSQL.

1.Install packages

• Type the following commands in the terminal

pip install psycopg2
pip install psycopg2-binary

2.Modify settings.py

DATABASES = {
     'default': {
         'ENGINE': 'django.db.backends.postgresql_psycopg2',
         'NAME': os.getenv("DB"),
         'USER': os.getenv("USER"),
         'PASSWORD': os.getenv("PASSWORD"),
         'HOST': os.getenv("HOST"),
         'PORT': os.getenv("PORT")
     }
 }

3.Set environment variables

• Type the following commands in the terminal

export USER=...
export PASSWORD=...
export HOST=localhost
export PORT=5432
export DB=ideas

4.Create a new database on PostgreSQL

• Type the following commands in the terminal

psql
create database ideas;

Create Endpoints for JWT with DRF

I referred to this article to complete endpoints for JWT and modified the code from it.

You can also check it for details or you can follow this following steps.

1.Install packages

pip install djangorestframework
pip install djangorestframework-jwt
pip installdjango-cors-headers

2.Edit app/urls.py

3.Edit app/views.py

4.Create app/serializer.py

5. Create app/utils.py

6.Modify settings.py

7.Migrate the user table on the database

python manage.py migrate

Verify JWT Endpoints on Postman

• Create a new user (/create_user)

• Get the token (/token_auth)

• Get the user name by the token (/current_user)

Create Unit Tests for Endpoints

You can also refer to the following article for integrating Django application with Travis-CI.

That’s testing JWT endpoints with Travis-CI.

1.Edit app/tests.py

2.Create .travis.yml in the root folder

3.Enable the repository on Travis-CI.com

• Select repositories from Repository access

4.Set environment variables on Travis-CI.com for the database

5.Push to Github and check Travis-CI.com

References

• Travis CI with Django
• PostgreSQL for Django in Travis CI
• Django & React: JWT Authentication

Summary

Thanks for your patient. I am Sean. I work as a software engineer.

This article is my note. Please feel free to give me advice if any mistakes. I am looking forward to your feedback.

Please feel free to clap if this article can help you. Thank you.

You can also subscribe my page on Facebook.

Related topics

How to use the two-way binding in Knout.js and ReactJS?

Learn how to use SignalR to build a chatroom application

My reflection of :

IT & Network:

Database:

Software testing:

Debugging:

DevOps: