Build a To-Do App with Django and React

Ran into this error,

“?: (corsheaders.E013) Origin ‘localhost:3000/’ in CORS_ORIGIN_WHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. https://) or netloc (e.g. example.com).”

The fix for this is to remove the trailing ‘/’ and prefix the "http://’ before local host. After making this change in the backend\settings.py file in the ‘CORS_ORIGIN_WHITELIST’ section, this worked for me.

Also, you need a ‘,’ at the end of the item “http://localhost:8000” in the CORS_ORIGIN_WHITELIST list

How to deploy this to DigitalOcean?

Great tutorial.

I have a couple of questions being a total noob.

What is the difference between the method definitions and the arrow functions in a class in javascript? They both appear to act as method functions, is there a scope difference or something?

And for the Input and Label tags in Modal.js, you seemed to have mapped the “for” attribute in Label and the “name” attribute in Input. Did you deliberately omit the “id” attribute because you didn’t want the effect?

great article, thanks a lot !! If you ran into the error “?: (corsheaders.E013) Origin ‘localhost:3000/’ in CORSORIGINWHITELIST is missing scheme or netloc HINT: Add a scheme (e.g. https://) or netloc (e.g. example.com).” Same as bellow try this

CORS_ORIGIN_WHITELIST = [
 'https://localhost:3000'
]

Today I learn that django care about the brackets !

1. You added localhost:8000 as a proxy and you mentioned the purpose of it. However, you still left it in your axios requests

2. I believe you’ll be getting forbidden requests unless you include CSRF tokens as well.

3. you already used npm to create the react app. Why are you suddenly using yarn? The tutorial gets very confusing when it’s just blindly copy/pasting code.

After registering todo app then run command::python manage.py createsuperuser Got errors- <class ‘todo.admin.TodoAdmin’>: (admin.E108) The value of ‘list_display[2]’ refers to ‘completed’, which is not a callable, an attribute of ‘TodoAdmin’, or an attribute or method on ‘todo.Todo’.

Please help me to resolve this

Hi, thank you for this tutorial.

I completed the exercise but I am getting “Forbidden” messages when I try to DELETE. How can I fix this part?

Also, what can I do to refresh the GUI after any operation. For example, I would like if after checking a TODO task “complete”, it will immediately disappear from the list of incomplete tasks.

How to deploy these 2 app at once

I managed to get past the CORSORIGINWHITELIST error and a couple of others, but from the point at which I edit the src/App.js file I am stuck with the default React screen no matter what I do. Does anyone know what I might have missed? Environment is an Ubuntu PC, everything on the BASH terminal and using Chromium and Firefox as browsers.

Had to import bootstrap explicitly like so:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

otherwise bootstrap wouldn’t load.