Add Django + Vue Update (#508)

* Add old files

* Add new materials

* Add black formatting

* Remove unused tests

* Change port number

* Rename folders

* Update code formatting using "prettier"

* Move "blog" app to the bottom of `INSTALLED_APPS

* Fix final step folder name

* Update Readme

* Reformat settings files

---------

Co-authored-by: Martin Breuss <[email protected]>
Co-authored-by: Geir Arne Hjelle <[email protected]>

Author: 3 people

django-vue-graphql-update/README.md

@@ -0,0 +1,69 @@
+# Build a Blog Using Django, Vue, and GraphQL
+
+This repository contains code related to the tutorial on [building a blog using Django, Vue, and GraphQL](https://realpython.com/python-django-blog/).
+
+Navigate to the corresponding folder in this repository to compare your code with the code from the tutorial:
+
+- [Step 1](source_code_step_1/)
+- [Step 2](source_code_step_2/)
+- [Step 3](source_code_step_3/)
+- [Step 4](source_code_step_4/)
+- [Step 5](source_code_step_5/)
+- [Step 6](source_code_step_6/)
+- [Step 7](source_code_step_7/)
+- [Step 8](source_code_step_8/)
+- [Step 9](source_code_final/)
+
+If you want to install the project on your machine without following the tutorial, then you need to follow the steps outlined below.
+
+## Setup
+
+Navigate into the `source_code_final/` folder. In this folder, you'll find the folders `back_end/` and `front_end/`, which represent both projects of the tutorial.
+
+### Back End
+
+Create a new terminal window, navigate into `back_end/`, create, activate a [virtual environment](https://realpython.com/python-virtual-environments-a-primer/), and install the necessary dependencies:
+
+```sh
+$ python -m venv venv
+$ source venv/bin/activate
+(venv) $ python -m pip install -r requirements.txt
+```
+
+Then, create the initial Django database by running migrations:
+
+```sh
+$ python manage.py migrate
+```
+
+Create a Django superuser:
+
+```shell
+$ python manage.py createsuperuser
+```
+
+Run the Django project:
+
+```sh
+$ python manage.py runserver
+```
+
+Before continuing, it's a good idea to create some users, profiles, and blog posts in the Django admin interface at `http://localhost:8000/admin`. You must use your superuser credentials to log in.
+
+You can visit the GraphiQL platform `http://localhost:8000/graphql` to try out GraphQL queries.
+
+### Front End
+
+Open a new terminal and navigate into `front_end/`. Then, install the front-end requirements:
+
+```sh
+$ npm install --include dev
+```
+
+Run the Vite development server:
+
+```sh
+$ npm run dev
+```
+
+You must have the Django development server and the Vite server running at the same time.

django-vue-graphql-update/source_code_final/back_end/backend/__init__.py

@@ -0,0 +1,16 @@
+"""
+ASGI config for backend project.
+
+It exposes the ASGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.0/howto/deployment/asgi/
+"""
+
+import os
+
+from django.core.asgi import get_asgi_application
+
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "backend.settings")
+
+application = get_asgi_application()

django-vue-graphql-update/source_code_final/back_end/backend/asgi.py

@@ -0,0 +1,135 @@
+"""
+Django settings for backend project.
+
+Generated by 'django-admin startproject' using Django 5.0.2.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.0/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/5.0/ref/settings/
+"""
+
+from pathlib import Path
+
+# Build paths inside the project like this: BASE_DIR / 'subdir'.
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/5.0/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = (
+    "django-insecure-nv&xe8r)*pw1b0n^n#hax!2i%k-!*ek(0h)2td))j-(5eomvda"
+)
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True
+
+ALLOWED_HOSTS = []
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    "blog.apps.BlogConfig",
+    "django.contrib.admin",
+    "django.contrib.auth",
+    "django.contrib.contenttypes",
+    "django.contrib.sessions",
+    "django.contrib.messages",
+    "django.contrib.staticfiles",
+    "graphene_django",
+    "corsheaders",
+]
+
+MIDDLEWARE = [
+    "corsheaders.middleware.CorsMiddleware",
+    "django.middleware.security.SecurityMiddleware",
+    "django.contrib.sessions.middleware.SessionMiddleware",
+    "django.middleware.common.CommonMiddleware",
+    "django.middleware.csrf.CsrfViewMiddleware",
+    "django.contrib.auth.middleware.AuthenticationMiddleware",
+    "django.contrib.messages.middleware.MessageMiddleware",
+    "django.middleware.clickjacking.XFrameOptionsMiddleware",
+]
+
+ROOT_URLCONF = "backend.urls"
+
+TEMPLATES = [
+    {
+        "BACKEND": "django.template.backends.django.DjangoTemplates",
+        "DIRS": [],
+        "APP_DIRS": True,
+        "OPTIONS": {
+            "context_processors": [
+                "django.template.context_processors.debug",
+                "django.template.context_processors.request",
+                "django.contrib.auth.context_processors.auth",
+                "django.contrib.messages.context_processors.messages",
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = "backend.wsgi.application"
+
+
+# Database
+# https://docs.djangoproject.com/en/5.0/ref/settings/#databases
+
+DATABASES = {
+    "default": {
+        "ENGINE": "django.db.backends.sqlite3",
+        "NAME": BASE_DIR / "db.sqlite3",
+    }
+}
+
+
+# Password validation
+# https://docs.djangoproject.com/en/5.0/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
+    },
+    {
+        "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
+    },
+    {
+        "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",
+    },
+    {
+        "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",
+    },
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/5.0/topics/i18n/
+
+LANGUAGE_CODE = "en-us"
+
+TIME_ZONE = "UTC"
+
+USE_I18N = True
+
+USE_TZ = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/5.0/howto/static-files/
+
+STATIC_URL = "static/"
+
+# Default primary key field type
+# https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field
+
+DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
+
+GRAPHENE = {
+    "SCHEMA": "blog.schema.schema",
+}
+
+CORS_ALLOWED_ORIGINS = ("http://localhost:5173",)

django-vue-graphql-update/source_code_final/back_end/backend/settings.py

@@ -0,0 +1,9 @@
+from django.contrib import admin
+from django.urls import path
+from django.views.decorators.csrf import csrf_exempt
+from graphene_django.views import GraphQLView
+
+urlpatterns = [
+    path("admin/", admin.site.urls),
+    path("graphql", csrf_exempt(GraphQLView.as_view(graphiql=True))),
+]

django-vue-graphql-update/source_code_final/back_end/backend/urls.py

@@ -0,0 +1,16 @@
+"""
+WSGI config for backend project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/5.0/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "backend.settings")
+
+application = get_wsgi_application()

django-vue-graphql-update/source_code_final/back_end/backend/wsgi.py

@@ -0,0 +1,51 @@
+from django.contrib import admin
+from blog.models import Profile, Post, Tag
+
+
+@admin.register(Profile)
+class ProfileAdmin(admin.ModelAdmin):
+    model = Profile
+
+
+@admin.register(Tag)
+class TagAdmin(admin.ModelAdmin):
+    model = Tag
+
+
+@admin.register(Post)
+class PostAdmin(admin.ModelAdmin):
+    model = Post
+
+    list_display = (
+        "id",
+        "title",
+        "subtitle",
+        "slug",
+        "publish_date",
+        "published",
+    )
+    list_filter = (
+        "published",
+        "publish_date",
+    )
+    list_editable = (
+        "title",
+        "subtitle",
+        "slug",
+        "publish_date",
+        "published",
+    )
+    search_fields = (
+        "title",
+        "subtitle",
+        "slug",
+        "body",
+    )
+    prepopulated_fields = {
+        "slug": (
+            "title",
+            "subtitle",
+        )
+    }
+    date_hierarchy = "publish_date"
+    save_on_top = True

django-vue-graphql-update/source_code_final/back_end/blog/__init__.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class BlogConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "blog"

django-vue-graphql-update/source_code_final/back_end/blog/admin.py

@@ -0,0 +1,87 @@
+# Generated by Django 5.0.2 on 2024-02-28 15:52
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    initial = True
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="Tag",
+            fields=[
+                (
+                    "id",
+                    models.BigAutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                ("name", models.CharField(max_length=50, unique=True)),
+            ],
+        ),
+        migrations.CreateModel(
+            name="Profile",
+            fields=[
+                (
+                    "id",
+                    models.BigAutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                ("website", models.URLField(blank=True)),
+                ("bio", models.CharField(blank=True, max_length=240)),
+                (
+                    "user",
+                    models.OneToOneField(
+                        on_delete=django.db.models.deletion.PROTECT,
+                        to=settings.AUTH_USER_MODEL,
+                    ),
+                ),
+            ],
+        ),
+        migrations.CreateModel(
+            name="Post",
+            fields=[
+                (
+                    "id",
+                    models.BigAutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                ("title", models.CharField(max_length=255, unique=True)),
+                ("subtitle", models.CharField(blank=True, max_length=255)),
+                ("slug", models.SlugField(max_length=255, unique=True)),
+                ("body", models.TextField()),
+                ("meta_description", models.CharField(blank=True, max_length=150)),
+                ("date_created", models.DateTimeField(auto_now_add=True)),
+                ("date_modified", models.DateTimeField(auto_now=True)),
+                ("publish_date", models.DateTimeField(blank=True, null=True)),
+                ("published", models.BooleanField(default=False)),
+                (
+                    "author",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.PROTECT, to="blog.profile"
+                    ),
+                ),
+                ("tags", models.ManyToManyField(blank=True, to="blog.tag")),
+            ],
+            options={
+                "ordering": ["-publish_date"],
+            },
+        ),
+    ]