Browse (Module)

Browse

Browse is a module that will allow users to interact with the data that is captured as meta-data and files within the SPARC data resource. The Browse module is implemented as a Vue.js application leveraging web-components to create a modular interface.

The front-end framework leverages Element components.

Code Structure

The general structure of the application is outlined below:

/dat_core/
|-- static
    `-- dist
        |-- _build
        `-- browse.html
|-- vue_app
    |-- public
        `-- index.html
    |-- src
        |-- assets
        |-- components
        |-- App.vue
        `-- main.js
    |-- babel.config.js
    |-- package.json
    |-- vue.config.js
    |-- webpack.config.js
    `-- webpack.config.prod.js
|-- __init__.py
`-- views.py

Build process (in Prod environment)

• npm install && npm install --only=dev to install both dependencies and devdependencies for application.
• npm run build-prod to run webpack and generate static assets. The static assets are exported to the static folder of the Flask module and served by the Flask server.

Routes

Routes are defined in views.py and include:

• /browse/: main browse entry page.