Set up a basic npm vue/webpack setup

[isms]

Overview

We want to be able to use .vue files, ES6, and so forth.

Expected Behavior

As a first pass, NdagiStanley/vue-django has a lot of what we want. At a minimum, we want to be able to build .vue files so that we can use ✨ ES6 :sparkles and have our project JS compiled, including .vue files.

Design doc reference:

• Design and architecture section, software architecture diagram

Technical details

• There is something thinking to be done about how people should develop with this setup. One awkward aspect of the vue-django example is that we have two devservers (I think?) -- one from Django's manage.py and one from the JS setup.
• You don't have to handle hot JS reloading in this issue.

Acceptance criteria

• One single command to build project .vue (and other JS) assets, the output of which can be served by the Django process
• Docker setup updated so npm packages get installed

NOTE: All PRs must follow the standard PR checklist.

[excalliburbd]

You don't have to handle hot JS reloading in this issue.

Just to clarify: for the first pass we want to build the Vue project and have Django serve the static files?
It's a bit confusing since the previous point mentions two servers.

[isms]

@excalliburbd check out the current template, it's already using Vue this way just as a demonstration

[antonow]

I've been working on this issue, and I have a few questions.

1. I see that in the "Project Structure" section of the docs there is an asset folder that is outside of the backend and frontend directories. May I propose hosting the built assets for production inside an asset folder inside the frontend folder?

By putting the assets outside the frontend project, at least one of webpack's handy features won't work. If we want to append a hash to the compiled frontend assets, so that browsers know when the production assets have been changed and need to be re-fetched, then we probably want to delete old compiled assets so they don't pile up. In order to use webpack's clean-webpack-plugin, the assets folder cannot be outside of the frontend project root. See screenshot below.

2. I see that there is an open PR for a base frontend template done in Django (#9 Layout base Django template to match wireframes). I think all of the frontend interface should be compiled through Vue in order to leverage the speed/reactivity of a SPA in every part of the application. It also adds complexity when there are two entirely different places where views are rendered. Can we avoid merging the base Django layout, and is it ok if I incorporate WGierke's work on the base layout into the base Vue app?

[isms]

May I propose hosting the built assets for production inside an asset folder inside the frontend folder?

My instinct is that this is fine since backend should be "just" the API with no static assets.

I think all of the frontend interface should be compiled through Vue in order to leverage the speed/reactivity of a SPA in every part of the application. It also adds complexity when there are two entirely different places where views are rendered. Can we avoid merging the base Django layout[?]

This strikes me as correct. @lamby @pjbull thoughts?

[...] and is it ok if I incorporate WGierke's work on the base layout into the base Vue app?

Definitely. If the PR is accepted just reference @WGierke's work and you'll both get credit 👍 .

Thanks for the thoughtful questions!

[isms]

For transparency and planning purposes, I am planning to start working on this issue over the weekend if it hasn't been addressed by then. 👀

[lamby]

Fixed in PR #97 thanks!

[Akryum]

Using the full power of webpack and Vue is indeed a good idea if possible. The best development experience would be being able to launch the webpack-dev-server locally and proxy the API calls to the backend.

[isms]

@Akryum That's how it works right now!

[isms]

Closing, as we now have this for local development. The full building of assets for "production" is being tracked in #136.