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:

$ 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:

$ python manage.py migrate

1. Create a Django superuser:

$ python manage.py createsuperuser

1. Run the Django project (by default on port 8000):

$ python manage.py runserver

Starting the front-end Vue application

In a new terminal tab:

1. Install the front-end requirements:

$ 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):

$ npm run serve

Add a few posts

1. Visit the Django admin
2. Log in using the superuser you created earlier
3. Write a few posts, adding authors and tags as desired
4. Make sure at least one post is published (or no posts will appear)

View the blog

1. Visit the blog homepage
2. Browse the posts, tags, and authors

Try the GraphQL API yourself

1. Visit the GraphiQL interface
2. View the Docs panel on the top right
3. Create some queries—the available information should auto-populate!