DEV Community: Jordan Engstrom

Hooking up Django and Vue.js

Jordan Engstrom — Thu, 23 Apr 2020 03:24:40 +0000

This article is for individuals who have had intermediate practice with the Vue.js and Django separately, but need direction on how to make these two frameworks work together. I will outline an example of how to set up some boilerplate code with a straightforward project structure using Django and Vue.js. Please note I am developing on macOS Catalina, so the shell commands will vary for your operating system. The finished product can be found on my github: https://github.com/jordanengstrom/blank_django_vue_project

At a high level we will be aiming for a project structure that looks something like this:

my_project/
|
|____ core/
|    |____ __init__.py
|    |____ views.py           # class based TemplateView for index.html
|    
|
|____ frontend/               # root frontend
|    |____ src/               # vue components, router, store, etc.
|    |____ node_modules/
|    |____ vue.config.js      # important file number 1
|    |____ webpack-stats.json # important file number 2
|
|
|____ my_project/             # root backend
|    |____ __init__.py
|    |____ settings.py
|    |____ urls.py
|    |____ views.py
|
|
|____ templates/                
|    |____ index.html         # django template that houses vue
|
|____ .gitignore
|____ venv/
|____ requirements.txt
|____ manage.py
|____ db.sqlite3

We'll start with the backend. Create an empty directory for your project, and then run:

$ django-admin startproject my_project && cd my_project
$ mkdir venv && python3 -m venv venv && source venv/bin/activate
$ (venv) pip install django djangorestframework
$ (venv) mkdir templates && cd templates && touch index.html
$ (venv) cd ..
$ (venv) mkdir core && touch __init__.py && touch views.py

This is all we need to do with Django for now. We'll come back to the templates/index.html and core/views.py files later. This next command assumes you've already installed vue globally. If you haven't, simply run: npm install -g vue-cli

$ vue create frontend

Then walk through the setup wizard so your presets look something like this (or customize your presets as you prefer):

$ Vue CLI v4.3.1
  ? Please pick a preset: Manually select features
  ? Check the features needed for your project: Babel, Router, Vuex
  ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
  ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
  ? Save this as a preset for future projects? (y/N) N

  ### installation magic happens...

🎉  Successfully created project frontend.
👉  Get started with the following commands:
$ cd frontend
$ npm run serve

Now we have separate frontend and backend environments! The frontend server will be at http://localhost:8080/ which will display the Vue landing page, and the backend will be at http://127.0.0.1:8000/ which will display the Django landing page. You can kick off the frontend per above commands and kick off the backend in the root directory with:

python manage.py runserver

Now, these environments just need to be able to talk to each other. The two tools we will use to accomplish this are webpack-bundle-tracker on the Vue side and Django webpack loader on the backend.

$ cd frontend
$ npm install webpack-bundle-tracker@0.4.3

We need version 0.4.3 of webpack-bundle-tracker because the files Django is expecting will not be automatically generated in the same way if we use the latest alpha version. Please note, 0.4.3 is the latest stable release as of April 2020. If we don't specify this version, npm will pull down the latest alpha version which will not work the same. Next we need to create the vue.config.js file in the frontend directory:

$ touch vue.config.js

and fill it with these contents:

const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
  // on Windows you might want to set publicPath: "http://127.0.0.1:8080/"
  publicPath: "http://0.0.0.0:8080/",
  outputDir: "./dist/",

  chainWebpack: (config) => {
    config
      .plugin("BundleTracker")
      .use(BundleTracker, [{ filename: "./webpack-stats.json" }]);

    config.output.filename("bundle.js");

    config.optimization.splitChunks(false);

    config.resolve.alias.set("__STATIC__", "static");

    config.devServer
      // the first 3 lines of the following code have been added to the configuration
      .public("http://127.0.0.1:8080")
      .host("127.0.0.1")
      .port(8080)
      .hotOnly(true)
      .watchOptions({ poll: 1000 })
      .https(false)
      .disableHostCheck(true)
      .headers({ "Access-Control-Allow-Origin": ["*"] });
  }

  // uncomment before executing 'npm run build'
  // css: {
  //     extract: {
  //       filename: 'bundle.css',
  //       chunkFilename: 'bundle.css',
  //     },
  // }
};

Comment out the base url settings that comes with Vue's router. If you skip this, you'll just end up having a path like this: http://127.0.0.1:8000/http:/0.0.0.0:8080/blah-blah-blah
to which I say - ew wtf?
Fix it by removing the base url config:

const router = new VueRouter({
  mode: "history",
  // base: process.env.BASE_URL,
  routes
});

Once you create this file, spin up the frontend development server, and a webpack-stats.json file will be generated

npm run serve

Now navigate to the root directory and ensure your virtual environment is activated so we can install django-webpack-loader. Also, feel free to generate your requirements file:

$ (venv) pip install django-webpack-loader
$ pip freeze > requirements.txt

Then, add webpack_loader to Django's installed apps in settings.py, and add the following changes to the settings.py file:

INSTALLED_APPS = [
         ...
    'rest_framework',
    'webpack_loader',
]

    .
    .
    .
TEMPLATES = [
    {               ...

        'DIRS': [os.path.join(BASE_DIR, 'templates')],
                    ...
    },
]
    .
    .
    .

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "assets"),
    os.path.join(BASE_DIR, "frontend/dist"),
]

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'dist/',
        'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json')
    }
}

Paste this into your templates/index.html file:

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- This part is in the screenshot at the bottom! -->
    <h1>Vue JS</h1>
    <div id="app"></div>
    {% render_bundle 'app' %}
  </body>
</html>

Paste this into your core/views.py file:

from django.conf import settings
from django.views.generic.base import TemplateView


class IndexTemplateView(TemplateView):
    def get_template_names(self):
        template_name = "index.html"
        return template_name

Make sure these are reflected in your my_project/urls.py file:

from django.urls import re_path
from core.views import IndexTemplateView

urlpatterns = [
    ...
    re_path(r"^.*$", IndexTemplateView.as_view(), name="entry-point"),
]

Once these changes are made, spin up your npm server in one terminal tab, and then spin up your Django dev server in another terminal tab and you should be good to go! Happy coding 😎

$ npm run serve

$ (venv) python manage.py runserver

Code Review Git Workflow

Jordan Engstrom — Fri, 24 Jan 2020 04:26:33 +0000

I recently became the git guru at my job because there has been a huge push to automate anything and everything. The automation work done in my department requires python scripts to run at a consistent time every day. We centralize our automation efforts using Jenkins. Jenkins is an open source automation server, for continuous delivery/continuous integration. Jenkins can be used to automatically trigger builds for projects when new code is pushed to our Bitbucket repos, or on a schedule, thereby contributing to the continuous integration cycle. Disclaimer: There are many other ways to use Jenkins, but that is outside the scope of this article. This workflow is specific to me, my team, Bitbucket code review, and a python project structure. It will discuss branching, tagging, merging, and deleting. However, the commands are generic enough so I figured this article could help train new team members, and anyone else who is interested in a similar workflow. On to the content!

git workflow and Jenkins project structure

Let's avoid merge conflicts! 😜

Make a new folder locally where you will do your code review from. Leave it empty for now.

Make a new repo on Bitbucket, and run the command from the "My code is ready to be pushed" section in your new directory from (1):

$ cd existing-project
$ git init
$ git add --all
$ git commit -m "initial commit"
$ git remote add origin https://your.domain.com/your_project.git
$ git push -u origin master

Commit and push the following minimal files to master:
.gitignore, __init__.py
DO NOT commit your main python script. If you commit your entire python script at this stage, the reviewers will not be able to comment on anything. They will only be able to comment within + or - 10 lines of a given change. If you pushed too many files to master at this stage, it would be quickest to just delete the repo and start over.

The next step is to make a new branch. We need a new branch to fully review a pull request. Once your master branch is made, there are two ways I would go about making another branch from master:

Remotely first (on Bitbucket via the browser), then locally. If you do this, make a new branch on Bitbucket in the browser, and then enter these commands.

$ git fetch
$ git checkout <new_branch_name>

Locally first (via gitbash, cmd, iTerm etc.), then remotely. If you do this, you don't have to do anything in the browser.

$ git checkout -b <new_branch_name>
$ git push -u origin <new_branch_name>

Take your pick. If you want to confirm which branch you are on, simply run:

$ git branch

Once this new branch is obtained locally, create a python 3.x virtual environment (venv) - whichever python version your Jenkins is setup to run, and update the .gitignore and requirements.txt and/or setup.py, etc. as needed. We really only need requirements.txt technically. Add Jenkinsfile, .gitignore, __init__.py, etc. It only matters if the venv is activated for this part.

Windows commands:

$ venv\Scripts\activate
$ (venv) pip install package1 pagacke2 package3
$ (venv) pip freeze > requirements.txt

Linux & macOS commands:

$ source venv/bin/activate
$ (venv) pip install package1 package2 package3
$ (venv) pip freeze > requirements.txt

Do your project editing here. Commit and push to your branch:

$ git add . 
$ git commit -m "feat: blah blah blah"
$ git push -u origin <new_branch_name>

If your pull request is marked as "needs work" during the code review, just keep editing here and repeating the above commands.
You want your project to look like this in the end:

Client_Project/
        |____ .git/
        |____ venv/
        |____ __init__.p
        |____ README.md
        |____ Jenkinsfile
        |____ .gitignore
        |____ requirements.txt
        |____ script_name.py

Handle merge conflicts before opening your PR. The below commands will pull the latest changes from remote master, and merge into your feature branch locally. I have set VSCode as my git merge.tool, core.editor, diff.tool, etc. so I don't have to deal with memorizing Vim commands. I highly recommend doing this to keep things simple.

$ git checkout master   
$ git pull
  (...updates get pulled down...) ---+++++
$ git checkout <new_branch_name>
$ git merge master
  (resolve merge conflicts in VSCode, 
   enter merge commit message, push/sync)

Merge conflicts have been resolved, and your remote feature branch contains the updates. Now you can be certain that once you create a pull request, there will be no merge conflicts. Open a pull request, and add reviewers.

Once review is complete, click "Merge" on Bitbucket

Tag your feature branch on master (annotated method preferred as there is more detail for team projects). Instructions are here: https://git-scm.com/book/en/v2/Git-Basics-Tagging. PRO-TIP: DON'T CREATE A TAG WITH THE SAME NAME AS THE FEATURE BRANCH NAME.

$ git tag -a <tag_name> -m "tag message"
$ git push origin <tag name>

Think of this step as making a respawn point in a video game. You're naming a specific commit something special so you can git checkout the tag name if you need to later.

Once tagged, delete the old branch if everything is working as expected, and you have had several successful Jenkins builds. You can't delete a branch that you're on, so switch back to master:

$ git checkout master
$ git branch

Delete locally first:

$ git branch -D <new_branch_name>

Delete remotely next:

$ git push origin --delete <new_branch_name>

That's all folks! That's the tweet! 😁 I hope this was helpful for you because it was definitely a learning process for me. If you have any feedback, I'm always open to improving. Anyway, happy coding!