Updating docs with latest vue-cli updates
diff --git a/docs/dev/new_django_app.md b/docs/dev/new_django_app.md
index f880d14..88d654a 100644
--- a/docs/dev/new_django_app.md
+++ b/docs/dev/new_django_app.md
@@ -52,32 +52,33 @@
Some of these are self explanatory, but here are some details on each of these
properties:
-- _name_ - this is the python package of the app
-- _label_ - this needs to be unique across all installed Django apps. I just
- make this match the _app_name_ in `urls.py`.
-- _verbose_name_ - display name of app
-- _app_order_ - order of app in the menu listing. Range is 0 - 100. See the
- other Django apps for their values to figure out how to order this app
- relative to them.
-- _url_home_ - namespaced url of the "home" page of this app. This will be the
- url used when a user selects this app in a navigational menu.
-- _fa_icon_class_ - a FontAwesome icon class. See
- [the list of available icons for v. 4.7](https://fontawesome.com/v4.7.0/icons/).
-- _app_description_ - description of this app
-- _nav_ - **optional** provide navigation into sections of the app. The _nav_ is
- optional but is necessary to provide users with a link from the left hand side
- navigation bar to a url in your app.
- - _label_ - textual label, displayed on hover in the side navigation bar
- - _icon_ - FontAwesome icon, see _fa_icon_class_ above
- - _url_ - named or namespaced url
- - _active_prefixes_ - list of strings that come after this app's base url for
- all urls that are considered "active" for this nav item. This is used to
- highlight the currently active nav item in the left side navigation bar. For
- example, let's say the app's base url is "/myapp" and urls belonging to the
- "projects" nav item are of the form "/myapp/projects/`<project_id>`" and
- "/myapp/new-project". Then you would set _active_prefixes_ to
- `["projects", "new-project"]`. These strings can also be [regular
- expressions](https://docs.python.org/3/library/re.html#regular-expression-syntax).
+- _name_ - this is the python package of the app
+- _label_ - this needs to be unique across all installed Django apps. I just
+ make this match the _app_name_ in `urls.py`.
+- _verbose_name_ - display name of app
+- _app_order_ - order of app in the menu listing. Range is 0 - 100. See the
+ other Django apps for their values to figure out how to order this app
+ relative to them.
+- _url_home_ - namespaced url of the "home" page of this app. This will be the
+ url used when a user selects this app in a navigational menu.
+- _fa_icon_class_ - a FontAwesome icon class. See
+ [the list of available icons for v. 4.7](https://fontawesome.com/v4.7.0/icons/).
+- _app_description_ - description of this app
+- _nav_ - **optional** provide navigation into sections of the app. The _nav_
+ is optional but is necessary to provide users with a link from the left hand
+ side navigation bar to a url in your app.
+ - _label_ - textual label, displayed on hover in the side navigation bar
+ - _icon_ - FontAwesome icon, see _fa_icon_class_ above
+ - _url_ - named or namespaced url
+ - _active_prefixes_ - list of strings that come after this app's base url
+ for all urls that are considered "active" for this nav item. This is
+ used to highlight the currently active nav item in the left side
+ navigation bar. For example, let's say the app's base url is "/myapp"
+ and urls belonging to the "projects" nav item are of the form
+ "/myapp/projects/`<project_id>`" and "/myapp/new-project". Then you
+ would set _active_prefixes_ to `["projects", "new-project"]`. These
+ strings can also be
+ [regular expressions](https://docs.python.org/3/library/re.html#regular-expression-syntax).
### Add AppConfig to INSTALLED_APPS
@@ -202,7 +203,7 @@
Now, create a `home.html` template:
-```html
+```django
{% extends './base.html' %}
{% load static %}
{% block css %}
@@ -225,68 +226,77 @@
Now we'll add JavaScript build config to the app using Vue.js, npm and webpack.
+!!! note
+
+ These instructions are likely to become outdated. You can also run `vue
+ create` to create these configuration files. Also see the existing Django
+ apps, like *workspace*, and compare how they are set up.
+
Add a package.json file to the app's directory (i.e.,
django_airavata/apps/myapp):
```json
{
- "name": "django-airavata-myapp-views",
- "description": "A Vue.js project",
- "version": "1.0.0",
- "author": "Apache Airavata <dev@airavata.apache.org>",
- "private": true,
- "scripts": {
- "serve": "vue-cli-service serve",
- "build": "vue-cli-service build",
- "lint": "vue-cli-service lint",
- "format": "prettier --write ."
- },
- "dependencies": {
- "bootstrap": "^4.0.0-beta.2",
- "bootstrap-vue": "2.0.0-rc.26",
- "django-airavata-api": "link:../api",
- "django-airavata-common-ui": "link:../../static/common",
- "vue": "^2.5.21"
- },
- "devDependencies": {
- "@vue/cli-plugin-babel": "^3.1.1",
- "@vue/cli-plugin-eslint": "^3.1.1",
- "@vue/cli-service": "^3.1.1",
- "babel-eslint": "^10.0.1",
- "eslint": "^5.8.0",
- "eslint-plugin-vue": "^5.0.0-0",
- "prettier": "^2.1.2",
- "vue-template-compiler": "^2.5.21",
- "webpack-bundle-tracker": "^0.4.2-beta"
- },
- "eslintConfig": {
- "root": true,
- "env": {
- "node": true
+ "name": "django-airavata-myapp-views",
+ "description": "A Vue.js project",
+ "version": "1.0.0",
+ "author": "Apache Airavata <dev@airavata.apache.org>",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint",
+ "format": "prettier --write ."
},
- "extends": ["plugin:vue/essential", "eslint:recommended"],
- "rules": {},
- "parserOptions": {
- "parser": "babel-eslint"
- }
- },
- "postcss": {
- "plugins": {
- "autoprefixer": {}
- }
- },
- "browserslist": ["> 1%", "last 2 versions", "not dead"]
+ "dependencies": {
+ "bootstrap": "^4.3.1",
+ "bootstrap-vue": "^2.21.2",
+ "core-js": "^3.8.3",
+ "django-airavata-api": "link:../api",
+ "django-airavata-common-ui": "link:../../static/common",
+ "vue": "^2.5.21"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.12.16",
+ "@babel/eslint-parser": "^7.12.16",
+ "@vue/cli-plugin-babel": "~5.0.8",
+ "@vue/cli-plugin-eslint": "~5.0.8",
+ "@vue/cli-service": "~5.0.8",
+ "eslint": "^7.32.0",
+ "eslint-plugin-vue": "^8.0.3",
+ "prettier": "^2.1.2",
+ "vue-template-compiler": "^2.5.22",
+ "webpack-bundle-tracker": "^0.4.2-beta"
+ },
+ "eslintConfig": {
+ "root": true,
+ "env": {
+ "node": true
+ },
+ "extends": ["plugin:vue/essential", "eslint:recommended"],
+ "rules": {},
+ "parserOptions": {
+ "parser": "@babel/eslint-parser",
+ "requireConfigFile": false
+ }
+ },
+ "postcss": {
+ "plugins": {
+ "autoprefixer": {}
+ }
+ },
+ "browserslist": ["> 1%", "last 2 versions", "not dead"]
}
```
-Run `yarn` which will install these dependencies and also create a
-`yarn.lock` file with locked dependency versions.
+Run `yarn` which will install these dependencies and also create a `yarn.lock`
+file with locked dependency versions.
Add a `babel.config.js` to this directory too:
```javascript
module.exports = {
- presets: ["@vue/app"]
+ presets: ["@vue/cli-plugin-babel/preset"],
};
```
@@ -297,81 +307,30 @@
const path = require("path");
module.exports = {
- publicPath:
- process.env.NODE_ENV === "development"
- ? "http://localhost:9000/static/django_airavata_myapp/dist/"
- : "/static/django_airavata_myapp/dist/",
- outputDir: "./static/django_airavata_myapp/dist",
- pages: {
- home: "./static/django_airavata_myapp/js/entry-home"
- // additional entry points go here ...
- },
- css: {
- loaderOptions: {
- postcss: {
- config: {
- path: __dirname
- }
- }
- }
- },
- configureWebpack: {
- plugins: [
- new BundleTracker({
- filename: "webpack-stats.json",
- path: "./static/django_airavata_myapp/dist/"
- })
- ],
- optimization: {
- /*
- * Force creating a vendor bundle so we can load the 'app' and 'vendor'
- * bundles on development as well as production using django-webpack-loader.
- * Otherwise there is no vendor bundle on development and we would need
- * some template logic to skip trying to load it.
- * See also: https://bitbucket.org/calidae/dejavu/src/d63d10b0030a951c3cafa6b574dad25b3bef3fe9/%7B%7Bcookiecutter.project_slug%7D%7D/frontend/vue.config.js?at=master&fileviewer=file-view-default#vue.config.js-27
- */
- splitChunks: {
- cacheGroups: {
- vendors: {
- name: "chunk-vendors",
- test: /[\\/]node_modules[\\/]/,
- priority: -10,
- chunks: "initial"
- },
- common: {
- name: "chunk-common",
- minChunks: 2,
- priority: -20,
- chunks: "initial",
- reuseExistingChunk: true
- }
- }
- }
- }
- },
- chainWebpack: config => {
- /*
- * Specify the eslint config file otherwise it complains of a missing
- * config file for the ../api and ../../static/common packages
- *
- * See: https://github.com/vuejs/vue-cli/issues/2539#issuecomment-422295246
- */
- config.module
- .rule("eslint")
- .use("eslint-loader")
- .tap(options => {
- options.configFile = path.resolve(__dirname, "package.json");
- return options;
- });
- },
- devServer: {
- port: 9000,
- headers: {
- "Access-Control-Allow-Origin": "*"
+ publicPath:
+ process.env.NODE_ENV === "development"
+ ? "http://localhost:9000/static/django_airavata_myapp/dist/"
+ : "/static/django_airavata_myapp/dist/",
+ outputDir: "./static/django_airavata_myapp/dist",
+ pages: {
+ home: "./static/django_airavata_myapp/js/entry-home",
+ // additional entry points go here ...
},
- hot: true,
- hotOnly: true
- }
+ configureWebpack: {
+ plugins: [
+ new BundleTracker({
+ filename: "webpack-stats.json",
+ path: "./static/django_airavata_myapp/dist/",
+ }),
+ ],
+ },
+ devServer: {
+ port: 9000,
+ headers: {
+ "Access-Control-Allow-Origin": "*",
+ },
+ hot: true,
+ },
};
```
