Creating Django project

If you don't have a Django project and an app for this purpose, you should create a new one. In my example, it will be the project of a todo app.

According to this, we are starting by creating some folders for our apps!

Open your command-line interface or shell!

Select your project folder!

$ mkdir todo

$ cd todo

$ mkdir backend

$ cd backend

Create a Django project!

If you have not seen the 'Hello world app' chapter yet, click on this link.

Todo app

$ python manage.py startapp todos

$ python manage.py migrate

Migrating your initial database.

Create models to your todo databse!

models.py

$ python manage.py migrate todos

Migrating your todo models to database.

Create superuser!

admin.py

$ python manage.py createsuperuser

After this command you have to add your username, email and password on the command-line.

With using this account you can update your database and add new todo for instance.

Log in to your admin interface and add todos: http://localhost:8000/admin/

Use 'Add +' button and fill the text fields (title, body)!

$ pipenv install djangorestframework

Add 'rest_framework' to the INSTALLED_APPS in your settings.py file!

Add AllowAny to your settings.py file!

config/settings.py

REST_FRAMEWORK = { 'DEFAULT_PERMISSION_CLASSES': [ 'rest_framework.permissions.AllowAny', ] }

Set up your urls.py file!

config/urls.py

urls.py

Create serializers.py file!

serializers.py

With serializers we can transfrom data from Django-models to JSON.

Add the next classes to your views.py file!

views.py

$ pipenv install django-cors-headers

With CORS (Cross-Origin Resource Sharing) we can specify which cross-domain requests should be permitted.

Your settings file should look like this now. I highlighted which part is updated.

config/settings.py

$ python manage.py runserver

Run this on your browser: http://localhost:8000/api/

You have to get something like this:

Todo-frontend with React

Open a new command-line console and keep open the other for the todo-api!

Two console are open now. One for backend (port:8000) and one for frontend (port:3000).

Install node if you have not done yet!

Check this: Development environment with Node

$ npm install axios

$ npm start

Change src/Apps.js content for the next snippet!

src/Apps.js

src/index.js

public/index.html

Run build command on the folder that includes the react app.

$ npm run build

Run this on your browser: http://localhost:3000