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.
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).
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.
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
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 install
npm install --only=prod
npm run serve
npm run build
npm run lint
npm run test:unit
npm run test:e2e