paltman/App.vue

## api.js
import axios from 'axios';

const { RELEASE_VERSION } = window.AppConfig;

const versionHeaders = (config) => {
  config.headers['X-App-Version'] = SOURCE_VERSION;
  return config;
};

const HTTP = axios.create({
  xsrfHeaderName: 'X-CSRFToken',
  xsrfCookieName: 'csrftoken',
});

HTTP.interceptors.request.use(versionHeaders, error => Promise.reject(error));

export default {
  getBookmarks: (cb) => HTTP.get('bookmarks/').then(response => cb(response.data)),
};

## api.py
import os

from django.http import JsonResponse
from django.views import View

from .models import Bookmark


class JsonResponseAuthError(JsonResponse):
    status_code = 401


class JsonResponseInvalidVersionError(JsonResponse):
    status_code = 418


class APIView(View):

  def validate_version(self, request):
      version = request.META.get("HTTP_X_APP_VERSION", "")
      if version == "":
          return True
      return os.environ.get("HEROKU_SLUG_COMMIT", "") == version:

  @property
  def user(self):
      return self.request.user

  def dispatch(self, request, *args, **kwargs):
      if self.validate_version(request) is False:
          return JsonResponseInvalidVersionError(data={"error": "New version available."})
      if not request.user.is_authenticated:
          return JsonResponseAuthError(data={"error": "Authentication required"})
      return super().dispatch(request, *args, **kwargs)


class Bookmarks(APIView):

  def get(self, request, *args, **kwargs):
      data = [b.data() for b in Bookmark.objects.all()]
      return JSONResponse(data=dict(bookmarks=data))

## App.vue
<template>
  <div class="version-update" v-if="versionUpdate">
    <p>There is a new version!</p>
    <button @click="getNewVersion">Get Update</button>
  </div>
  <div class="bookmark-list" v-else>
    <button @click="refresh">Refresh</button>
    <div v-for="(bookmark, index) in bookmarks" :key="index">
      <a :href="bookmark.url">{{ bookmark.title }}</a>
    </div>
  </div>
</template>

<script>
import api from './api';
export {
  data() {
    return {
      bookmarks: [],
      versionUpdate: false,
    }
  },
  methods: {
    getNewVersion() {
      window.location.reload(true);
    },
    refresh() {
      api.getBookmarks(data => {
        this.bookmarks = data.bookmarks;
      }).catch(error => {
        if (error.response && error.response.status === 418) {
          this.versionUpdate = true;
        } else {
          throw error;
        }
      });
    }
  },
  created() {
    this.refresh();
  }
}
</script>

## base.html
<html>
  <head>
    <!-- Put this in the head of your base template -->
    <script>
      window.AppConfig = {
        SOURCE_VERSION: '{{ SOURCE_VERSION }}',
      }
    </script>
  </head>
  <body>...</body>
</html>

## context_processors.py
# If you are deployed on Heroku you can get the unique version
# of what's deployed from the environment
#
# https://devcenter.heroku.com/articles/dyno-metadata
def settings(request):
  return dict(
    SOURCE_VERSION=os.environ.get("HEROKU_SLUG_COMMIT", "")
  )
	import axios from 'axios';

	const { RELEASE_VERSION } = window.AppConfig;

	const versionHeaders = (config) => {
	config.headers['X-App-Version'] = SOURCE_VERSION;
	return config;
	};

	const HTTP = axios.create({
	xsrfHeaderName: 'X-CSRFToken',
	xsrfCookieName: 'csrftoken',
	});

	HTTP.interceptors.request.use(versionHeaders, error => Promise.reject(error));

	export default {
	getBookmarks: (cb) => HTTP.get('bookmarks/').then(response => cb(response.data)),
	};
	import os

	from django.http import JsonResponse
	from django.views import View

	from .models import Bookmark


	class JsonResponseAuthError(JsonResponse):
	status_code = 401


	class JsonResponseInvalidVersionError(JsonResponse):
	status_code = 418


	class APIView(View):

	def validate_version(self, request):
	version = request.META.get("HTTP_X_APP_VERSION", "")
	if version == "":
	return True
	return os.environ.get("HEROKU_SLUG_COMMIT", "") == version:

	@property
	def user(self):
	return self.request.user

	def dispatch(self, request, args, *kwargs):
	if self.validate_version(request) is False:
	return JsonResponseInvalidVersionError(data={"error": "New version available."})
	if not request.user.is_authenticated:
	return JsonResponseAuthError(data={"error": "Authentication required"})
	return super().dispatch(request, args, *kwargs)


	class Bookmarks(APIView):

	def get(self, request, args, *kwargs):
	data = [b.data() for b in Bookmark.objects.all()]
	return JSONResponse(data=dict(bookmarks=data))
	<template>
	<div class="version-update" v-if="versionUpdate">
	<p>There is a new version!</p>
	<button @click="getNewVersion">Get Update</button>
	</div>
	<div class="bookmark-list" v-else>
	<button @click="refresh">Refresh</button>
	<div v-for="(bookmark, index) in bookmarks" :key="index">
	<a :href="bookmark.url">{{ bookmark.title }}</a>
	</div>
	</div>
	</template>

	<script>
	import api from './api';
	export {
	data() {
	return {
	bookmarks: [],
	versionUpdate: false,
	}
	},
	methods: {
	getNewVersion() {
	window.location.reload(true);
	},
	refresh() {
	api.getBookmarks(data => {
	this.bookmarks = data.bookmarks;
	}).catch(error => {
	if (error.response && error.response.status === 418) {
	this.versionUpdate = true;
	} else {
	throw error;
	}
	});
	}
	},
	created() {
	this.refresh();
	}
	}
	</script>
	<html>
	<head>
	<!-- Put this in the head of your base template -->
	<script>
	window.AppConfig = {
	SOURCE_VERSION: '{{ SOURCE_VERSION }}',
	}
	</script>
	</head>
	<body>...</body>
	</html>
	# If you are deployed on Heroku you can get the unique version
	# of what's deployed from the environment
	#
	# https://devcenter.heroku.com/articles/dyno-metadata
	def settings(request):
	return dict(
	SOURCE_VERSION=os.environ.get("HEROKU_SLUG_COMMIT", "")
	)