Merge pull request #200 from realpython/django-vue-graphql

Add source code for Building a Blog With Django, Vue, and GraphQL

Author: jaschmitt

django-vue-graphql/README.md

@@ -0,0 +1,55 @@
+# Build a Blog Using Django, Vue, and GraphQL
+
+## Starting the back-end Django application
+
+In a new terminal tab:
+
+1. Install the back-end requirements in the environment of your choice:
+  ```shell
+  $ cd /path/to/repo/tutorial-drafts/articles/django-vue-graphql/source_code/backend/
+  $ python3 -m pip install -r requirements.txt
+  ```
+1. Create the initial Django database by running migrations:
+  ```shell
+  $ python manage.py migrate
+  ```
+1. Create a Django superuser:
+  ```shell
+  $ python manage.py createsuperuser
+  ```
+1. Run the Django project (by default on port 8000):
+  ```shell
+  $ python manage.py runserver
+  ```
+
+## Starting the front-end Vue application
+
+In a new terminal tab:
+
+1. Install the front-end requirements:
+  ```shell
+  $ cd /path/to/repo/tutorial-drafts/articles/django-vue-graphql/source_code/frontend/
+  $ npm install
+  ```
+1. Run the Vue project (by default on port 8080):
+  ```shell
+  $ npm run serve
+  ```
+
+## Add a few posts
+
+1. Visit [the Django admin](https://localhost:8000/admin)
+1. Log in using the superuser you created earlier
+1. Write a few posts, adding authors and tags as desired
+1. Make sure at least one post is `published` (or no posts will appear)
+
+## View the blog
+
+1. Visit [the blog homepage](https://localhost:8080)
+1. Browse the posts, tags, and authors
+
+## Try the GraphQL API yourself
+
+1. Visit [the GraphiQL interface](https://localhost:8000/graphql)
+1. View the *Docs* panel on the top right
+1. Create some queries—the available information should auto-populate!

django-vue-graphql/backend/.gitignore

@@ -0,0 +1,6 @@
+# Python
+.python-version
+*.pyc
+
+# SQLite
+db.sqlite3

django-vue-graphql/backend/backend/__init__.py

@@ -0,0 +1,7 @@
+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/backend/backend/asgi.py

@@ -0,0 +1,94 @@
+from pathlib import Path
+
+
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+SECRET_KEY = "gmkd4-*ew4fv!w8p!9qm(o2-qpmc$&jng-2jm!4l3$x^pn#tmu"
+
+DEBUG = True
+
+ALLOWED_HOSTS = ["*"]
+
+INSTALLED_APPS = [
+    "django.contrib.admin",
+    "django.contrib.auth",
+    "django.contrib.contenttypes",
+    "django.contrib.sessions",
+    "django.contrib.messages",
+    "django.contrib.staticfiles",
+    "graphene_django",
+    "corsheaders",
+    "blog",
+]
+
+MIDDLEWARE = [
+    "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",
+    "corsheaders.middleware.CorsMiddleware",
+]
+
+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"
+
+DATABASES = {
+    "default": {
+        "ENGINE": "django.db.backends.sqlite3",
+        "NAME": BASE_DIR / "db.sqlite3",
+    }
+}
+
+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",
+    },
+]
+
+LANGUAGE_CODE = "en-us"
+
+TIME_ZONE = "UTC"
+
+USE_I18N = True
+
+USE_L10N = True
+
+USE_TZ = True
+
+STATIC_URL = "/static/"
+
+GRAPHENE = {
+    "SCHEMA": "blog.schema.schema",
+}
+
+CORS_ORIGIN_ALLOW_ALL = False
+CORS_ORIGIN_WHITELIST = ("http://localhost:8080",)

django-vue-graphql/backend/backend/settings.py

@@ -0,0 +1,10 @@
+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/backend/backend/urls.py

@@ -0,0 +1,7 @@
+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/backend/backend/wsgi.py

@@ -0,0 +1,52 @@
+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/backend/blog/__init__.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class BlogConfig(AppConfig):
+    name = "blog"