Project structure showing the use of an R-based Plumber API with a Vue frontend, using Vue CLI.

Creates a single-page application that operates on the same origin. For that reason, it isn't necessary to enable CORS on the specific routes if accessed from within the application.

This allows a development split between the analytical logic, served by the API, and the presentation logic and development workflow.

 .
 ├── files/ # output js built here, served as Plumber static assets
 ├── js/
 │   ├─ src/
 │   ├─ components/
 │   ├─ .env.local
 │   └─ main.js
 │
 ├─ entrypoint.R
 └─ plumber.R

The static Vue assets can then be built into the @assets directory served by Plumber.

# plumber.R

#* @assets ./files/static /
list()

Using the below structure in the vue.config.js:

// vue.config.js
module.exports = {
  publicPath:
    process.env.NODE_ENV == "production" ? process.env.CONNECT_URL : "/",
  outputDir: "../files/static",
  devServer: {
    proxy: process.env.PROXY_URL
  }
};

The env variables are defined in a .env file in the /js root.

CONNECT_URL=<for deployment on RStudio Connect>
PROXY_URL=http://localhost:<port of plumber app>

The Vue application uses axios to make requests back to the API routes.

// main.js
const HTTP = axios.create({
  baseURL: process.env.NODE_ENV == "production" ? process.env.CONNECT_URL : ""
});

Vue.prototype.$axios = HTTP;

Every request using this.$axios within the VUe app will now use the HTTP custom instance.

After cloning the repo:

yarn install # or npm install

Make sure that the Plumber application is also running at this time since the API, even in development mode is making requests against the API endpoints.

yarn serve

yarn build