|
| 1 | +# Build a Blog Using Django, Vue, and GraphQL |
| 2 | + |
| 3 | +## Starting the backend Django application |
| 4 | + |
| 5 | +In a new terminal tab: |
| 6 | + |
| 7 | +1. Install the backend requirements in the environment of your choice: |
| 8 | + ```shell |
| 9 | + $ cd /path/to/repo/tutorial-drafts/articles/django-vue-graphql/source_code/backend/ |
| 10 | + $ python3 -m pip install -r requirements.txt |
| 11 | + ``` |
| 12 | +1. Create the initial Django database by running migrations: |
| 13 | + ```shell |
| 14 | + $ python manage.py migrate |
| 15 | + ``` |
| 16 | +1. Create a Django superuser: |
| 17 | + ```shell |
| 18 | + $ python manage.py createsuperuser |
| 19 | + ``` |
| 20 | +1. Run the Django project (by default on port 8000): |
| 21 | + ```shell |
| 22 | + $ python manage.py runserver |
| 23 | + ``` |
| 24 | + |
| 25 | +## Starting the frontend Vue application |
| 26 | + |
| 27 | +In a new terminal tab: |
| 28 | + |
| 29 | +1. Install the frontend requirements: |
| 30 | + ```shell |
| 31 | + $ cd /path/to/repo/tutorial-drafts/articles/django-vue-graphql/source_code/frontend/ |
| 32 | + $ npm install |
| 33 | + ``` |
| 34 | +1. Run the Vue project (by default on port 8080): |
| 35 | + ```shell |
| 36 | + $ npm run serve |
| 37 | + ``` |
| 38 | + |
| 39 | +## Add a few posts |
| 40 | + |
| 41 | +1. Visit [the Django admin](https://localhost:8000/admin) |
| 42 | +1. Log in using the superuser you created earlier |
| 43 | +1. Write a few posts, adding authors and tags as desired |
| 44 | +1. Make sure at least one post is `published` (or no posts will appear) |
| 45 | + |
| 46 | +## View the blog |
| 47 | + |
| 48 | +1. Visit [the blog homepage](https://localhost:8080) |
| 49 | +1. Browse the posts, tags, and authors |
| 50 | + |
| 51 | +## Try the GraphQL API yourself |
| 52 | + |
| 53 | +1. Visit [the GraphiQL interface](https://localhost:8000/graphql) |
| 54 | +1. View the **Docs** panel on the top right |
| 55 | +1. Create some queries—the available information should auto-populate! |
0 commit comments