This is an automated email from the ASF dual-hosted git repository. machristie pushed a commit to branch develop in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 2323ab2907957927f04e735fc2aad5a9dac19283 Author: Marcus Christie <[email protected]> AuthorDate: Fri Nov 11 17:50:49 2022 -0500 Updating docs with latest vue-cli updates --- docs/dev/new_django_app.md | 257 +++++++++++++++++++-------------------------- 1 file changed, 108 insertions(+), 149 deletions(-) diff --git a/docs/dev/new_django_app.md b/docs/dev/new_django_app.md index f880d146..88d654ac 100644 --- a/docs/dev/new_django_app.md +++ b/docs/dev/new_django_app.md @@ -52,32 +52,33 @@ class MyAppConfig(AiravataAppConfig): 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 @@ this file assuming that it will load webpack bundles generated by vue-cli: Now, create a `home.html` template: -```html +```django {% extends './base.html' %} {% load static %} {% block css %} @@ -225,68 +226,77 @@ top and clicking on it should display the home page of this app. 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 <[email protected]>", - "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 <[email protected]>", + "private": true, + "scripts": { + "serve": "vue-cli-service serve", + "build": "vue-cli-service build", + "lint": "vue-cli-service lint", + "format": "prettier --write ." + }, + "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 + } }, - "extends": ["plugin:vue/essential", "eslint:recommended"], - "rules": {}, - "parserOptions": { - "parser": "babel-eslint" - } - }, - "postcss": { - "plugins": { - "autoprefixer": {} - } - }, - "browserslist": ["> 1%", "last 2 versions", "not dead"] + "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 BundleTracker = require("webpack-bundle-tracker"); 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 ... + }, + configureWebpack: { + plugins: [ + new BundleTracker({ + filename: "webpack-stats.json", + path: "./static/django_airavata_myapp/dist/", + }), + ], + }, + devServer: { + port: 9000, + headers: { + "Access-Control-Allow-Origin": "*", + }, + hot: true, }, - hot: true, - hotOnly: true - } }; ```
