Vite + React

54 |

55 | 62 | 63 | {errors.title && This field is required} 64 | 65 |

70 | 
 71 |         {errors.description && <span>This field is required</span>}
 72 | 
 73 |         <button className="bg-indigo-500 p-3 rounded-lg block w-full mt-3">
 74 |           Save
 75 |         </button>
 76 |       </form>
 77 | 
 78 |       {params.id && (
 79 |         <div className="flex justify-end">
 80 |           <button
 81 |             className="bg-red-500 p-3 rounded-lg w-48 mt-3"
 82 |             onClick={async () => {
 83 |               const accepted = window.confirm("Are you sure?");
 84 |               if (accepted) {
 85 |                 await deleteTask(params.id);
 86 |                 toast.success("Task Removed", {
 87 |                   position: "bottom-right",
 88 |                   style: {
 89 |                     background: "#101010",
 90 |                     color: "#fff",
 91 |                   },
 92 |                 });
 93 |                 navigate("/tasks");
 94 |               }
 95 |             }}
 96 |           >
 97 |             delete
 98 |           </button>
 99 |         </div>
100 |       )}
101 |     </div>
102 |   );
103 | }
104 |

--------------------------------------------------------------------------------
/client/src/pages/TasksPage.jsx:
--------------------------------------------------------------------------------
1 | import { TasksList } from "../components/TasksList";
2 | 
3 | export function TasksPage() {
4 |   return <TasksList />;
5 | }
6 |

--------------------------------------------------------------------------------
/client/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 |

--------------------------------------------------------------------------------
/client/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 |   base: process.env.NODE_ENV === 'production' ? '/static/' : '/',
8 | })
9 |

--------------------------------------------------------------------------------
/django_crud_api/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fazt/django-react-crud/057b14356231c526b7858203e93272122cfb4b6c/django_crud_api/__init__.py

--------------------------------------------------------------------------------
/django_crud_api/asgi.py:
--------------------------------------------------------------------------------
 1 | """
 2 | ASGI config for django_crud_api project.
 3 | 
 4 | It exposes the ASGI callable as a module-level variable named ``application``.
 5 | 
 6 | For more information on this file, see
 7 | https://docs.djangoproject.com/en/4.1/howto/deployment/asgi/
 8 | """
 9 | 
10 | import os
11 | 
12 | from django.core.asgi import get_asgi_application
13 | 
14 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "django_crud_api.settings")
15 | 
16 | application = get_asgi_application()
17 |

--------------------------------------------------------------------------------
/django_crud_api/settings.py:
--------------------------------------------------------------------------------
  1 | """
  2 | Django settings for django_crud_api project.
  3 | 
  4 | Generated by 'django-admin startproject' using Django 4.1.7.
  5 | 
  6 | For more information on this file, see
  7 | https://docs.djangoproject.com/en/4.1/topics/settings/
  8 | 
  9 | For the full list of settings and their values, see
 10 | https://docs.djangoproject.com/en/4.1/ref/settings/
 11 | """
 12 | 
 13 | from pathlib import Path
 14 | import dj_database_url
 15 | import os
 16 | 
 17 | # Build paths inside the project like this: BASE_DIR / 'subdir'.
 18 | BASE_DIR = Path(__file__).resolve().parent.parent
 19 | 
 20 | # Quick-start development settings - unsuitable for production
 21 | # See https://docs.djangoproject.com/en/4.1/howto/deployment/checklist/
 22 | 
 23 | # SECURITY WARNING: keep the secret key used in production secret!
 24 | SECRET_KEY = "django-insecure-klqc^ujfaoz4e!n&7r28(j$6uit36szf+%w#jvx@1i=6wcp21q"
 25 | 
 26 | # SECURITY WARNING: don't run with debug turned on in production!
 27 | DEBUG = True
 28 | 
 29 | ALLOWED_HOSTS = ["*"]
 30 | 
 31 | # Application definition
 32 | 
 33 | INSTALLED_APPS = [
 34 |     "django.contrib.admin", "django.contrib.auth",
 35 |     "django.contrib.contenttypes", "django.contrib.sessions",
 36 |     "django.contrib.messages", "django.contrib.staticfiles",
 37 |     'whitenoise.runserver_nostatic', "corsheaders", "rest_framework",
 38 |     "coreapi", "tasks"
 39 | ]
 40 | 
 41 | MIDDLEWARE = [
 42 |     "django.middleware.security.SecurityMiddleware",
 43 |     "whitenoise.middleware.WhiteNoiseMiddleware",
 44 |     "django.contrib.sessions.middleware.SessionMiddleware",
 45 |     "corsheaders.middleware.CorsMiddleware",
 46 |     "django.middleware.common.CommonMiddleware",
 47 |     "django.middleware.csrf.CsrfViewMiddleware",
 48 |     "django.contrib.auth.middleware.AuthenticationMiddleware",
 49 |     "django.contrib.messages.middleware.MessageMiddleware",
 50 |     "django.middleware.clickjacking.XFrameOptionsMiddleware",
 51 | ]
 52 | 
 53 | ROOT_URLCONF = "django_crud_api.urls"
 54 | 
 55 | TEMPLATES = [
 56 |     {
 57 |         "BACKEND": "django.template.backends.django.DjangoTemplates",
 58 |         # Tell Django where to find Reacts index.html file
 59 |         "DIRS": [os.path.join(BASE_DIR, "client", "dist")],
 60 |         "APP_DIRS": True,
 61 |         "OPTIONS": {
 62 |             "context_processors": [
 63 |                 "django.template.context_processors.debug",
 64 |                 "django.template.context_processors.request",
 65 |                 "django.contrib.auth.context_processors.auth",
 66 |                 "django.contrib.messages.context_processors.messages",
 67 |             ],
 68 |         },
 69 |     },
 70 | ]
 71 | 
 72 | WSGI_APPLICATION = "django_crud_api.wsgi.application"
 73 | 
 74 | # Database
 75 | # https://docs.djangoproject.com/en/4.1/ref/settings/#databases
 76 | 
 77 | # DATABASES = {
 78 | #     "default": {
 79 | #         "ENGINE": "django.db.backends.sqlite3",
 80 | #         "NAME": BASE_DIR / "db.sqlite3",
 81 | #     }
 82 | # }
 83 | 
 84 | DATABASES = {
 85 |     "default":
 86 |     dj_database_url.config(default="sqlite:///" +
 87 |                            os.path.join(BASE_DIR, "db.sqlite3"))
 88 | }
 89 | 
 90 | # Password validation
 91 | # https://docs.djangoproject.com/en/4.1/ref/settings/#auth-password-validators
 92 | 
 93 | AUTH_PASSWORD_VALIDATORS = [
 94 |     {
 95 |         "NAME":
 96 |         "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
 97 |     },
 98 |     {
 99 |         "NAME":
100 |         "django.contrib.auth.password_validation.MinimumLengthValidator",
101 |     },
102 |     {
103 |         "NAME":
104 |         "django.contrib.auth.password_validation.CommonPasswordValidator",
105 |     },
106 |     {
107 |         "NAME":
108 |         "django.contrib.auth.password_validation.NumericPasswordValidator",
109 |     },
110 | ]
111 | 
112 | # Internationalization
113 | # https://docs.djangoproject.com/en/4.1/topics/i18n/
114 | 
115 | LANGUAGE_CODE = "en-us"
116 | 
117 | TIME_ZONE = "UTC"
118 | 
119 | USE_I18N = True
120 | 
121 | USE_TZ = True
122 | 
123 | # Static files (CSS, JavaScript, Images)
124 | # https://docs.djangoproject.com/en/4.1/howto/static-files/
125 | 
126 | STATIC_URL = "static/"
127 | 
128 | STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
129 | 
130 | STATICFILES_DIRS = [
131 |   # Tell Django where to look for React's static files (css, js)
132 |   os.path.join(BASE_DIR, "client", "dist")
133 | ]
134 | STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
135 | 
136 | 
137 | # Default primary key field type
138 | # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
139 | 
140 | DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
141 | 
142 | CORS_ORIGIN_WHITELIST = ['http://localhost:5173']
143 | 
144 | REST_FRAMEWORK = {
145 |     'DEFAULT_SCHEMA_CLASS': 'rest_framework.schemas.coreapi.AutoSchema'
146 | }
147 |

--------------------------------------------------------------------------------
/django_crud_api/urls.py:
--------------------------------------------------------------------------------
 1 | """django_crud_api URL Configuration
 2 | 
 3 | The `urlpatterns` list routes URLs to views. For more information please see:
 4 |     https://docs.djangoproject.com/en/4.1/topics/http/urls/
 5 | Examples:
 6 | Function views
 7 |     1. Add an import:  from my_app import views
 8 |     2. Add a URL to urlpatterns:  path('', views.home, name='home')
 9 | Class-based views
10 |     1. Add an import:  from other_app.views import Home
11 |     2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
12 | Including another URLconf
13 |     1. Import the include() function: from django.urls import include, path
14 |     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
15 | """
16 | from django.contrib import admin
17 | from django.urls import path, include
18 | from django.conf.urls.static import static
19 | from django.views.generic import TemplateView
20 | from django.conf import settings
21 | 
22 | urlpatterns = [
23 |     path("admin/", admin.site.urls),
24 |     path('tasks/', include('tasks.urls')),
25 |     path('', TemplateView.as_view(template_name='index.html'), name='index'),
26 | ]
27 | 
28 | urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
29 |

--------------------------------------------------------------------------------
/django_crud_api/wsgi.py:
--------------------------------------------------------------------------------
 1 | """
 2 | WSGI config for django_crud_api project.
 3 | 
 4 | It exposes the WSGI callable as a module-level variable named ``application``.
 5 | 
 6 | For more information on this file, see
 7 | https://docs.djangoproject.com/en/4.1/howto/deployment/wsgi/
 8 | """
 9 | 
10 | import os
11 | 
12 | from django.core.wsgi import get_wsgi_application
13 | 
14 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "django_crud_api.settings")
15 | 
16 | application = get_wsgi_application()
17 |

--------------------------------------------------------------------------------
/nixpacks.toml:
--------------------------------------------------------------------------------
1 | providers = ["node", "python"]
2 | 
3 | [variables]
4 | NODE_ENV = 'production'

--------------------------------------------------------------------------------
/runtime.txt:
--------------------------------------------------------------------------------
1 | 3.9.13

--------------------------------------------------------------------------------
/tasks/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fazt/django-react-crud/057b14356231c526b7858203e93272122cfb4b6c/tasks/__init__.py

--------------------------------------------------------------------------------
/tasks/admin.py:
--------------------------------------------------------------------------------
1 | from django.contrib import admin
2 | 
3 | # Register your models here.
4 |

--------------------------------------------------------------------------------
/tasks/apps.py:
--------------------------------------------------------------------------------
1 | from django.apps import AppConfig
2 | 
3 | 
4 | class TasksConfig(AppConfig):
5 |     default_auto_field = "django.db.models.BigAutoField"
6 |     name = "tasks"
7 |

--------------------------------------------------------------------------------
/tasks/migrations/0001_initial.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 4.1.7 on 2023-03-11 15:55
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     initial = True
 9 | 
10 |     dependencies = []
11 | 
12 |     operations = [
13 |         migrations.CreateModel(
14 |             name="Task",
15 |             fields=[
16 |                 (
17 |                     "id",
18 |                     models.BigAutoField(
19 |                         auto_created=True,
20 |                         primary_key=True,
21 |                         serialize=False,
22 |                         verbose_name="ID",
23 |                     ),
24 |                 ),
25 |                 ("title", models.CharField(max_length=200)),
26 |                 ("description", models.TextField(blank=True)),
27 |                 ("done", models.BooleanField(default=False)),
28 |             ],
29 |         ),
30 |     ]
31 |

--------------------------------------------------------------------------------
/tasks/migrations/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fazt/django-react-crud/057b14356231c526b7858203e93272122cfb4b6c/tasks/migrations/__init__.py

--------------------------------------------------------------------------------
/tasks/serializer.py:
--------------------------------------------------------------------------------
1 | from rest_framework import serializers
2 | from .models import Task
3 | 
4 | class TaskSerializer(serializers.ModelSerializer):
5 |     class Meta:
6 |         model = Task
7 |         # fields = ('id', 'title', 'description', 'done')
8 |         fields = '__all__'

--------------------------------------------------------------------------------
/tasks/tests.py:
--------------------------------------------------------------------------------
1 | from django.test import TestCase
2 | 
3 | # Create your tests here.
4 |

--------------------------------------------------------------------------------
/tasks/urls.py:
--------------------------------------------------------------------------------
 1 | from django.urls import include, path
 2 | from rest_framework import routers
 3 | from rest_framework.documentation import include_docs_urls
 4 | from tasks import views
 5 | 
 6 | router = routers.DefaultRouter()
 7 | router.register(r"tasks", views.TaskView, "tasks")
 8 | 
 9 | urlpatterns = [
10 |     path("api/v1/", include(router.urls)),
11 |     path('docs/', include_docs_urls(title='Tasks API')),
12 | ]

--------------------------------------------------------------------------------
/tasks/views.py:
--------------------------------------------------------------------------------
1 | from rest_framework import viewsets
2 | from .serializer import TaskSerializer
3 | from .models import Task
4 | 
5 | # Create your views here.
6 | class TaskView(viewsets.ModelViewSet):
7 |     serializer_class = TaskSerializer
8 |     queryset = Task.objects.all()

--------------------------------------------------------------------------------

Tasks App

14 | {task.title} 15 |