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.

Navigate to the corresponding folder in this repository to compare your code with the code from the tutorial:

• Step 1
• Step 2
• Step 3
• Step 4
• Step 5
• Step 6
• Step 7
• Step 8
• Step 9

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, and install the necessary dependencies:

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

$ python manage.py migrate

Create a Django superuser:

$ python manage.py createsuperuser

Run the Django project:

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

$ npm install --include dev

Run the Vite development server:

$ npm run dev

You must have the Django development server and the Vite server running at the same time.