plumber-vue

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

Project Structure

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.

Directory Structure

 .
 ├── 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>

Frontend Application

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.

Development

After cloning the repo:

yarn install # or npm install

Start the frontend application

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

Build the frontend assets into the Plumber project

yarn build