Merge branch 'master' into fix-private-office-area

mm-webx · Aug 14, 2018 · 360014c · 360014c
2 parents be5cb86 + ab8b8ce
commit 360014c
Show file tree

Hide file tree

Showing 19 changed files with 66 additions and 26 deletions.
diff --git a/Procfile b/Procfile
@@ -1,2 +1,2 @@
 release: python manage.py migrate
-web: gunicorn project.wsgi --log-file -
+web: gunicorn backend.wsgi --log-file -
diff --git a/README.md b/README.md
@@ -1,16 +1,27 @@
-# Django Vue Template 🐍✌️
+# Django Vue Template ✌️ 🐍
 
 ![Vue Logo](/src/assets/logo-vue.png "Vue Logo")
 ![Django Logo](/src/assets/logo-django.png "Django Logo")
 
-This template is a minimal example for structuring an application using VueJs and Django (RestFramework).
+This template is a minimal example for an application using VueJs and Django (RestFramework).
 
-The goal is to let Vue + Vue Cli handle the frontend and asset bundling,
-and use Django + Rest Framework to manage a Data Models, API, and Static files.
+It's setup to have a clear separation: use Vue, Yarn, and Webpack to handle all frontend logic and asset bundling,
+and use Django and RestFramework to manage a Data Models, Web API, and serve static files.
 
-Vue Cli and Django Project template are kept as close as possible to their
-original state, with the exception of some configuration that is critical
-to the integration of the two frameworks.
+While it's possible to add endpoints to serve django-rendered html responses, the intention is to use Django primarily for the backend, and have view rendering and routing and handled by Vue + Vue Router as a Single Page Application (SPA).
+
+Out of the box, Django will serve the application entry point (`index.html` + bundled assets) at `/` , 
+data at `/api/`, and static files at `/static/`. Django admin panel is also available at `/admin/` and can be extended as needed.
+
+The application templates from Vue Cli `create` and Django `createproject` are kept as close as possible to their
+original state, except where a different configuration is needed for better integration of the two frameworks.
+
+#### Alternatives
+
+If this setup is not what you are looking for, you might want look at other similar projects:
+
+* [ariera/django-vue-template](https://github.com/ariera/django-vue-template)
+* [vchaptsev/cookiecutter-django-vue](https://github.com/vchaptsev/cookiecutter-django-vue)
 
 ### Demo
 
@@ -20,13 +31,26 @@ to the integration of the two frameworks.
 
 * Django
 * Django Restframework
-* Django Whitenoise
-* Gunicorn
+* Django Whitenoise, CDN Ready
 * Vue Cli 3
 * Vue Router
+* Gunicorn
 * Configuration for Heroku Deployment
 
 
+### Template Structure
+
+
+| Location             |  Content                                   |
+|----------------------|--------------------------------------------|
+| `/backend`           | Django Project & Backend Config            |
+| `/backend/api`       | Django App (`/api`)                        |
+| `/src`               | Vue App .                                  |
+| `/src/main.js`       | JS Application Entry Point                 |
+| `/public/index.html` | Html Application Entry Point (`/`)         |
+| `/public/static`     | Static Assets                              |
+| `/dist/`             | Bundled Assets Output (generated at `yarn build` |
+
 ## Prerequisites
 
 Before getting started you should have the following installed and running:
@@ -46,7 +70,7 @@ $ cd django-vue
 Setup
 ```
 $ yarn install
-$ pipenv install
+$ pipenv install --dev & pipenv shell
 $ python manage.py migrate
 ```
 
@@ -62,13 +86,13 @@ From another tab in the same directory:
 $ yarn serve
 ```
 
-The Vuejs template will be served from `localhost:8080` and the Django Api
+The Vuejs application will be served from `localhost:8080` and the Django Api
 and static files will be served from `localhost:8000`.
 
 The dual dev server setup allows you to take advantage of
 webpack's development server with hot module replacement.
-Proxy config in `vue.config.js` is used to router the requests
-back to django's Api.
+Proxy config in `vue.config.js` is used to route the requests
+back to django's Api on port 8000.
 
 If you would rather run a single dev server, you can run Django's
 development server only on `:8000`, but you have to build build the Vue app first
@@ -82,7 +106,7 @@ $ python manage.py runserver
 
 ## Deploy
 
-* Set `ALLOWED_HOSTS` on `project.settings.production.py`
+* Set `ALLOWED_HOSTS` on `backend.settings.prod.py`
 
 ### Heroku Server
 
@@ -92,19 +116,31 @@ $ heroku git:remote --app django-vue-template-demo
 $ heroku buildpacks:add --index 1 heroku/nodejs
 $ heroku buildpacks:add --index 2 heroku/python
 $ heroku addons:create heroku-postgresql:hobby-dev
-$ heroku config:set DJANGO_SETTINGS_MODULE=project.settings.prod
+$ heroku config:set DJANGO_SETTINGS_MODULE=backend.settings.prod
 
 $ git push heroku
 ```
 
+Heroku's nodejs buidlpack will handle install for all the dependencies from the `packages.json` file.
+It will then trigger the `postinstall` command which calls `yarn build`.
+This will create the bundled `dist` folder which will be served by whitenoise.
+
+The python buildpack will detect the `pipfile` and install all the python dependencies.
+
+The `Procfile` will run Django migrations and then launch Django'S app using gunicorn, as recommended by heroku.
+
+##### Heroku One Click Deploy
+
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/gtalarico/django-vue-template)
+
 ## Static Assets
 
-See `settings.prod` and `vue.config.js` for notes on static assets strategy.
+See `settings.dev` and `vue.config.js` for notes on static assets strategy.
 
 This template implements the approach suggested by Whitenoise Django.
 For more details see [WhiteNoise Documentation](http://whitenoise.evans.io/en/stable/django.html)
 
-It uses Whitenoise to serve all static files and Vue bundled files at `/static/`.
+It uses Django Whitenoise to serve all static files and Vue bundled files at `/static/`.
 While it might seem inefficient, the issue is immediately solved by adding a CDN
 with Cloudfront or similar.
 Use `vue.config.js` > `baseUrl` option to set point all your assets to the CDN,

diff --git a/app.json b/app.json
@@ -6,7 +6,7 @@
     "env": {
       "DJANGO_SETTINGS_MODULE": {
         "description": "Set Django Settings to Production",
-        "value": "project.settings.prod"
+        "value": "backend.settings.prod"
       }
      },
      "engines": {

diff --git a/project/__init__.py → backend/__init__.py b/project/__init__.py → backend/__init__.py
diff --git a/project/api/__init__.py → backend/api/__init__.py b/project/api/__init__.py → backend/api/__init__.py
diff --git a/project/api/admin.py → backend/api/admin.py b/project/api/admin.py → backend/api/admin.py
diff --git a/project/api/apps.py → backend/api/apps.py b/project/api/apps.py → backend/api/apps.py
diff --git a/project/api/migrations/0001_initial.py → backend/api/migrations/0001_initial.py b/project/api/migrations/0001_initial.py → backend/api/migrations/0001_initial.py
diff --git a/project/api/migrations/__init__.py → backend/api/migrations/__init__.py b/project/api/migrations/__init__.py → backend/api/migrations/__init__.py
diff --git a/project/api/models.py → backend/api/models.py b/project/api/models.py → backend/api/models.py
diff --git a/project/api/tests.py → backend/api/tests.py b/project/api/tests.py → backend/api/tests.py
diff --git a/project/api/views.py → backend/api/views.py b/project/api/views.py → backend/api/views.py
diff --git a/project/settings/__init__.py → backend/settings/__init__.py b/project/settings/__init__.py → backend/settings/__init__.py
diff --git a/project/settings/dev.py → backend/settings/dev.py b/project/settings/dev.py → backend/settings/dev.py
@@ -39,7 +39,7 @@
     'whitenoise.runserver_nostatic',  # < Per Whitenoise, to disable built in
     'django.contrib.staticfiles',
     'rest_framework',
-    'project.api',
+    'backend.api',
 ]
 
 MIDDLEWARE = [
@@ -53,7 +53,7 @@
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
 
-ROOT_URLCONF = 'project.urls'
+ROOT_URLCONF = 'backend.urls'
 
 TEMPLATES = [
     {
@@ -72,7 +72,7 @@
     },
 ]
 
-WSGI_APPLICATION = 'project.wsgi.application'
+WSGI_APPLICATION = 'backend.wsgi.application'
 
 
 # Database

diff --git a/project/settings/prod.py → backend/settings/prod.py b/project/settings/prod.py → backend/settings/prod.py
diff --git a/project/urls.py → backend/urls.py b/project/urls.py → backend/urls.py
diff --git a/project/wsgi.py → backend/wsgi.py b/project/wsgi.py → backend/wsgi.py
@@ -13,5 +13,6 @@
 
 # This will set production as default, but we must still set it with an
 # ENV on heroku to ensure that the migrate command runs agains the correct DB
-os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'project.settings.prod')
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'backend.settings.prod')
+
 application = get_wsgi_application()
diff --git a/manage.py b/manage.py
@@ -3,7 +3,7 @@
 import sys
 
 if __name__ == '__main__':
-    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'project.settings.dev')
+    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'backend.settings.dev')
     try:
         from django.core.management import execute_from_command_line
     except ImportError as exc:

diff --git a/src/components/Messages.vue b/src/components/Messages.vue
@@ -44,11 +44,14 @@ export default {
     postMessage() {
       const payload = { subject: this.subject, body: this.msgBody };
       this.$backend.$postMessage(payload).then(() => {
+        this.msgBody = ""
+        this.subject = ""
         this.fetchMessages();
       });
     },
-    deleteMsg(msgID) {
-        this.$backend.$deleteMessage(msgID).then(() => {
+    deleteMsg(msgId) {
+        this.$backend.$deleteMessage(msgId).then(() => {
+            this.messages = this.messages.filter(m => m.pk !== msgId)
             this.fetchMessages();
         });
     }