@marklogic-community/grove-vue-ui

Vue-MarkLogic-Node

This project provides a skeleton for a Vue.js front-end stack, designed to run against a grove-node middle-tier, backed by MarkLogic.

This project is still Work In Progress.

Quick Start

This template has not been integrated into grove-cli yet, so you'll have to scrape things together yourself. Next to this project, you'll need:

• a copy/clone of latest grove-node
• an instance of some MarkLogic REST api

You could potentially use grove-cli to gather most, hookup your copy of this project to that middle-tier, and launch the Vue-frontend instead of the React-frontend.

Make note at which host and port your middle-tier is running. The Vue front-end by default runs with a hot-reload feature, that runs at its own port (typically 8080, or higher if occupied), and needs to know to where backend calls need to be proxied:

• edit appHost and appPort constants in vue.config.js (should point to the middle-tier)

After that you can pull in dependencies, and launch the front-end:

• npm install
• npm run serve

A browser should open automatically (typically at localhost:8080).

Using HTTPS

There are two places to think about HTTPS:

• When serving the files of this UI application to a client (a browser), and
• When this UI application makes network calls to a middle-tier or other backend.

As the sections below make clear, in most production-like situations, nothing needs to change in this application when moving from HTTP to HTTPS or vice-versa.

Using HTTPS when serving the UI application

You will most often want to use HTTPS in a production-like environment. Typically, in such an environment, this UI will have been transpiled and minified into a set of static files (possible to achieve by running npm run build). A file server (which could be a Grove middle-tier, but could also be Apache, Nginx, etc, which serves static assets and proxies back to a middle-tier) will then serve those files to clients. The file server should be configured to use HTTPS - and nothing special has to be done in this UI application.

Sometimes, however, you will want to use HTTPS in development, when you are making use of the Webpack development server bundled with this Vue.js CLI based app. This is easy to setup: Simply set the VUE_APP_ENABLE_HTTPS_IN_FRONTEND environment variable to true.

You can do this in .env.development (shared with your team) or .env.development.local (only for your local machine):

VUE_APP_ENABLE_HTTPS_IN_FRONTEND=true

Using HTTPS when making network calls

As in the last section, in a production situation, nothing special needs to be done. All network calls should be relative URLs, inheriting the protocol (https), host and port from which the UI application files themselves were served.

In development, when your middle-tier or other backend requires HTTPS, simply set the VUE_APP_HTTPS_ENABLED_IN_MIDDLETIER environment variable to true.

You can do this in .env.development (shared with your team) or .env.development.local (only for your local machine):

VUE_APP_HTTPS_ENABLED_IN_MIDDLETIER=true

NPM command overview

Install all dependencies

npm install

Install prod dependencies only

npm install --only=prod

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit

Run your end-to-end tests

npm run test:e2e