Skip to content

A minimal boilerplate which utilizes Django backend and Vue frontend

Notifications You must be signed in to change notification settings

madhvi-n/django-vue-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Django Vue Boilerplate

The Django-Vue Boilerplate is a starting point for building web applications that combine the Django backend framework with a Vue frontend where Vue app is being served by Django

This project was generated using vite

Requirements

  • Python 3.7+
  • Node.js (version 12 or higher)
  • npm (Node Package Manager) or Yarn

Installation

Backend

  • Clone the repository and navigate to the project directory

    git clone https://github.com/madhvi-n/django-vue-boilerplate.git
    cd django-vue-boilerplate
    
  • Create an environment and activate it

    virtualenv venv --python=python3
    source venv/bin/activate
    
  • Install Python dependencies

    pip install -r requirements.txt
    
  • Run database migrations and start the development server

    python manage.py migrate
    python manage.py runserver
    

Frontend

  • Navigate to the static/frontend directory:

    cd static/frontend/vue-app
    
  • Install frontend dependencies

    npm install
    

    or

    yarn install
    
  • Build the vue app

    npm run build
    

    or

    yarn build
    
  • Open your browser and visit http://localhost:8000 to see the application.

Project Structure

  • The Django backend code is located in the root directory.
  • The Vue frontend code is located in the static/frontend directory.

Configuration

  • Django settings can be found in the django_vue/settings.py file.
  • Vue configuration can be found in the static/frontend/vue-app/package.json file.